@charset "utf-8";

/* 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*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(../font/NotoSerifCJKtc-Medium.otf);
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  src: url(../font/NotoSerifCJKtc-SemiBold.otf);
}
img,a{border:0; outline:0;}
a{ text-decoration:none;}
body { font-family:"Noto Sans TC", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#000;}
::selection { background:#11163a; color:#fff; }
::-moz-selection { background:#11163a; color:#fff;}
.yel { color:#f3bb26 !important;}
.blue { color:#11163a !important;}
.red { color:#b40400 !important;}
.green { color:#075145;}
.gray { color:#888 !important;}
.txt-s { font-size:14px; line-height:20px;}
.txt-h { text-decoration:underline; font-weight:bold; color:#000;}
.txt-b { font-weight:bold;}
.txt-center { text-align:center;}
.txt-right { text-align: right;}
a.ora{ color:f97a28; 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;}

/* loading */
#load{ width:100%; height:100%; position:fixed; z-index:9999; background:url(../images/loading.gif) no-repeat center center rgba(255,255,255,.9);}

/*mini head*/
#qi_bar { width:96%; position:absolute; top:0; left:2%; overflow:hidden; z-index:8;}
.logo a { display:block; float:left; margin-top:12px; margin-left:10px;}
ul#option { float:right; margin-top:20px; margin-right:10px; font-size:12px; line-height:15px; }
ul#option li { display:block; float:left; font-size:14px; margin-left:15px; vertical-align:middle; }
ul#option li a { color:#fff; text-decoration:none; vertical-align:middle; }
ul#option li a:hover { text-decoration: underline;}
.btn-menu{ display:none;}
.mask { display: none;}

