@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;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
b,.t-bold { font-weight:600;}
.t-center { text-align:center;}
.black { color:#000 !important;}
.blue { color:#51a1d9 !important;}
.green { color:#6bb447 !important;}
.yel { color:#dfa04c;}
.pink { color:#f196af;}
.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-m { margin-top:20px;}
.m-t-L { margin-top:80px;}
.break { display:block;}
h2 { font-size: 34px; line-height:45px;}
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:1000px; 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:#6bb447; border-bottom:2px solid #6bb447;}
nav ul li a.active { background: #d4e1d4;}

/* toparea */
#section0 { padding: 0 !important; background:url("../images/bg1.jpg") no-repeat bottom center; background-size:cover; height:750px;}
#section0 .top-wrap { width:100%; max-width:900px; margin:0 auto; padding-top:80px;}
#section0 h1 { margin:20px 0;}
#section0 h2 { padding-left:20px;}
.fourpeople div { display: inline-block; vertical-align:top; color:#6bb447}
.fourpeople div span { display:block; font-size:15px; line-height:16px; color:#555 !important; text-align:center;}

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

.section { padding:80px 0; clear:both;}
.box { background:#fff; box-shadow:0 0 8px 0 rgba(108,137,155,.2); border-radius:5px; padding:40px 80px; margin:30px 0;}
.stitle { margin-bottom: 30px; text-align: center; clear:both;}
.sstitle { text-align:center;}

/* 作品介紹 */
#section1 { background:url("../images/bg2.jpg") no-repeat top center;}
.bookinfo { overflow: hidden; width:100%; max-width:900px; margin:0 auto 20px auto;}
.bookinfo .left { float: left;}
.bookinfo .right { float: right;}
.bookinfo .cover { width:40%; text-align: center;}
.bookinfo .book-info { width:55%;}
.bookinfo .green {font-weight: normal; margin-bottom:15px;}
.bookinfo p { color:#333;}
.gift { background:#e8f3f7; border-radius:5px; position:relative; width:300px; padding:15px; font-size:16px; color:#51a1d9; margin-top:40px;}
.gift .giftimg { display:block; position:absolute; right:10px; top:-20px;}
.b-tag { color:#6bb447 !important; border:1px solid #6bb447; width:250px; text-align:center; margin:10px 0 30px 0;}

a.btn-black { clear:both; display:block; margin:0 auto; width:120px; color:#000; border:1px solid #000; padding:10px; text-align:center; font-size:18px;}
a.btn-black:hover { opacity: 0.7; background:#000; color:#fff;}
.btns { clear:both; text-align:center; clear:both; color:#ccc; margin-top:10px;}
.btns a { color:#000; font-size:18px;}
.btns a:hover { opacity: 0.7;}

/* 作者介紹 */
#section2 { background: url("../images/bg3.jpg") no-repeat center; background-attachment:fixed; background-size:cover;}
.author-wrap { overflow:hidden; padding:20px;}
.author { float:left; width:44%; padding:15px 2%; background:#fff; border-radius:5px; min-height:360px; margin:20px 1%;}
.author .left { display: inline-block; vertical-align:top; width:180px; text-align: center;}
.author .right { display: inline-block; vertical-align:top; width:calc( 100% - 200px ); padding:10px 0 0 10px;}
.link-btn { margin-top:20px;}
.link-btn a{ display:inline-block; vertical-align:middle; padding:3px 10px; font-size:14px; margin-right:2px; color:#6bb447; border:1px solid #6bb447;}
.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;}

.sign-box { width:80%; max-width:450px; padding:0 5% 30px 5%; margin:40px auto 0 auto; background:#d4eff7; border-radius:5px; }
.sign-box h3 { width:410px; height:57px; padding-top:10px; text-align:center; margin:20px auto; color:#fff; background:url("../images/author-title.png") no-repeat center; background-size:contain; position:relative; top:-20px;}
.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:#1b6fa7; color:#fff; }
.sign-box a:hover { opacity: 0.7;}

/* 活動 */
#section3 { background:url("../images/bg4.jpg");}
.act { background:url("../images/bg4-act-bg.png") no-repeat center; background-size:100% 100%; padding:80px 5%;}
.act .field { margin:30px 0;}
.act .field:last-child { margin-bottom:0;}
.act .ti { display: inline-block; vertical-align: top; font-size: 20px; border:1px solid #000; 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% - 150px ); margin-left:20px;}
.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-top:15px;}
.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;}

/* 新書 */
#section4 { background:url("../images/bg5.jpg") no-repeat center;}
.btns2 { text-align:center;}
.btns2 a { display:inline-block; vertical-align:middle; padding:10px 0; width:22%; margin:5px 1%; font-size:18px; border-radius:5px;}
.btns2 a.yel { background:#fffdc8; color:#000; }
.btns2 a.pink { background:#ffdee7; color:#000; }
.btns2 a:hover { opacity:0.8;}

#footer { clear:both; font-size:12px; color:#555; 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: 1800px) {
	#section0 { height:650px;}
}

@media screen and (max-width: 1400px) {
    .author { min-height:410px;}
    .author .left { width:160px;}
    .author .right { width:calc( 100% - 180px );}
}

@media screen and (max-width: 1300px) {
    .author { min-height:450px;}
    .author .left { width:140px;}
    .author .right { width:calc( 100% - 160px );}
}

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

    #section0 { }
    #section0 h1 { margin:10px 0;}
    .section { padding:30px 0;}
    .author { float:none; width:96%; padding:20px 2%; min-height:inherit; margin:20px 0;}
    
	.act { background-size:cover;}
	.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;}
	
	.act { background:url("../images/bg4-act-bg.png") no-repeat left center; background-size:cover; padding:20px 3%;}
	.act .ti { font-size:16px; line-height:25px;}
	.act .txt { font-size:15px; line-height:24px;}
    .note .ti span { font-size:14px;}
}

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

	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;}
    
    #section0 { height:700px; background: url("../images/bg1-m.jpg") no-repeat center; background-size:cover;}
    #section0 .top-wrap { width:400px; margin:0 auto; text-align:center;}
    #section0 h2 { padding:0;}
    
	nav ul li a { padding:5px 8px; font-size:12px;}
	
    .box { padding:30px;}
    
	#section1,#section2,.section3-wrap { padding:40px 0;}
    #section2 { background: url("../images/bg3.jpg"); background-size:inherit; background-attachment:inherit;}

    .bookinfo .left { float:none;}
	.bookinfo .right { float:none;}
	.bookinfo .cover { width:200px; margin-right:0; margin:10px auto;}
	.bookinfo .book-info { width:300px; margin:0 auto; padding:0;}
    .bookinfo .green { text-align:center;}
    .b-tag { margin:0 auto 30px auto;}
    .gift { margin-bottom:20px;}
    .gift .giftimg { top:-40px;}
    
    .author { width:90%; padding:20px 5%;}
    .author .left { display:block; width:150px; text-align: center; margin:0 auto;}
    .author .right { display:block; width:100%; padding:0; margin-top:10px;}
    .link-btn { text-align:center;}
    
    .btns2 a { width:46%; font-size:13px;}

}

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

    #section0 { height:600px;}
    #section0 .top-wrap { width:100%;}
    .box { padding:20px;}
    h4.yel, h4.pink, h2.yel, h2.pink { text-align:center;}
    .bookinfo .book-info { width:100%;}
    .sign-box h3 { width:300px; height:39px; padding-top:10px; margin:20px auto 0 auto;}
}