@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;900&display=swap');

/*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,b {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
table{border-collapse:collapse;border-spacing:0;}
img,a{border:0; outline:0;}
a{ text-decoration:none; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family:'Noto Serif TC','Microsoft JhengHei', sans-serif; color:#000; font-size: 18px; line-height: 28px; background: url("../images/bg1.jpg") no-repeat top center;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
b,.t-bold { font-weight:800;}
.black { color:#000;}
.blue { color:#4dace0 !important;}
.green { color:#848b29 !important;}
.small { font-size:13px !important;}
.m-l-m { margin-left:20px;}
.m-b-m { margin-bottom:20px;}
.m-b-L {  margin-bottom:80px;}
.m-t-L { margin-top:80px;}
.break { display:block;}
h2 { font-size: 45px; line-height:55px;}
h3 { font-size: 25px; line-height:35px;}
h4 { font-size:20px; line-height:28px;}
p { font-size:17px; line-height:27px; margin-bottom:15px;}

.container { }
.wrap { width:90%; max-width:1100px; margin:0 auto;}

img.for-pc {}
img.for-m { display:none;}

/* nav */
nav { display: none; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background:#fff; z-index: 99;}
nav ul li { display: inline-block; }
nav ul li a { display: block; color:#000; padding:15px 20px; font-size: 20px; border-bottom:2px solid #fff;}
nav ul li a:hover { color:#848b29; border-bottom:2px solid #c6cc5e;}
nav ul li a.active { background: #d4e1d4;}

/* toparea */
#section0 { padding: 0 !important; background:url("../images/top-bg.png") no-repeat top center; background-size:contain; height:650px;}
#section0 .top-wrap { width:55%; padding-left:45%; padding-top:80px;}
#section0 h1 { margin:20px 0;}
#section0 h3 { letter-spacing: 8px;}
#section0 h3 .green { font-size:35px; margin:0 5px; font-style: italic; letter-spacing:0;}

/* head */
#po_bar { position:absolute; width:100%; margin:0 auto; height:45px; left:0; padding-top: 10px; z-index:3;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:5px; right:20px;}
ul#option li { display:inline-block; float:none; font-size:13px; margin-left:5px; vertical-align:middle; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#000;}
ul#option li a:hover { text-decoration:underline;}
.btn-menu { display:none;}

/* 小標 */
.stitle { margin-bottom: 30px; text-align: center;}
.stitle h2 { margin-bottom: 10px;}
.stitle h2 span { display:inline-block; position:relative;}
.stitle h2 span:after { content:""; display:block; width:100%; height:20px; background:#e3e887; position:absolute; left:0; bottom:0; z-index:-1;}
.stitle img { vertical-align: middle;}
#section2 h2 span:after { background:#f5f9ca;}

/* 作品介紹 */
#section1 { padding:80px 0;}
.bookinfo { overflow: hidden; width:100%; max-width:900px; margin:20px auto;}
.bookinfo .left { float: left;}
.bookinfo .right { float: right;}
.bookinfo .cover { width:30%; text-align: center;}
.bookinfo .book-info { width:60%; padding-left:10%;}
.bookinfo .green {font-weight: normal; margin-bottom:15px;}
.gift { background:#fff; border-radius:5px; position:relative; width:calc( 100% - 320px ); margin:20px auto; max-width:500px; padding:30px 270px 30px 50px;}
.gift .tag { position:absolute; left:-30px; top:-10px;}
.gift .tag div { background:#e3ea8c; width:80px; height:60px; padding-top:20px; font-size:20px; line-height:20px; text-align:center; border-radius:50%;}
.gift .imgs { position:absolute; right:-20px; top:20px;}
.gift h4 { margin:10px 0;}

a.btn-black { clear:both; display:block; margin:40px auto 10px auto; width:120px; background:#5a5c3e; color:#fff; padding:10px; text-align:center; font-size:18px;}
a.btn-black:hover { opacity: 0.7;}
.btns { clear:both; text-align:center; clear:both; color:#ccc;}
.btns a { display:inline-block; vertical-align:middle; width:100px; padding:8px 0; margin:3px; border:1px solid #5a5c3e; color:#5a5c3e; font-size:17px;}
.btns a:hover { opacity: 0.7;}

/* 作者介紹 */
#section2 { background: url("../images/bg2.jpg") no-repeat center; background-size: cover; background-attachment: fixed; padding:80px 0;}
.author { overflow: hidden;}
.author .left { float:left; width:280px; text-align: center;}
.author .right { float:right; width:calc( 100% - 330px ); padding:20px 0 0 50px;}
.link-btn { margin-top:40px;}
.link-btn a{ display:inline-block; vertical-align:middle; padding:10px 20px; font-size:17px; margin-right:5px; color:#6c6917; border:1px solid #6c6917;}
.link-btn a:hover { opacity: 0.7;}
.link-btn img { display: inline-block; margin-right:5px; vertical-align:middle; width:30px;}
.txt-right { text-align:right;}
.author ul { padding-left:20px; margin-bottom:20px;}
.author ul li { list-style: disc;}
.saying { clear:both; background: url("../images/bg3-n.jpg"); width:100%; max-width:900px; position:relative; margin:50px auto 0 auto;}
.saying h3 { position:absolute; left:-20px; top:-10px; background: rgba(101,98,20,.8); color:#e3ea8c; padding:5px 20px;text-align:center; -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg);}
.saying p { padding:50px;}
/* 活動 */
.section3-wrap { background-image: url(../images/bg3-2.png), url(../images/bg1.jpg); background-position: right bottom, center; background-repeat: no-repeat, repeat; background-size:contain, auto; padding:80px 0 20px 0;}
.act { background:#fff; border-radius:10px; box-shadow:0 0 20px 0 rgba(0,0,0,0.1); width:calc( 90% - 100px ); padding:50px 50px; max-width:1000px; margin:20px auto}
.act .field { margin:30px 0;}
.act .field:last-child { margin-bottom:0;}
.act .ti { display: inline-block; vertical-align: top; font-size: 22px; background:#fff6bf; color:#000; width:120px; text-align:center;}
.act .txt { display: inline-block; vertical-align: top; font-size: 18px; line-height:25px; vertical-align: top; width: calc( 100% - 180px ); margin-left:50px;}
.award { display: inline-block; vertical-align: middle;}
.award img { display: inline-block; vertical-align: middle;}
.award .imgs { display: inline-block; vertical-align: middle;}
.award .tx { display: inline-block; vertical-align: middle; line-height:30px;}
ol { padding-left: 20px;}
ol li { list-style:decimal; margin-bottom:5px; font-size:18px; line-height:25px;}
.note { clear: both; padding:10px; margin:15px auto 40px auto;}
.note .ti { text-align: center; margin: 10px 0;}
.note .ti span { display: inline-block; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 18px;letter-spacing: 3px;}
.note ol li { font-family:'Microsoft JhengHei'; font-size: 13px; line-height:18px;}

.sign-box { border:1px solid #000; width:90%; max-width:450px; padding:30px 5%; margin:20px auto 90px auto; }
.sign-box div { margin:5px;}
.sign-box span { display: inline-block; vertical-align:middle; background:#fff; margin-right:10px; padding:5px 10px; }
.sign-box a { display:block; width:120px; font-size:18px; padding:10px; margin:20px auto 0 auto; text-align:center; background:#5a5c3e; color:#fff; }
.sign-box a:hover { opacity: 0.7;}

#footer { clear:both; font-size:12px; color:#c0c3b5; text-align:center; padding:20px 0 0 0; margin-top:40px;}

/*gotop*/
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; border-radius:50%; border:1px solid #000;
	background:url(../images/toparrow.png) no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/*-----------------------rwd*/

@media screen and (max-width: 1366px) {
	/* toparea */
    #section0 { height:550px;}
    
}
@media screen and (max-width: 1100px) {

    #section0 { height:500px;}
    #section0 h1 { width:350px;}
    
	.act { }
	.act .ti { display: block; width:200px; margin-right:0; margin: 0 auto 10px auto; font-size: 20px; line-height: 30px;}
	.act .txt { display: block; width:100%; margin: 0; font-size:17px; line-height: 27px; text-align: center;}
	ol { padding-left: 20px;}
	ol li { font-size:17px; line-height:27px; text-align: left;}
}
@media screen and (max-width: 1000px) {
    
	/*head*/
	.logo{ left:10px;}
	.logo img { width:50px; height:24px;}
	.btn-menu { display:block; width:30px; height:30px; position:absolute; top:10px; right:10px; background:url(../images/icon-share.png) no-repeat center; background-size:28px 28px; z-index:101;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:28px 28px;}
	ul#option { display:none; float:none; text-align:center; width:100%; margin-top:0; padding:40px 0; text-align:center; position:absolute; top:0; right:0; left:0; background:rgba(255,255,255,.9); z-index:100; -webkit-backface-visibility:hidden;}
	ul#option li { }
 	ul#option li a {text-shadow:none;}

    ol { padding-left: 20px;}
	ol li { font-size: 16px; line-height: 24px;}
	
	/*goTOP*/
	#gotop{ bottom:10px; right:10px;}
	#gotop a{ width:30px; height:30px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
    
	.author .left { float:none; width:50%; margin:10px auto;}
	.author .right { float:none; width:100%; padding:0;}
	.link-btn { margin-top:20px; text-align: center;}
	.link-btn a{ padding:10px; font-size:15px; margin:3px;}
	.link-btn img { margin-right:3px;}
	
	.act { width:calc( 90% - 50px ); padding:25px;}
	.act .ti { dfont-size:18px; line-height:25px;}
	.act .txt { font-size:16px; line-height:24px;}
    .note .ti span { font-size:14px;}
}

@media screen and (max-width: 680px) {
	
	body { font-size:14px; line-height:18px;}
    h2 { font-size:22px; line-height:30px;}
    h3 { font-size:17px; line-height:22px;}
    h4 { font-size:15px; line-height:22px;}
	p { font-size:14px; line-height:20px;}
    
	/* nav */
	nav ul li a { padding:5px 8px; font-size:12px;}
	
	#section1,#section2,.section3-wrap { padding:40px 0;}
    #section2 { background-size: cover; background-attachment:inherit;}
    
    .bookinfo .left { float:none;}
	.bookinfo .right { float:none;}
	.bookinfo .cover { width:250px; margin-right:0; margin:10px auto;}
	.bookinfo .book-info { width:100%; padding:0;}
    .gift { width:90%; margin:20px auto; max-width:500px; padding:20px 5% 120px 5%; text-align:center;}
    .gift .tag { left:40px; top:-10px;}
    .gift .tag div { width:50px; height:35px; padding-top:10px; font-size:14px; line-height:14px;}
    .gift .imgs { display:block; position:absolute; right:0; top:inherit; bottom:-20px; width:100%; text-align:center;}
    .gift .imgs img { width:150px;}
}

@media screen and (max-width: 480px) {
    #section0 { height:400px; background: url("../images/top-bg-m.png") no-repeat left top; background-size:contain;}
    #section0 .top-wrap { width:60%; padding-left:40%; padding-top:50px;}
    #section0 h1 { width:220px;}
    #section0 h3 { letter-spacing:2px;}
    #section0 h3 .green { font-size:25px; margin:2px;}
    #section0 p { font-size:13px;}
    .stitle img { width:auto !important; height:25px !important;}
    .sign-box { margin:20px auto;}
}