/*---------- top visual*/
.visual { width: 100%; height: 100vh; background:url("../images/idx-bg.png") no-repeat bottom center; background-size: cover;}
.visual .inner { position:relative; height:100vh;}
.visual .lant1 { position:absolute; left:0; top:0; width:90px; height:245px; background:url("../images/idx-lantern1.png") no-repeat center; z-index:3; -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; -webkit-animation: lantsway1 10s ease-in-out forwards infinite; animation: lantsway1 10s ease-in-out forwards infinite;}
.visual .lant2 { position:absolute; left:150px; top:0; width:90px; height:172px; background:url(../images/idx-lantern2.png) no-repeat center; z-index:2; -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; -webkit-animation: lantsway2 7s ease-in-out forwards infinite; animation: lantsway2 7s ease-in-out forwards infinite;}
.visual .lant3 { position:absolute; right:240px; top:0; width:90px; height:245px; background:url(../images/idx-lantern1.png) no-repeat center; z-index:2; -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; -webkit-animation: lantsway1 8s ease-in-out forwards infinite; animation: lantsway1 8s ease-in-out forwards infinite;}
.visual .lant4 { position:absolute; right:120px; top:0; width:90px; height:172px; background:url(../images/idx-lantern2.png) no-repeat center; z-index:3; -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; -webkit-animation: lantsway2 7s ease-in-out forwards infinite; animation: lantsway2 7s ease-in-out forwards infinite;}
.visual .lant5 { position:absolute; right:0; top:0; width:90px; height:245px; background:url(../images/idx-lantern1.png) no-repeat center; z-index:3; -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; -webkit-animation: lantsway1 5s ease-in-out forwards infinite; animation: lantsway1 5s ease-in-out forwards infinite;}
.idx-txt { position: absolute; left: 250px; top: 200px; animation: titleshow ease-in-out 1s both; -webkit-animation: titleshow ease-in-out 1s both; -moz-animation: titleshow ease-in-out 1s both; -o-animation: titleshow ease-in-out 1s both; -ms-animation: titleshow ease-in-out 1s both;animation-delay: 1s; z-index: 4;}
.big-title {}
.sub-title { color: #fff; font-size: 25px; margin-top: 20px; font-family:"Noto Serif", 微軟正黑體 ,sans-serif;text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;}
#animation_container { position: absolute; right: -100px; bottom: 50px; z-index: 5;}
#animation_container,#animation_container #canvas { width: 550px; height: 420px;}
.idx-menu { display: none;}

@keyframes lantsway1 {
     0%{-webkit-transform: rotate(-10deg);}
    50%{-webkit-transform: rotate(5deg)}
    100%{-webkit-transform: rotate(-10deg);}
}
@keyframes lantsway2 {
     0%{-webkit-transform: rotate(10deg);}
    50%{-webkit-transform: rotate(-5deg)}
    100%{-webkit-transform: rotate(10deg);}
}
@-webkit-keyframes lantsway1 {
     0%{-webkit-transform: rotate(-10deg);}
    50%{-webkit-transform: rotate(5deg)}
    100%{-webkit-transform: rotate(-10deg);}
}
@-webkit-keyframes lantsway2 {
     0%{-webkit-transform: rotate(10deg);}
    50%{-webkit-transform: rotate(-5deg)}
    100%{-webkit-transform: rotate(10deg);}
}
@keyframes titleshow {
     0%{ opacity: 0; left: 190px;}
    100%{ opacity: 1; left: 250px;}
}
@-webkit-keyframes titleshow {
	 0%{ opacity: 0; left: 190px;}
    100%{ opacity: 1; left: 250px;}
}

/*----------nav*/
nav { width:220px; height: 280px; position:fixed; top: 35%; left: 1%; z-index:10; font-family:"Noto Serif", 微軟正黑體 ,sans-serif; background:url("../images/nav-bg.png") no-repeat center; text-align: center; padding-top: 70px;}
nav.ins {/*-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;*/}
.nav-wrap { }
nav ul li { display: block; margin-bottom: 5px;}
nav a{ display:inline-block; border-radius: 20px; padding: 3px 9px; font-size:22px; font-weight:bold; color:#fff;}
nav a.active,nav a:hover { color:#c1272d; background: #f8c45e;}
.visual nav { position: absolute; top:250px; left: 0;}
.visual nav a { padding: 5px 9px; }
nav.con {}
.foridx {}

/* TOP */
#gotop{ display: block; position: fixed; right: 15px; bottom: 15px; border-radius: 50%; z-index:8; background: #fff; color: #ef9f29; font-size: 30px; line-height: 40px; width: 40px; text-align: center;-webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; opacity: 0.5;}
#gotop:hover{ opacity: 1;}

/*----------Footer*/
footer { width:100%; margin:0 auto; text-align:center; color:#fff; font-size:12px;}
.visual footer { position: absolute; bottom: 10px;}

/*----------part1*/
.container { width: 100%;}
.container footer { color: #99540e; padding-bottom: 50px;}
.content { width:90%; max-width:1100px; margin:0 auto;}
.top-visual { background: url("../images/bg-top.png") no-repeat top center #389389; height: 300px;}
.top-visual img { padding-left: 200px; padding-top: 40px;}
.bg1-1 { background:url("../images/bg-part1-1.png") repeat-y top center #389389; padding-bottom: 10px;}
.bg1-2 { background:url("../images/bg-part1-2.png") no-repeat top center #ef9f29; padding-top: 250px;}
.cate-title { text-align: center; padding: 20px 0; position: relative;}
.cate-title a { position:absolute; right:0; top:20px; font-size:16px; padding:5px; width:100px; background: #fdbe79; color:#075145;}
.cate-title a:hover { background:#fff;}
.sec-title { text-align: center; font-weight: bold; font-size: 20px; line-height: 25px; margin-bottom: 20px;}

/* 閱讀報告 */
.chart { width:640px; overflow:hidden; clear:both; margin:20px auto 40px auto; padding: 50px 80px; background: url("../images/part1-frame1.png") no-repeat center;}
.chart .left { float:left;}
.chart .right { float:right;}
.chart .imgs { width:32%; text-align:center;}
.chart .txt { width:65%; font-size:28px; line-height:45px; font-family:"Noto Serif", 微軟正黑體 ,sans-serif; font-weight: bold;}
.chart .txt .red { font-size:35px;}

/* 會員榜單 */
.chart2 { width:640px; overflow:hidden; clear:both; margin:20px auto 0 auto; padding: 50px 80px; background: url("../images/part1-frame2.png") no-repeat center;}
.red-title { font-size: 35px; text-align: center; font-weight: bold; color:#b40400; font-family:"Noto Serif";}
.member-list { width:100%; max-width:490px; margin:20px auto; }
.member-list ol { list-style: none; counter-reset: item;}
.member-list ol > li{ counter-increment: item; margin-bottom: 5px; font-size:18px; line-height:30px;}
.member-list ol > li:before { margin-right: 5px; content: counter(item); background: #b40400; border-radius: 100%; color: white; width: 24px; line-height:24px; text-align: center; display: inline-block;}

/* 年度暢銷作品 */
.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:inline-block; width: 210px; height: 100px; cursor: pointer; font-weight:bold; color:#c57206; font-size:30px; padding-top: 20px; text-align:center; background: url("../images/tab-b.png") no-repeat center; position: relative; z-index: 1;}
.tabset #tab1-1 + label,.tabset #tab2-1 + label,.tabset #tab3-1 + label {}
.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 { color: #ffcd6c; background: url("../images/tab-a.png") no-repeat center;}
.tab-panels { background: url("../images/part1-frame3.png") no-repeat center; background-size: 100% 100%; padding: 100px 80px 60px 80px; position: relative; top: -60px;}
.tab-panel { }
.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; margin:0 4px; position:relative;}
.tabUI2 .tabs li a{ display:block; width:100px; padding:10px 0; border:1px solid #000; font-size:16px; line-height:24px; color:#000;}
.tabUI2 .tabs li.active a{ background:#000; color:#f3bb26; border:1px solid #000;}
.tabUI2 .tabs li.tab-active a{ background:#000; color:#f3bb26; 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:#f9c174; font-size:13px; border-radius:13px; line-height:26px; text-align:center; background:#085245;}
.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 #075145;}
.book-list .box h3 { color:#000; font-size:18px; line-height:22px; margin:8px 0; font-weight:normal; font-weight: bold;}
.book-list .box p { color:#b40400; 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*/
.tab-panels.nobg { background:none; padding: 100px 0 0 0; position: relative; top: -60px;}

/* 暢銷榜感言 */
.author-wrap { text-align: left; width: 100%; max-width: 800px; margin: 0 auto;}
.author-wrap .box{ padding: 30px; margin-bottom:60px;background:#f8c173; border: 2px solid #389389; box-shadow: 0 0 0 10px #f8c173,20px 20px 20px 0 rgba(0,0,0,.5); min-height: 250px; position: relative;}
.author-wrap .box .imgs { text-align:center; position: relative;}
.author-wrap .box .photo { background: #ffe65e;
	background: -moz-linear-gradient(-45deg,  #ffe65e 0%, #d36302 100%);
	background: -webkit-linear-gradient(-45deg,  #ffe65e 0%,#d36302 100%);
	background: linear-gradient(135deg,  #ffe65e 0%,#d36302 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe65e', endColorstr='#d36302',GradientType=1 );
	width: 220px; height: 220px; border-radius: 50%; padding: 5px;}
.author-wrap .box .photo img { border-radius:50%; width:220px; height:220px;}
.author-wrap .box .book { position: absolute; left: 0; bottom:0;}
.author-wrap .box .book img { width: 64px; height: 85px; box-shadow:0 0 8px 0 rgba(0,0,0,.4);}
.author-wrap .box .rank { font-size:15px; color:#fff; display:inline-block; padding:5px 8px 5px 0; background: #ef5225; margin:0 5px 5px 0;}
.author-wrap .bname h3{ font-size:32px; line-height:40px; margin-bottom:20px; font-family:"Noto Serif", 微軟正黑體 ,sans-serif;}
.author-wrap .txt { margin-top: 10px;}
.author-wrap .txt p { font-size:16px; line-height:25px; color:#000; font-weight:normal; margin-bottom:10px;}
.author-wrap .txt p:before { display: inline; content: "❝ "; color:#b40400;}
.author-wrap .txt p:after { display: inline; content: " ❞"; color:#b40400;}
.author-wrap .intro { margin-bottom:15px;}
.author-wrap .intro p{ font-size:14px; line-height:20px; font-weight:normal; color:#555;}
.author-wrap .box.le { margin-right: 30px;}
.author-wrap .box.le .imgs { position: absolute; left: -80px; top: 30px;}
.author-wrap .box.le .info { width:75%; padding-left: 22%;}
.author-wrap .box.ri { margin-left: 30px;}
.author-wrap .box.ri .imgs{ position: absolute; right: -100px; top: 30px;}
.author-wrap .box.ri .info { width:75%; padding-right: 20%; padding-left: 5%;}

/* 投票感言 */
.vote { text-align: center;}
.vote .box{ display: inline-block; vertical-align: top; width: 39%; margin: 150px 2% 50px 2%; background:#f8c173; border: 2px solid #ef9f29; box-shadow: 0 0 0 10px #f8c173,20px 20px 20px 0 rgba(0,0,0,.5); height: 420px; position: relative;}
.vote .box .imgs-wrap {text-align:center; position:absolute; width: 230px; left: 50%; margin-left: -100px; top: -150px;}
.vote .box .imgs { position: relative; }
.vote .box .photo { background: #ffe65e;
	background: -moz-linear-gradient(-45deg,  #ffe65e 0%, #d36302 100%);
	background: -webkit-linear-gradient(-45deg,  #ffe65e 0%,#d36302 100%);
	background: linear-gradient(135deg,  #ffe65e 0%,#d36302 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe65e', endColorstr='#d36302',GradientType=1 );
	width: 220px; height: 220px; border-radius: 50%; padding: 5px;}
.vote .box .photo img { border-radius:50%; width:220px; height:220px;}
.vote .box .book { position: absolute; right: 0; bottom:0;}
.vote .box .book img { width: 64px; height: 85px; box-shadow:0 0 8px 0 rgba(0,0,0,.4);}
.vote .box h3{ font-size:30px; line-height:40px; margin-bottom:20px; font-family:"Noto Serif", 微軟正黑體 ,sans-serif;}
.vote .box .txt { padding: 120px 20px 30px 20px;}
.vote .box .txt p { font-size:16px; line-height:25px; color:#000; text-align: left;}
.vote .box:nth-child(3) .txt p { font-size:15px; line-height:20px;}
.vote .box .txt p:before { display: inline; content: "❝ "; color:#b40400;}
.vote .box .txt p:after { display: inline; content: " ❞"; color:#b40400;}
.vote .tag { position: absolute; left: -50px; top: -50px;}


/*----------part3*/
.bg3 { background:url("../images/bg-part3.png") no-repeat bottom center #389389; padding-top: 50px;}
.part3-title { text-align: center; color: #fff; font-size: 22px; line-height: 40px; font-weight: bold; padding-bottom: 30px;}
.act-box { clear:both; max-width:990px; margin:50px auto; background: #ffe65e; padding: 8px; box-shadow:15px 15px 10px 0 rgba(0,0,0,.4);
	background: -moz-linear-gradient(-45deg,  #ffe65e 0%, #d36302 100%);
	background: -webkit-linear-gradient(-45deg,  #ffe65e 0%,#d36302 100%);
	background: linear-gradient(135deg,  #ffe65e 0%,#d36302 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe65e', endColorstr='#d36302',GradientType=1 );
}
.act-inn { padding:60px 80px; background:#fff; position: relative;}
.act-title { text-align:center; position:absolute; width: 100%; left: 0; top: -40px;}
.btn-go-wrap { clear:both; margin:20px auto 100px auto; text-align:center; width:250px; background: #ffe65e; padding: 3px; box-shadow:8px 8px 10px 0 rgba(0,0,0,.4);
	background: -moz-linear-gradient(-45deg,  #ffe65e 0%, #d36302 100%);
	background: -webkit-linear-gradient(-45deg,  #ffe65e 0%,#d36302 100%);
	background: linear-gradient(135deg,  #ffe65e 0%,#d36302 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe65e', endColorstr='#d36302',GradientType=1 );}
.btn-go { display:block;color: #ffcd20; font-size: 25px; background: #075145; padding:20px 0; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.btn-go:hover{ background:#ffcd20; color:#000;}
ol.act { list-style: none; counter-reset: item;}
ol.act > li { counter-increment: item; margin-bottom: 15px; font-size:18px; line-height:30px;}
ol.act > li:before { margin-right: 5px; content: counter(item); background: #b40400; border-radius: 100%; color: white; width: 24px; line-height:24px; text-align: center; display: inline-block;}

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

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

/* 注意事項 */
.note-box { max-width: 900px; margin: 100px auto; border: 1px solid #fff; position: relative; padding:50px 50px 30px 50px;}
.note-title { position: absolute; left: 50%; top: -25px; margin-left: -90px; width: 180px; background: #389389; color: #ffc845; font-size: 30px; font-family:"Noto Serif", 微軟正黑體 ,sans-serif; text-align: center;}
ol.note { padding-left: 20px;}
ol.note li { list-style: decimal; color: #fff; font-size: 18px; margin-bottom: 15px;}
ol.note li a { color: #fff; text-decoration: underline; font-weight: bold;}

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

@media screen and (max-width: 1400px) {
	
	img {max-width:100%!important; height: auto !important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
	.visual nav { top:200px; left: 0;}
	.visual { background:url("../images/idx-bg.png") no-repeat top center; background-size: cover;}
	#animation_container { right: -50px; bottom: 0; }
	#animation_container,#animation_container #canvas,#dom_overlay_container { width: 480px !important; height: 367px !important;}
	.idx-txt { width: 550px; height: 344px; left: 300px; top: 150px;}
	.sub-title { margin-top: 0;}
	
	.content { width:90%; max-width:1100px; padding-left: 10%;}
}

@media screen and (max-width: 1024px) {
	
	#animation_container { right: -50px; bottom: 0; }
	#animation_container,#animation_container #canvas,#dom_overlay_container { width: 350px !important; height: 268px !important;}
	.idx-txt { width: 500px; height: 313px;}
	.sub-title { font-size: 22px;}
	
	nav { left: 0; width:180px; height: 236px;padding-top: 50px; background-size: 180px 286px;}
	nav ul li { display: block; margin-bottom: 5px;}
	nav a{ padding: 3px 5px; font-size:18px;}
	
	/* 內頁 */
	.top-visual img { padding-left: 150px;}
	.content { width:90%; max-width:1100px; padding-left: 5%;}
	
	.chart { width:600px;}
	.chart2 { width:600px;}
	
	/* 暢銷榜感言 */
	.author-wrap { width: 90%; max-width: 700px;}
	.author-wrap .box{ padding: 20px; }
	.author-wrap .box .photo { width: 150px; height: 150px; padding: 5px;}
	.author-wrap .box .photo img { width:150px; height:150px;}
	.author-wrap .box .book { left: -10px; bottom:-10px;}
	.author-wrap .box .book img { width: 50px; height: 66px;}
	.author-wrap .box .rank { font-size:13px; padding:5px; background: #ef5225; margin:0 5px 5px 0;}
	.author-wrap .bname h3{ font-size:25px; line-height:30px; margin-bottom: 10px;}
	.author-wrap .txt p { font-size:14px; line-height:22px;}
	.author-wrap .box.le { margin-right: 30px;}
	.author-wrap .box.le .imgs { position: absolute; left: -30px; top: 30px;}
	.author-wrap .box.le .info { width:75%; padding-left: 20%;}
	.author-wrap .box.ri { margin-left: 30px;}
	.author-wrap .box.ri .imgs{ position: absolute; right: -30px; top: 30px;}
	.author-wrap .box.ri .info { width:70%; padding-right: 20%; padding-left: 5%;}
	
	/* 投票感言 */
	.vote .box{ display: inline-block; vertical-align: top; width: 39%; margin: 100px 2% 50px 2%; height: 400px; }
	.vote .box .imgs-wrap {width: 160px; margin-left: -70px; top: -80px;}
	.vote .box .photo {	width: 150px; height: 150px; }
	.vote .box .photo img { width:150px; height:150px;}
	.vote .box .book img { width: 50px; height: 66px; }
	.vote .box h3{ font-size:25px; line-height:30px; margin-bottom:10px; }
	.vote .box .txt { padding: 120px 20px 30px 20px;}
	.vote .box .txt p { font-size:15px; line-height:22px;}
	.vote .tag { position: absolute; left: -70px; top: -70px;}
	
}

@media screen and (max-width: 812px) {
	
	.btn-menu { display:block; width:40px; height:40px; position:fixed; top:140px; 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;}*/
	#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;}
	.logo a { width: 100px; height: 21px; margin-top:12px; margin-left:0;}
	
	/*nav*/
	nav,.visual nav { 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: 0;}
	nav.hide { left: -250px;}
	
	.visual { background: url("../images/title-mobile.jpg") no-repeat right center; background-size: cover;}
	#animation_container,#animation_container #canvas,#dom_overlay_container { display: none !important;}
	.visual .inner {}
	.idx-txt { left: 0; top: 150px; }
	.idx-menu { display: block; margin-top: 20px;}
	.idx-menu a { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size:22px; font-weight:bold; color:#c1272d; background: #f8c45e;}
	
	footer { padding-bottom: 30px;}
	@keyframes titleshow {
		 0%{ opacity: 0; left: 0px;}
		100%{ opacity: 1; left: 100px;}
	}
	@-webkit-keyframes titleshow {
		 0%{ opacity: 0; left: 0px;}
		100%{ opacity: 1; left: 100px;}
	}
	
	.visual .lant1,.visual .lant2,.visual .lant5 { display: none!important;}
	.visual .lant3 { right:120px; top:0; width:50px; height:136px; background:url(../images/idx-lantern1.png) no-repeat center; background-size: contain;}
	.visual .lant4 { right:60px; top:0; width:50px; height:96px; background:url(../images/idx-lantern2.png) no-repeat center; background-size: contain;}
	
	/* 內頁 */
	.top-visual { background: url("../images/bg-top-m.png") no-repeat bottom center #389389; background-size: cover; height: 500px; text-align: center;}
	.top-visual img { padding-left:0;}
	.content { width:95%; padding-left: 0;}
	.bg1-1 { background:#389389; padding-bottom:0; }
	.bg1-2 { background:url("../images/bg-part1-2-m.jpg") no-repeat top center #ef9f29; background-size: contain;}
	.chart { width:90%; margin:40px auto; padding: 50px 4%; background:#f8c173; border: 3px solid #e39117; box-shadow: 0 0 0 10px #f8c173;}
	.chart .imgs { width:32%;}
	.chart .txt { width:65%; font-size:25px; line-height:40px;}
	.chart .txt .red { font-size:30px;}
	.chart2 { width:90%; margin:20px auto 0 auto; padding: 50px 5%; background:#f8c173; border: 3px solid #e39117; box-shadow: 0 0 0 10px #f8c173;}
	
	.tab-panels { background:#f8c173; border: 3px solid #e39117; box-shadow: 0 0 0 10px #f8c173; background-size:auto; padding:80px 30px 40px 30px; position: relative; top: -60px;}
	.tab-panels.nobg { background:none; border: 0; box-shadow:none; top: -60px;}
	.tabUI2 .tabs li { display:inline-block; margin:4px; position:relative;}
	.tabUI2 .tabs li a{ width:100px; padding:10px 0; font-size:14px; line-height:22px;}
	
	.author-wrap .box:last-child { margin-bottom: 0;}
	
	/*----------part3*/
	.bg3 { background: url("../images/bg-part3-m.jpg") no-repeat bottom center #389389; background-size: contain;}
	.act-inn { padding:50px 30px;}
}

@media screen and (max-width: 640px) {
	
	nav,.visual nav{ top: 100px; }
	.idx-txt { width: auto; height: auto; left: 0; top: 150px; }
	.idx-menu { display: block; margin-top: 20px;}
	.idx-menu a { display:block; width: 150px; padding: 5px 10px; margin-bottom: 5px; font-size:18px; text-align: center;}
	.sub-title { font-size: 18px; line-height: 22px;}
	@keyframes titleshow {
		 0%{ opacity: 0; }
		100%{ opacity: 1;}
	}
	@-webkit-keyframes titleshow {
		 0%{ opacity: 0;}
		100%{ opacity: 1;}
	}
	
	/* 內頁 */
	.top-visual { height: 400px;}
	.top-visual img { padding-left: 0; padding-top: 40px;}
	.sec-title { font-size: 16px; line-height: 22px;}
	.cate-title a { display: block; position:static; margin: 10px auto;}
	.cate-title a:hover { background:#fff;}
	
	.chart .left { float:none;}
	.chart .right { float:none;}
	.chart .imgs { width:50%; margin: 0 auto 20px auto;}
	.chart .txt { width:100%; font-size:20px; line-height:30px; text-align: center;}
	.chart .txt .red { font-size:25px;}

	.tabset > label { width: 150px; height: 71px; font-size:20px; padding-top: 12px; background: url("../images/tab-b.png") no-repeat center; background-size: 150px 71px;}
	.tabset > input:checked + label {background: url("../images/tab-a.png") no-repeat center; background-size: 150px 71px;}
	.tab-panels { padding:60px 20px 30px 20px; top: -40px;}
	.tabUI2 .tabs li { margin:2px;}
	.tabUI2 .tabs li a{ width:80px; padding:10px 0; font-size:13px; line-height:20px;}
	
	.bg1-2 { padding-top: 150px;}
	
	.member-list ol > li{ font-size:12px; line-height:25px;}
	.member-list ol > li:before { width: 24px; line-height:24px; margin-right: 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;}
	.book-list .box p { font-size:14px;}

	
	/* 暢銷榜感言 */
	.author-wrap {}
	.author-wrap .box{ padding: 20px; }
	.author-wrap .box .photo { width: 100px; height: 100px; padding: 3px;}
	.author-wrap .box .photo img { width:100px; height:100px;}
	.author-wrap .box .book { left:0; bottom:-40px;}
	.author-wrap .bname h3{ font-size:22px; line-height:28px;}
	.author-wrap .box.le { margin-right: 20px;}
	.author-wrap .box.le .imgs { position: absolute; left: -30px; top: 30px;}
	.author-wrap .box.le .info { width:85%; padding-left: 15%;}
	.author-wrap .box.ri { margin-left: 20px;}
	.author-wrap .box.ri .imgs{ position: absolute; right: -30px; top: 30px;}
	.author-wrap .box.ri .info { width:80%; padding-right: 20%; padding-left:0;}
	
	/* 投票感言 */
	.vote .box{ display:block; width: 90%; margin: 100px 4% 50px 4%; height: auto; }
	.vote .box .imgs-wrap { width: 160px; margin-left: -70px; top: -80px;}
	.vote .box h3{ font-size:22px; line-height:28px; }
	.vote .box .txt { padding: 120px 20px 30px 20px;}
	.vote .box .txt p { font-size:15px; line-height:22px;}
	.vote .tag { position: absolute; left: -30px; top: -70px;}
	
}

@media screen and (max-width: 480px) {
	.top-visual { height: 350px;}
	.bigcate-title { width: 30%; margin: 0 auto;}
	.red-title { font-size: 25px; line-height: 30px;}
	
	/* 暢銷榜感言 */
	.author-wrap { width: 95%;}
	.author-wrap .box{ padding: 15px; box-shadow:0 0 0 5px #f8c173, 20px 20px 20px 0 rgba(0,0,0,.5); margin-bottom: 40px; min-height: 150px;}
	.author-wrap .box .photo { width: 100px; height: 100px; padding: 3px;}
	.author-wrap .box .photo img { width:100px; height:100px;}
	.author-wrap .box .book { left:25px; bottom:-50px;}
	.author-wrap .bname h3{ font-size:20px; line-height:25px;}
	.author-wrap .box.le { margin-right: 0;}
	.author-wrap .box.le .imgs { left: -20px; top: 10px;}
	.author-wrap .box.le .info { width:80%; padding-left: 20%;}
	.author-wrap .box.ri { margin-left:0;}
	.author-wrap .box.ri .imgs{ right: -20px; top: 10px;}
	.author-wrap .box.ri .info { width:80%; padding-right: 20%; padding-left:0;}
	
	/* part3 */
	.bg3 { padding-top: 40px;}
	.part3-title { font-size: 17px; line-height: 30px; padding-bottom: 20px;}
	.act-box { margin:40px auto; padding: 5px;}
	.act-inn { padding:50px 20px;}
	.act-title { top: -20px;}
	.act-title img { width: 150px; height: 42px;}
	ol.act > li {font-size:16px; line-height:25px;}
	.btn-go-wrap { clear:both; margin:20px auto 100px auto; text-align:center; width:180px; background: #ffe65e; padding: 3px; box-shadow:8px 8px 15px 0 rgba(0,0,0,.4);}
	.btn-go { font-size: 20px; padding:15px 0;}

	/* 獎品 */
	.awards { text-align:center; margin:10px 0;}
	.awards div { margin:5px 0; width:140px;}
	.awards h4 { font-size:15px; line-height:18px; margin:10px 0 0 0;}
	
	/* 抽獎步驟 */
	.step-wrap { text-align: center;}
	.step-wrap .field { display:block; width: 100%; margin: 10px 0;}
	.step-wrap .red { margin: 10px 0; font-size: 18px;}

	/* 注意事項 */
	.note-box { margin: 50px auto; padding:30px 20px 10px 20px;}
	.note-title { top: -25px; margin-left: -75px; width: 150px; font-size: 25px; }
	ol.note { padding-left: 20px;}
	ol.note li { list-style: decimal; color: #fff; font-size: 15px; margin-bottom: 10px;}
	
	#gotop{ right: 10px; bottom: 10px; font-size: 25px; line-height: 30px; width: 30px;}
	
}

@media screen and (max-width: 380px) {
	
	.idx-txt { top: 100px; }
	.idx-menu a { padding: 5px;font-size:18px; width: 120px;}
	
	.top-visual { height: 280px;}
	.top-visual img { padding-top: 50px;}


}

@media screen and (max-width: 350px) {
	.top-visual { height: 300px;}
	.top-visual img { padding-top: 80px;}
}


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

	.visual { background: url("../images/title-mobile2.jpg") no-repeat bottom center; background-size: cover; min-height: 100%;}
	.visual .inner { width: 100%;min-height: 100%;}
	.idx-txt { width: 100%; left: 50px; top: 40px;}
	.idx-txt img{ width: 250px; height: 156px;}
	.sub-title { font-size: 18px;}
	.idx-menu {margin-top: 10px;}
	.idx-menu a { padding: 5px 10px; border-radius: 20px; font-size:18px; }
	nav,.visual nav{ top: 10px; }
	nav.active { left: 20px;}
	@keyframes titleshow {
		 0%{ opacity: 0; left: 0px;}
		100%{opacity: 1;left: 50px;}
	}
	@-webkit-keyframes titleshow {
		 0%{ opacity: 0; left: 0px;}
		100%{ opacity: 1; left: 50px;}
	}
	
	footer { padding: 0 0 20px 0;}
	
	#gotop{ right: 10px; bottom: 10px; font-size: 25px; line-height: 30px; width: 30px;}
}