@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

/* 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; vertical-align:middle; }
h1, h2, h3, h4, h5, h6,p {margin: 0; padding: 0; border: 0; font-size: 100%;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
img { outline:0;}
:focus { outline: 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%; }
input, button, textarea, select { *font-size: 100%;}
ol, ul, li { list-style: none; }
:link, :visited, ins { text-decoration: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong{ vertical-align:bottom;}

/*----------setting*/
img,a{border:0; outline:0;}
a{ text-decoration:none;}
body { font-family: "cwTeXYen", 微軟正黑體, Microsoft JhengHei, sans-serif; background: #71a1e9; font-weight:900;}
::selection { background:#11163a; color:#fff; }
::-moz-selection { background:#11163a; color:#fff;}
.yel { color:#ffc355 !important;}
.blue { color:#1264c6 !important;}
a.blue:hover { text-decoration: underline;}
.red { color:#c33e1d !important;}
.green { color:#709b87;}
.gray { color:#294260 !important;}
.white { color: #fff;}
.txt-s { font-size:14px; line-height:20px;}
a.txt-h { text-decoration:underline; color:#000;}
a.txt-h:hover { opacity: 0.8;}
.txt-b { font-weight:bold;}
.txt-center { text-align:center;}
.txt-right { text-align: right;}
a.ora{ color:#e58f44; text-decoration:underline;}
a.ora:hover{ opacity:0.7;}
.inner { width:90%; max-width:1200px; margin:0 auto;}
p { font-size:18px; line-height:30px; color:#666;}
.small { font-size:15px !important; }
.break { display:block;}
.m-b-m { margin-bottom:20px;}
.m-b-L { margin-bottom:50px;}
.m-t-m { margin-top:20px;}
.m-t-L { margin-top:50px;}

/*mini head*/
#qi_bar { position: absolute; top: 0; left: 2%; width:96%; margin: 0 auto; z-index: 3;}
a.logo { display:block; float:left; margin-top:12px; margin-left:10px;}
ul#option { float:right; margin-top:20px; font-size:12px; line-height:15px; }
ul#option li { display:block; float:left;margin-left:15px; vertical-align:middle; }
ul#option li a { font-size:13px; color:#fff; text-decoration:none; vertical-align:middle; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
ul#option li a:hover { text-decoration: underline;}
ul#option li.p-m { display: none;}
.btn-menu{ display:none;}
.mask { display: none;}

img {max-width:100%!important; height: auto !important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}

/* gotop */
#gotop{ display: block; position: fixed; right: 15px; bottom: 15px; z-index:8; text-align: center;-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover{ bottom: 20px;}

/*---------- top visual*/
.visual { width:100%; height:1000px; overflow: hidden; position: relative; background: url("../images/idx-bg.jpg") no-repeat bottom center; background-size:cover;}
.visual .dragon1 { position:absolute; right:-80px;; top:400px;}
.visual .dragon2 { position:absolute; right:-100px; top:100px;}
.visual .title {}
.idx-txt { text-align: center; padding-top:100px;}
.sub-title { text-align: center; padding:20px 0; color: #fff; font-size:30px; line-height:35px; font-weight:500;}
.idx-menu {}
.idx-menu a { display:inline-block; vertical-align: middle; color:#003f9b; font-size:30px; width:240px; height:90px; font-weight:bold; text-align: center; line-height: 90px; margin: 10px;}
.idx-menu a:first-child { background: url("../images/btn1.png") no-repeat center;}
.idx-menu a:nth-child(2) { background: url("../images/btn2.png") no-repeat center;}
.idx-menu a:nth-child(3) { background: url("../images/btn3.png") no-repeat center;}
.idx-menu a:first-child:hover { background: url("../images/btn1-h.png") no-repeat center;}
.idx-menu a:nth-child(2):hover { background: url("../images/btn2-h.png") no-repeat center;}
.idx-menu a:nth-child(3):hover { background: url("../images/btn3-h.png") no-repeat center;}
.visual .bg-m { display: none;}
footer { clear: both; width:100%; margin:0 auto; text-align:center; font-size:12px; padding: 30px 0;}
.visual footer { position: absolute; bottom:0; left: 0;}

/*----------nav*/
nav { width:240px; position: fixed; left:3%; top:350px; z-index:10; text-align: center; padding:5px;}
nav.ins {/*-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;*/}
nav ul {}
nav ul li { margin:5px 0;}
nav a{ display:block; color:#003f9b; font-size:28px; width:200px; text-align: center; line-height:75px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
nav ul li:nth-child(1) a{ background: url("../images/btn1.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(2) a { background: url("../images/btn2.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(3) a { background: url("../images/btn3.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(4) a { background: url("../images/btn1.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(1) a:hover,nav ul li:nth-child(1) a.active { background: url("../images/btn1-h.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(2) a:hover,nav ul li:nth-child(2) a.active { background: url("../images/btn2-h.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(3) a:hover,nav ul li:nth-child(3) a.active { background: url("../images/btn3-h.png") no-repeat center; background-size: 200px 75px;}
nav ul li:nth-child(4) a:hover,nav ul li:nth-child(4) a.active { background: url("../images/btn1-h.png") no-repeat center; background-size: 200px 75px;}

/*----------part1*/
#bg1{ background:url(../images/img1.png) top center no-repeat; width:100%; height:3000px; left:0; position:fixed; z-index:1;}
#bg2{ background:url(../images/img2.png) top center no-repeat; width:100%; height:3000px; left:0; position:fixed; z-index:2;}
#bg3{ background:url(../images/img3.png) top center no-repeat; width:100%; height:4000px; left:0; position:fixed; z-index:2;}
#bg4{ background:url(../images/img4.png) top center no-repeat; width:100%; height:3000px; left:0; position:fixed; z-index:2; background-size: contain;}
.container #qi_bar { position:static; width:100%; margin: 0 auto; overflow: hidden; margin-bottom: 20px;}
.container { width:1300px; margin: 0 auto; overflow: hidden; position: relative;}
.container footer { padding-bottom: 50px;}
.content { width: 90%; margin: 0 auto; max-width: 1000px; position: relative; z-index: 3;}
.top-banner { background: url("../images/top-bg.png") no-repeat center; height:380px; text-align: center; padding-top: 50px; background-size: cover;}

.bigcate-title { clear: both; margin: 40px auto; text-align: center;}
.sec-title { text-align: center; font-size:28px; line-height:35px;}
.sec-title2 { text-align: center; font-size:22px; line-height:30px;}
.cate-title { position: relative; text-align: center; clear: both; margin: 30px 0;}
.cate-title img{ vertical-align: middle; clear: both; margin: 20px 0;}
.cate-title a { position:absolute; right:0; top:30px; font-size:14px; padding:5px; width:90px; background:#00327a; color:#fff; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
.cate-title a:hover { background:#c33e1d;}
.cate-title .forp2-pc {}
.cate-title .forp2-m { display: none;}

/* 閱讀報告 */
.chart { overflow: hidden; clear: both; background:#91bdf2; width:90%; max-width:800px; margin:0 auto 20px auto; padding:30px 5%; border-radius:10px;}
.chart .left { float: left;}
.chart .right { float: right;}
.chart .imgs { text-align:center; width: 30%;}
.chart .txt { width:calc( 70% - 50px ); padding: 30px 0 30px 50px; font-size:30px; line-height:45px; }
.chart .txt .counter,.chart .txt .white { font-size:38px; color: #fff; font-weight: bold;}

/* 會員榜單 */
.chart2 { overflow:hidden; clear:both; background:#91bdf2; max-width:900px; margin:0 auto; border-radius:10px;}
.chart2 .title { text-align: center; background: #fff; padding:5px 0; border-radius: 10px 10px 0 0;}
.chart2 .title img{ vertical-align: middle;}
.chart2 .title img.br {}
.member-list { width:80%; margin:0 auto; overflow:hidden; padding:30px 0 60px 0;}
.member-list .box { margin-bottom: 5px; font-size:18px; line-height:30px;}
.member-list .num {margin-right: 5px; background: #133f67; border-radius: 100%; color:#fff; width: 24px; line-height:24px; text-align: center; display: inline-block; font-size: 13px;}
.member-list .left { float: left; width: 50%;}
.member-list .right { float: right; width: 50%;}

.bgB { background: #91bdf2; padding-top:50px; margin-top:100px;}
/* 年度暢銷作品 */
.tabset { text-align: center;}
.tabset > input[type="radio"] { position: absolute; left: -200vw;}
.tabset .tab-panel { display: none;}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}
.tab-btns { text-align: center;}
.tabset > label { display:block; float: left; width: 50%; padding:20px 0; font-weight: bold; font-size:35px; cursor: pointer; text-align:center; background:#a6cef7; position: relative; z-index: 1;}
.tabset #tab1-1 + label, .tabset #tab2-1 + label,.tabset #tab3-1 + label,.tabset #tab4-1 + label { border-radius: 10px 0 0 0;}
.tabset #tab1-2 + label, .tabset #tab2-2 + label,.tabset #tab3-2 + label,.tabset #tab4-2 + label { border-radius: 0 10px 0 0;}
.tabset > label:hover,.tabset > input:focus + label {}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {}
.tabset > input:checked + label { background: #fff;}
.tab-panels { clear: both; padding-top:20px; background:#fff; border-radius: 0 0 10px 10px;}
.tab-panel { padding: 20px 0;}
.tabset label,.tabset label:before,.tabset label:after { box-sizing: border-box;}

.tabUI2 { width:100%;}
.tabUI2 .tabs { text-align:center; margin-bottom: 30px;}
.tabUI2 .tabs li { display:inline-block; position:relative;}
.tabUI2 .tabs li a{ display:block; width: 120px; padding:12px 0; font-size:20px; line-height:20px; color:#000; border: 1px solid #dfded2;}
.tabUI2 .tabs li a:hover { border:1px solid #000;}
.tabUI2 .tabs li.active a{ border:1px solid #000;}
.tabUI2 .tabs li.tab-active a{ border:1px solid #000;}
.tab_container2 { clear: both;}
.tab_container2 ul { position: relative; overflow: hidden; height:700px;}
.tab_content2 li { position: absolute; width:1100px; height:100%; padding-top:10px;}

.tab_content { overflow: hidden;}
.tabs-in:not(:first-child) { display: none;}
.tabs-in:first-child { display:block;}
.tab-in {}

.book-list.fortab { }
.book-list { clear:both; text-align:center;}
.tab-in.book-list {}
.book-list .box { display:inline-block; vertical-align:top; width:162px; height:320px; margin:0 6px; }
.book-list .cover { position:relative;}
.book-list .cover .num { position:absolute; left:-8px; top:-8px; width:26px; height:26px; color:#fff; font-size:13px; border-radius:13px; line-height:26px; text-align:center; background:#000;}
.book-list .cover .num.n1 { background:#a61802 !important;}
.book-list .cover .num.n2 { background:#d20000 !important;}
.book-list .cover .num.n3 { background:#dd5800 !important;}

.cover img { width:160px; height:207px;-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.cover:hover img { box-shadow:0 0 0 2px #70a1e8;}
.book-list .box h3 { color:#000; font-size:20px; line-height:22px; margin:8px 0; }
.book-list .box p { color:#c33e1d; font-size:15px; line-height: 16px; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
.book-list .box .bdate { background: #be2600; color: #fff; padding:3px 8px; font-size:15px; position: absolute; left: -5px; top: 5px; }
.book-list .box a.go { color:#be2600; border: 2px solid #be2600; font-size:18px; display: block; padding: 8px 0; text-align: center; margin-top: 15px; }
.book-list .box a.go:hover { background:#be2600; color: #fff; }

/*----------part2*/
/* 暢銷榜感言 */
.author-wrap { text-align: left; width: 100%; margin: 0 auto;}
.author-box { padding:20px 40px;}
.author-box .photo { display: inline-block; vertical-align:middle;}
.author-box .photo img { display: block; width: 200px; height: 200px;  border-radius: 50%;}
.author-box .info { display: inline-block; margin: 0 2%; width:57%; vertical-align:middle;}
.author-box .cover2 { display: inline-block; vertical-align:middle; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.author-box .cover2 img { width:100px; height:133px;}
.author-box .cover2:hover { opacity: 0.7;}
.author-box .tag { margin-bottom: 20px;}
.author-box .tag span { display: inline-block; border: 1px solid #000; margin-right: 8px; font-size: 15px; padding:2px 5px; vertical-align:middle; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
.info h3 { font-size:35px; line-height: 40px; margin-bottom: 20px;}
.info p { color: #000; font-size: 17px; line-height:24px; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
.info p:before { display: inline; content: "❝ "; color:#91bdf2; font-size:25px;}
.info p:after { display: inline; content: " ❞"; color:#91bdf2; font-size:25px;}
.line { width:90%; height:1px; background:#bcd2ed; margin:20px auto;}

/* 投票感言 */
.vote-box { position: relative; margin:80px 8px; background: #fff; border-radius:10px;}
.vote-box .ti { position: absolute; width: 100%; text-align: center; top: -50px;}
.vote-box .photo { display: inline-block; vertical-align:middle; width:40%; height: 460px;}
.vote-box .photo.p1 { background: url("../images/author/vote1.jpg") no-repeat left center #fff; background-size: cover;}
.vote-box .photo.p2 { background: url("../images/author/vote2.jpg") no-repeat center #fff; background-size:cover}
.vote-box .info { display: inline-block; vertical-align:middle; width:50%; padding:40px 3% 40px 5%;}
.vote-box .cover3 { display: block; border: 1px solid #000; position: absolute; left:32%; bottom: 20px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.vote-box .cover3 img { width:100px; height:133px;}
.vote-box .cover3:hover { bottom: 25px;}

/*----------part3*/
.bigcate-title3 { background: url("../images/p3-title.png") no-repeat center; height: 52px; margin: 30px 0;}
.act-box { box-shadow: 0 0 0 1px #000, 0 0 0 5px #e58f44, 0 0 0 6px #000; position: relative; width: 90%; padding:60px 4%; margin:60px auto 20px auto;}
.act-title { position: absolute; top: -40px; left: 0; width: 100%; text-align: center;}
.btn-wrap { position: relative; width: 100%; height: 150px; text-align: center;}
.btn-go { display: inline-block; transition: transform .2s;}
.btn-go:hover{transform: scale(1.1);}
.tiger { position: absolute; right:80px; top: -100px;}
ol.act { list-style: none; counter-reset: item;}
ol.act > li { counter-increment: item; margin-bottom: 15px; font-size:22px; line-height:32px;}
ol.act > li:before { margin-right: 5px; content: counter(item); background: #000; border-radius: 100%; color: white; width:30px; line-height:30px; text-align: center; display: inline-block; font-size: 18px;}

/* 獎品 */
.awards { text-align:center; margin-top: 20px;}
.awards div { display:inline-block; vertical-align:top; margin:5px;}
.awards div img {max-width:100%!important; height: auto !important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.awards h4 { font-size:18px; line-height:20px; margin:10px 0 0 0;}
.awards p { font-size:14px; color: #000;}

/* 步驟 */
.step-wrap {}
.step-wrap .field { display: inline-block; vertical-align: top; width: 31%; margin: 20px 1%; font-size:20px; line-height:30px;}
.step-wrap .red { margin: 15px 0; font-size:25px; font-weight: bold;}

/* 注意事項 */
.note-wrap { background: #91bdf2; border-radius: 10px; padding:0 20px 20px 20px; margin: 50px 0;}
.note-wrap .ti { width:150px; background:#000; color: #70a1e8; font-size: 20px; padding: 10px; margin: 0 auto; position: relative; top: -20px; text-align: center;}
ol.note { padding-left: 20px;}
ol.note li { list-style: decimal; font-size:15px; margin-bottom: 15px; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}


/*---------- responsive */

@media screen and (max-width: 1600px) {
	
	/* top visual*/
	.visual .dragon1 { right:-90px;; top:500px;}
	.visual .dragon2 { right:-110px; top:100px;}
	.visual .dragon1 img { width: 400px; height: 276px;}
	.visual .dragon2 img { width: 400px; height: 141px;}

	nav { left:1%;}
	.content { max-width:920px;}
}

@media screen and (max-width: 1300px) {

	.container { width:90%;}
	.content {}
	.chart .txt { width:calc( 100% - 350px ); padding: 30px 0 0 50px; font-size:25px; line-height:30px;}
	.chart .txt .counter,.chart .txt .white { font-size:30px;}
	.cate-title .m-hide { display: none;}
	
	/* TOP風雲榜 */
	.author-box .photo img { width:150px; height: 150px;}
	.author-box .info { display: inline-block; margin: 0 2%; width:57%; vertical-align:middle;}
	.author-box .cover2 img,.vote-box .cover3 img { width:70px; height:93px; }
	.info h3 { font-size:28px; line-height:30px;margin-bottom:15px;}
	.info p { font-size: 16px; line-height:22px;}

}

@media screen and (max-width: 1100px) {

	.btn-menu { display:block; width:40px; height:40px; position:fixed; top:50px; left:10px; background:url(../images/icon-menu.png) no-repeat center; background-size:40px 40px; z-index: 11;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:40px 40px;}
	/*.btn-share { display:block; width:32px; height:32px; position:absolute; top:10px; right:50px; background:url(../images/icon-share.png) no-repeat center; background-size:32px 32px; z-index: 11;}
	.btn-share.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:32px 32px;}*/
	
	.visual { height:900px; background: url("../images/idx-bg-m.jpg") no-repeat center #70a1e8; background-size:cover;}
	.visual .dragon1 { position:absolute; right:-80px;; top:400px;}
	.visual .dragon2 { position:absolute; right:-100px; top:100px;}
	.visual .dragon1 img { width: 300px; height: 207px;}
	.visual .dragon2 img { width: 300px; height: 106px;}
	.visual .title {}
	.idx-txt { width: 90%; max-width:500px; margin: 0 auto; text-align: center; padding-top:100px;}
	.sub-title { text-align: center; padding:20px 0; color: #fff; font-size:25px; line-height:35px;}
	.idx-menu {}
	.idx-menu a { font-size:25px; width:200px; height:75px; text-align: center; line-height:75px; margin: 5px;}
	.idx-menu a:first-child { background: url("../images/btn1.png") no-repeat center; background-size:100% 100%;}
	.idx-menu a:nth-child(2) { background: url("../images/btn2.png") no-repeat center; background-size:100% 100%;}
	.idx-menu a:nth-child(3) { background: url("../images/btn3.png") no-repeat center; background-size:100% 100%;}
	.idx-menu a:first-child:hover { background: url("../images/btn1-h.png") no-repeat center; background-size:100% 100%;}
	.idx-menu a:nth-child(2):hover { background: url("../images/btn2-h.png") no-repeat center; background-size:100% 100%;}
	.idx-menu a:nth-child(3):hover { background: url("../images/btn3-h.png") no-repeat center; background-size:100% 100%;}
	
	/*nav*/
	nav,.visual nav { float: none; position: fixed; left: -250px; top: 100px; z-index: 10; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
	.mask { position: fixed; width: 100%; height: 100%; z-index: 9; left: 0; top: 0; background: rgba(0,0,0,.7);}
	nav.active { left:20px;}
	nav.hide { left: -250px;}
	
	.container { width:90%;}
	.content {}
	
}

@media screen and (max-width: 1000px) {

	#qi_bar {}
	ul#option li { margin-left:5px; }
	ul#option li a { font-size:12px;}
	ul#option li.social { display:inline-block !important; margin:0 10px 15px 10px;}
	ul#option li.p-m { display:inline-block;}
	ul#option li.p-pc { display:none;}
	a.logo { width: 100px; height: 21px; margin-top:12px; margin-left:0;}
	
	#bg1,#bg2,#bg3,#bg4{ background: none; height: auto;}
	.top-banner { background: url("../images/top-bg-m.png") no-repeat bottom center; padding-top:50px; height:400px; background-size:cover;}
	.top-banner img { width:300px;}
	.bigcate-title { margin:25px 0;}
	.bigcate-title img { width:200px;}
	.cate-title { margin: 20px auto;}
	.cate-title a { position: static; font-size:13px; padding:5px; width:90px;}
	.sec-title { font-size:18px; line-height: 22px; letter-spacing:0;}
	.sec-title2 { font-size:18px; line-height: 22px; letter-spacing:0;}
	
	.m-b-L { margin-bottom: 20px;}
	.m-t-L { margin-top: 20px;}
	.cate-title .forp2-pc { display: none;}
	.cate-title .forp2-m { display: block; margin: 30px auto;}
	
	/* 閱讀報告 */
	.chart {}
	.chart .imgs { text-align:center; width:20%;}
	.chart .txt { width:78%; padding:0; height:auto; font-size:18px; line-height:25px; border:none;}
	.chart .txt .counter,.chart .txt .white { font-size:22px;}
	.chart2 { width: 100%; overflow:hidden; clear:both; border:none;}
	.chart2 .sec-title2 { padding: 0 20px;}
	.chart2 .title {}
	.chart2 .title img{ width: 250px; height: 36px;}
	.chart2 .title .br { display: block;}
	.chart2 .title .br img { width: 124px; height: 36px;}
	
	/* 會員榜單 */
	.member-list { width:90%; max-width: 500px; margin: 0 auto; padding:30px 0;}
	.member-list .box { font-size:16px; line-height:30px;}
	.member-list .left { float: none; width:100%;}
	.member-list .right { float: none; width:100%;}
	
	.bgB { background: #91bdf2; padding-top:30px; margin-top:50px;}
	.tab-panels { padding-top: 0;}
	.tabUI2 .tabs li { display:inline-block;position:relative;}
	.tabUI2 .tabs li a{ width:80px; padding:5px 0; font-size:13px; line-height:20px; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
	
	.author-wrap .box:last-child { margin-bottom: 0;}
	
	/* TOP風雲榜 */
	.author-box { text-align: center; position: relative; padding: 20px;}
	.author-box .photo { padding: 3px;}
	.author-box .photo img { width:140px; height: 140px;}
	.author-box .info { text-align: left; display:block; margin:15px 0; width:100%;}
	.author-box .cover2 { position: absolute; top:90px; right:8%; padding: 3px;}
	.author-box .cover2 img,.vote-box .cover3 img { width:60px; height:79px; }
	.author-box .tag { text-align: center;}
	.author-box .tag span { font-size: 13px; margin-bottom: 3px;}
	.author-box h3 { margin-top: 20px;}
	.author-box .m-break { display: block;}
	.info h3 { font-size:22px; line-height:30px; text-align: center;}
	.info p { font-size: 16px; line-height:22px;}
	
	/* 投票感言 */
	.vote-box { margin:80px 8px; padding-top: 50px;}
	.vote-box .ti { position: absolute; width: 100%; text-align: center; top: -40px;}
	.vote-box .photo { display:block; margin: 0 auto; width: 140px; height:140px; border-right:none;}
	.vote-box .photo.p1 { background: url("../images/author/賣報小郎君.jpg") no-repeat center #fff; background-size: 140px 140px;}
	.vote-box .photo.p2 { background: url("../images/author/暗香.jpg") no-repeat center #fff; background-size: 140px 140px;}
	.vote-box .photo.p3 { background: url("../images/author/何處可桃.jpg") no-repeat center #fff; background-size: 140px 140px;}
	.vote-box .photo.p4 { background: url("../images/author/單單愛吃呀.jpg") no-repeat center #fff; background-size: 140px 140px;}
	.vote-box .info { display:block; vertical-align:middle; width:92%; padding:20px 4%;}
	.vote-box .cover3 { display: block; border: 1px solid #000; position: absolute; left:inherit; right: 8%; bottom:inherit; top: 90px;}

	.act-box { box-shadow: 0 0 0 1px #000, 0 0 0 3px #e58f44, 0 0 0 4px #000; width: 90%; padding:60px 4% 30px 4%; margin:60px 1% 20px 1%;}
	.btn-wrap { position: relative; width: 100%; height:101px; text-align: center;}
	.btn-go { width: 300px; height: 101px;}
	.btn-go:hover{transform: scale(1.1);}
	ol.act > li { counter-increment: item; margin-bottom: 15px; font-size:18px; line-height:22px;}
	ol.act > li:before { width:24px; line-height:24px; font-size: 16px;}

	/* 獎品 */
	.awards { margin-top:15px;}
	.awards div { display:inline-block; vertical-align:top; margin:5px;}
	.awards h4 { font-size:18px; line-height:20px; margin:10px 0 0 0;}
	.awards p { font-size:14px; color: #000;}

	/* 步驟 */
	.step-wrap {}
	.step-wrap .field { display:block; width:100%; margin: 20px 0; font-size:16px; line-height:22px; text-align: center;}
	.step-wrap .red { margin: 10px 0; font-size:20px;}

	/* 注意事項 */
	ol.note { padding-left: 20px;}
	ol.note li { font-size: 15px; margin-bottom: 15px;}
}

@media screen and (max-width: 640px) {
	
	.visual {}
	.idx-menu a { font-size:20px; width:130px; height:68px; line-height:68px; margin:3px;}
	.visual .dragon1 { position:absolute; right:-20px;; top:460px;}
	.visual .dragon2 { position:absolute; right:-150px; top:30px;}
	.sub-title { font-size:18px; line-height:20px;}
	.visual footer { bottom: -10px;}

	.break { display:inline;}
	
	.book-list .box { width:100px; height:260px; margin:0 5px; }
	.cover img { width:100px !important; height:147px !important;}
	.book-list .box h3 { font-size:16px; line-height:20px; font-family: 微軟正黑體, Microsoft JhengHei, sans-serif;}
	.book-list .box p { font-size:14px;}

	.tabset > label { padding:15px 0; font-size:25px;}

	#gotop{ right: 10px; bottom: 10px;}
	
}

@media screen and (max-width: 480px) {

	.top-banner { padding-top:80px; height:280px; background-size:cover;}
	.top-banner img { width: 250px;}
	footer { padding: 0 0 20px 0;}
	#gotop{ right: 10px; bottom: 10px; font-size: 25px; line-height: 30px; width: 30px;}
	
	nav a{ font-size:22px; width:150px; line-height:56px;}
	nav ul li:nth-child(1) a{ background: url("../images/btn1.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(2) a { background: url("../images/btn2.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(3) a { background: url("../images/btn3.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(4) a { background: url("../images/btn1.png") no-repeat center; background-size: 150px 56px;}
	nav ul li:nth-child(1) a:hover,nav ul li:nth-child(1) a.active { background: url("../images/btn1-h.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(2) a:hover,nav ul li:nth-child(2) a.active { background: url("../images/btn2-h.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(3) a:hover,nav ul li:nth-child(3) a.active { background: url("../images/btn3-h.png") no-repeat center; background-size:150px 56px;}
	nav ul li:nth-child(4) a:hover,nav ul li:nth-child(4) a.active { background: url("../images/btn1-h.png") no-repeat center; background-size:150px 56px;}
	
}