@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(../src/NotoSerifCJKtc-Medium.otf);
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  src: url(../src/NotoSerifCJKtc-SemiBold.otf);
}
/* 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:"Noto Sans TC", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#000; background:url("../images/bg.jpg");}
::selection { background:#11163a; color:#fff; }
::-moz-selection { background:#11163a; color:#fff;}
.yel { color:#e58f44 !important;}
.blue { color:#18596d !important;}
.red { color:#c33e1d !important;}
.green { color:#709b87;}
.gray { color:#556f63 !important;}
.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;font-family:"Noto Sans TC", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; }
.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;}
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:12px; color:#000; text-decoration:none; vertical-align:middle; }
ul#option li a:hover { text-decoration: underline;}
.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: 98%; margin: 0 auto; position: relative; padding: 20px 0;}
.visual .bg {}
.visual .title { position: absolute; top:32%; left: 50%; margin-left: -375px; z-index: 1;}
.idx-txt { text-align: center;}
.sub-title { position: absolute; width: 100%; bottom:32%; font-size: 25px; line-height: 35px; z-index: 1;}
.idx-menu { position: absolute; bottom:22%; z-index: 1; width: 100%;}
.idx-menu a { display:inline-block; vertical-align: middle; background: #18596d; border: 1px solid #000; padding: 10px 20px; margin: 10px;}
.idx-menu a:hover { background:#c33e1d;}
.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: 10px; left: 0;}
.visual #qi_bar { top:10px; left:13%; width:74%;}

/*----------nav*/
nav { width:220px; position: fixed; z-index:10; text-align: center; border: 1px solid #000; padding:5px; margin-top: 22px;}
nav.ins {/*-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;*/}
nav ul { padding: 50px 0; border: 1px solid #000;
	background: url("../images/nav-bg.png") top 10px center no-repeat, 
                url("../images/nav-bg.png") bottom 10px center no-repeat, 
                #18596d;}
nav ul li { display:inline-block;}
nav a{ display:block; width: 200px; line-height: 106px; background: url("../images/nav-btn.png") no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
nav a:hover { background: url("../images/nav-btn-a.png") no-repeat center;}
nav a.active { background: url("../images/nav-btn-a.png") no-repeat center;}

/*----------part1*/
.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 { float: right; width: 1024px;}
.top-banner {}
.top-banner-m { display: none;}

.bigcate-title1 { width: 100%; background:url("../images/p1-people.png") no-repeat center; height: 105px; margin: 40px auto; clear: both;}
.bigcate-title2 { width: 100%; background:url("../images/p1-book.png") no-repeat center; height: 105px; margin: 40px auto; clear: both;}
.sec-title { text-align: center; font-size: 22px; line-height: 28px; letter-spacing: 1px;font-family:"Noto Serif", "微軟正黑體", "Microsoft JhengHei" ,sans-serif;}
.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:100px; font-size:14px; padding:5px; width:90px; background:#18596d; color:#fff; border: 1px solid #000;}
.cate-title a:hover { background:#c33e1d;}
.cate-title .forp2-pc {}
.cate-title .forp2-m { display: none;}

/* 閱讀報告 */
.chart { overflow:hidden; clear:both; margin-bottom: 20px;}
.chart .left { float:left;}
.chart .right { float:right;}
.chart .imgs { text-align:center;}
.chart .txt { width:calc( 100% - 400px ); padding: 30px 0 0 100px; height:185px; font-size:30px; line-height:45px; border: 1px solid #000;font-family:"Noto Serif", "微軟正黑體", "Microsoft JhengHei" ,sans-serif;}
.chart .txt .red { font-size:38px;}

/* 會員榜單 */
.chart2 { overflow:hidden; clear:both; border: 1px solid #000;}
.chart2 .title { text-align: center; background: #18596d; padding:5px 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: #c33e1d; border-radius: 100%; color: white; 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%;}

/* 年度暢銷作品 */
.tabset { text-align: center; border: 1px solid #000;}
.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: 10px 0; cursor: pointer; text-align:center; background:#709b87; position: relative; z-index: 1; border-bottom: 1px solid #000;}
.tabset #tab1-1 + label, .tabset #tab2-1 + label,.tabset #tab3-1 + label,.tabset #tab4-1 + label { border-right: 1px solid #000;}
.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: #dfded2; border-bottom:1px solid #dfded2;}
.tab-panels { clear: both; padding-top:20px; background:#dfded2;}
.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 #c33e1d;}
.book-list .box h3 { color:#000; font-size:18px; line-height:22px; margin:8px 0; font-weight: normal;}
.book-list .box p { color:#c33e1d; font-size:15px; line-height: 16px;}
.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; background: #18596d; border: 1px solid #000; padding: 5px; vertical-align:middle; border-radius: 50%;}
.author-box .photo img { display: block; width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%;}
.author-box .info { display: inline-block; margin: 0 2%; width:56%; vertical-align:middle;}
.author-box .cover2 { display: inline-block; background: #e4c04d; border: 1px solid #000; padding: 5px; vertical-align:middle;}
.author-box .cover2 img { width:100px; height:133px; border: 1px solid #000;}
.author-box .cover2:hover { background: #c33e1d;}
.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;}
.info h3 { font-size:35px; line-height: 40px; font-family:"Noto Serif", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; margin-bottom: 20px;}
.info p { color: #000; font-size: 17px; line-height:24px;}
.info p:before { display: inline; content: "❝ "; color:#709b87; font-size: 20px;}
.info p:after { display: inline; content: " ❞"; color:#709b87; font-size: 20px;}
.line { width: 100%; height: 50px; background: url("../images/line.png") repeat-x center;}

/* 投票感言 */
.vote-box { box-shadow: 0 0 0 1px #000, 0 0 0 5px #e58f44, 0 0 0 6px #000; position: relative; margin:80px 8px;}
.vote-box .ti { position: absolute; width: 100%; text-align: center; top: -50px;}
.vote-box .photo { display: inline-block; vertical-align:middle; width: 26%; height: 400px; border-right: 1px solid #000;}
.vote-box .photo.p1 { background: url("../images/author/vote1.jpg") no-repeat center #fff;}
.vote-box .photo.p2 { background: url("../images/author/vote2.jpg") no-repeat center #fff;}
.vote-box .photo.p3 { background: url("../images/author/vote3.jpg") no-repeat center #fff;}
.vote-box .photo.p4 { background: url("../images/author/vote4.jpg") no-repeat center #fff;}
.vote-box .info { display: inline-block; vertical-align:middle; width:62%; padding:40px 3% 40px 8%;}
.vote-box .cover3 { display: block; border: 1px solid #000; position: absolute; left:21%; bottom: 20px;}
.vote-box .cover3 img { width:100px; height:133px;}
.vote-box .cover3:hover { box-shadow:0 0 0 2px #e58f44;}

/*----------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;}

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


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

@media screen and (max-width: 1600px) {
	
	/* top visual*/
	.visual .title { width: 600px; margin-left: -300px;}
	.sub-title { font-size: 22px; line-height: 32px;}
	.idx-menu { bottom: 20%;}
	.idx-menu a { padding: 10px; margin:5px;}
	.visual #qi_bar { left:10%; width:80%;}

}

@media screen and (max-width: 1300px) {
	
	.sub-title { bottom:28%;}
	.idx-menu { bottom:15%;}
	
	.container { width:90%;}
	.content {  width:75%;}
	.chart .txt { width:calc( 100% - 350px ); padding: 30px 0 0 50px; height:185px; font-size:25px; line-height:30px;}
	.chart .txt .red { 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;}
	.line { width: 100%; height: 50px; background: url("../images/line.png") repeat-x center;}
	
}

@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 .bg-m { display:block; padding-top: 30px;}
	.visual .bg { display: none;}
	.visual .title { display: none;}
	.sub-title { display: none;}
	.idx-menu { bottom:15%;}
	.idx-menu a { display: block; width: 250px; padding:20px 0; text-align: center; margin: 0 auto 20px auto;}
	.visual #qi_bar { top:0; left:5%; width:90%;}
	
	/*nav*/
	nav,.visual nav { float: none; position: fixed; left: -250px; z-index: 10; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
	.mask { position: fixed; width: 100%; height: 100%; z-index: 9; background: rgba(0,0,0,.7);}
	nav.active { left:20px;}
	nav.hide { left: -250px;}
	
	.container { width:90%;}
	.content { float: none; width:100%;}
	
	.tiger { position: absolute; right:0; top: -100px;}
	.tiger img{ width: 150px; height: 104px;}
	
}

@media screen and (max-width: 900px) {
	
	.idx-menu a { width: 220px; padding:15px 0; margin: 0 auto 15px auto;}

	#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;}
	a.logo { width: 100px; height: 21px; margin-top:12px; margin-left:0;}

	.top-banner { display: none;}
	.top-banner-m { display: block;}
	.cate-title { margin: 20px auto;}
	.cate-title a { position: static; font-size:13px; padding:5px; width:90px;}
	.sec-title { font-size:15px; line-height: 22px; letter-spacing: 1px;}
	.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 { width: 100%; max-width:500px; overflow:hidden; clear:both; margin: 0 auto 20px auto; border-bottom: 1px solid #000; padding-bottom: 20px;}
	.chart .left { float:left;}
	.chart .right { float:right;}
	.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 .red { font-size:22px;}
	.chart2 { width: 100%; overflow:hidden; clear:both; border:none;}
	.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%;}
	
	.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;}
	
	.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;}
	.line { width: 100%; height: 50px; background: url("../images/line.png") repeat-x center;}
	
	/* 投票感言 */
	.vote-box { box-shadow: 0 0 0 1px #000, 0 0 0 3px #e58f44, 0 0 0 4px #000; position: relative; 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; box-shadow: 0 0 0 1px #000, 0 0 0 4px #e58f44, 0 0 0 5px #000; border-radius: 50%;}
	.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: 700px) {
	
	.idx-menu { bottom:12%;}

}
@media screen and (max-width: 640px) {
	
	.visual footer { bottom: -20px;}
	.idx-menu { bottom:12%;}
	.idx-menu a { width: 180px; padding:10px 0; margin: 0 auto 10px auto;}
	.idx-menu a img { width: 150px; height: 34px;}

	.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;}
	.book-list .box p { font-size:14px;}

	.tabset > label img { width: 100px;}
	
	.bigcate-title3 { background: url("../images/p3-title-m.png") no-repeat center; height:36px; margin: 30px 0 0 0; background-size: 300px 36px;}
	
	#gotop{ right: 10px; bottom: 10px;}
	
}

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

	.idx-menu { bottom:10%;}
	.idx-menu a { width: 120px; padding:5px 0; margin: 0 auto 10px auto;}
	.idx-menu a img { width: 120px; height: 27px;}
	
	nav { top:10%; padding:5px; margin-top: 22px;}
	nav.active { left: 20px;}
	nav ul { padding:30px 0; border: 1px solid #000;
		background: url("../images/nav-bg.png") top 5px center no-repeat, 
					url("../images/nav-bg.png") bottom 5px center no-repeat, 
					#18596d;}
	nav ul li { display:inline-block;}
	nav a{ display:block; width:150px; line-height:70px; background: url("../images/nav-btn.png") no-repeat center; background-size: 150px 70px;}
	nav a img { width: 110px; height: 25px;}
	nav a:hover { background: url("../images/nav-btn-a.png") no-repeat center; background-size: 150px 70px;}
	nav a.active { background: url("../images/nav-btn-a.png") no-repeat center; background-size: 150px 70px;}
	
	footer { padding: 0 0 20px 0;}
	
	#gotop{ right: 10px; bottom: 10px; font-size: 25px; line-height: 30px; width: 30px;}
}

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

	nav { top:0; padding:5px; margin-top:0;}
	nav.active { left: 20px;}
	nav ul { padding:10px 0; border: 1px solid #000;
		background:#18596d;}
	nav ul li { display:inline-block;}
	nav a{ display:block; width:150px; line-height:60px; background: url("../images/nav-btn.png") no-repeat center; background-size: 150px 60px;}
	nav a img { width: 110px; height: 25px;}
	nav a:hover { background: url("../images/nav-btn-a.png") no-repeat center; background-size: 150px 60px;}
	nav a.active { background: url("../images/nav-btn-a.png") no-repeat center; background-size: 150px 60px;}
	
}