@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.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,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 Sans TC','Microsoft JhengHei', sans-serif; color:#000; font-size:18px; line-height:25px;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
p { font-size:18px; line-height:25px; color:#000;}
b,.t-bold { font-weight:600;}
.red { color:#e74c17;}
.gray { color:#aaa;}
.black { color:#000;}
.blue { color:#4dace0 !important;}
.green { color:#459595 !important;}
.pink { color:#ef7bab;}
.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;}
.t-center { text-align:center;}

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

/* head */
#po_bar { width:100%; margin:0 auto; height:45px; 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;}

/* nav */
#nav { position: fixed; right:30px; top:35%; text-align:right; z-index: 99;}
#nav li { }
#nav li a { display:inline-block; color:#000; padding:5px 15px; font-size:18px; margin:5px 0; background:#fff; border:1px solid #000;}
#nav li a:hover,#nav .current a { background:#000; color:#fff;}

h1 { font-weight:bold; font-size:80px; line-height:80px;}
h2 { font-weight:600; font-size:45px; line-height:55px;}
h3 { font-weight:600; font-size:34px; line-height:44px;}
h4 { font-size:22px; line-height:35px;}
h5 { font-size:19px; line-height:28px;}
.small { font-size:15px !important;}
.tbd { display:inline-block; border:1px solid #000; padding:8px; background:#fff; margin-top: -1px; margin-left: -1px;}

/* 主視覺 */
#section0 { width:87%; margin:40px auto; background:url("../images/bg.jpg");}
.top-wrap { position:relative; width:100%; height:680px; }
.top-wrap h1 { position:absolute; left:-30px; top:-30px; z-index:1;}
.top-wrap h2 { position:absolute; left:40px; bottom:40px;}
.top-wrap h3 { position:absolute; right:-30px; top:-30px;}
.top-wrap h4 { position:absolute; right:40px; bottom:40px;}
.top-img { display:block; position:absolute; left:35%; top:8%;}
.mobile { display:none;}

/* 最新主打 */
.section { width:87%; margin:100px auto; clear:both; background:url("../images/bg.jpg") repeat-y; position:relative;}
.section-in { position:relative; padding:100px 0; z-index:0;}
.part-title { position:absolute; left:-30px; top:-30px; z-index:1;}
.part-title h1 { width:80px; word-break:break-all;}
.part-title .h1-use {}
.part-title .h1-use h1 { display:inline-block; vertical-align:top;}
.part-title .h1-use h1:last-child { margin-left:13px;}
.part-title h3 { line-height:34px;}

#section1 .section-in { background: url("../images/bg-01.png") no-repeat top 50px center;}
.section-wrap { width:90%; max-width:1200px; margin:0 auto;}
.stitle { margin-bottom: 30px; text-align: center; clear:both;}
.sstitle1 { background: url("../images/sstitle1.png"); width:368px; height:60px; line-height:60px; font-size:25px; text-align:center; margin:20px auto; color:#fff; font-weight:600;}
.sstitle2 { background: url("../images/sstitle2.png"); width:256px; height:60px; line-height:60px; font-size:22px; text-align:center; margin:0 auto; color:#fff; font-weight:600;}
.sstitle3 { background: url("../images/sstitle3.png"); width:368px; height:60px; line-height:60px; font-size:25px; text-align:center; margin:0 auto; color:#fff; font-weight:600;}
.books { text-align: center; margin:30px auto 0 auto;}
.books .book { display: inline-block; vertical-align: top; width:210px; height:460px; margin:10px; color: #000;}
.books .book img { width:180px;}
.books .book h5 { margin-top:10px;}
.books .book p.des { font-size:15px; line-height:20px; margin-top:10px; text-align:left;}
.books .book .link { font-size:15px; line-height:20px; text-align:left; margin-top:10px;}
.books .book .link a { color:#459595; font-size:15px; line-height:20px;}
.books a:hover { opacity:0.7;}
.wbox { background: url("../images/wbox.png") no-repeat center; background-size:100% 100%;}
.lovewrap { text-align:center;}
.lovewrap-m { display:none;}

/* 展覽訊息 */
#section2 .section-in { background: url("../images/bg-02.png") no-repeat top 50px center; margin:0 auto;}
.col2 {overflow:hidden; padding:30px 0;}
.col2 .wbox { width:48%; height:320px;}
.col2 .wbox:first-child { float:left;}
.col2 .wbox:last-child { float:right;}
.wbox .ti { position:relative; top:-20px;}
.wbox .txt { padding:0 30px 30px 30px; text-align:center;}
ul.star { list-style: none; text-align:left; padding-left:20px;}
ul.star li { position: relative; font-size:18px; line-height:25px; margin-bottom:5px;}
ul.star li::before { content: "★"; color:#e74c17; position: absolute; font-size:18px; left: -19px; top:-3px;}

/* 線上書展 */
#section3 .section-in { background: url("../images/bg-03.png") no-repeat top 50px center; margin:0 auto;}
.garden { width:100%; max-width:800px; margin:60px auto;}
.go-btn { display:block; color:#000; border:1px solid #000; font-size:18px; padding:10px 0; width:210px; margin:20px auto;}
.go-btn:hover { background:#000; color:#fff;}
.books.v2 .book { height:320px;}

/* 活動 */
#section4 .section-in { background: url("../images/bg-04.png") no-repeat top 50px center; margin:0 auto;}
.sign { text-align:center; position:relative; padding:40px 0; margin:40px 0;}
.s-date { width:150px; line-height:60px; font-weight:600; font-size:25px; color:#fff; text-align:center; background:#f498ba; border-radius:30px; position:absolute; left:20px; top:-30px; z-index:1;}
.author { margin:15px 0;}
.author img { display:inline-block; vertical-align:middle; width:160px; margin:0 5px;}
.s-time2 { text-align:left; width:90%; max-width:600px; margin:15px auto;}
.s-time span { display:inline-block; border-radius:20px; background:#f4f0dc; vertical-align:middle; padding:0 15px; margin-right:10px;}
.sign-box { width:270px; display:inline-block; vertical-align:top; text-align:center;}
.store-box { width:100%; max-width:320px; display:inline-block; vertical-align:top;}
.store-box .imgs { display:inline-block; vertical-align:middle; width:30%;}
.store-box .imgs img { width:120px; height:120px; border-radius:50%;}
.store-box .atxt { display:inline-block; vertical-align:middle; width:66%; text-align:left; margin-left:1%;}

#footer { clear:both; font-size:13px; text-align:center; padding:30px 0;}

/*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: 1600px) {
    .section { width:90%;}
    .books .book { width:190px; height:420px;}
    .books .book img { width:160px;}
}

@media screen and (max-width: 1200px) {
    .top-img { left:30%; top:20%; width:500px;}
    h1 { font-size:60px; line-height:70px;}
    h2 { font-size:35px; line-height:45px;}
    h3 { font-size:24px; line-height:34px;}
    h4 { font-size:18px; line-height:30px;}
    h5,p { font-size:16px; line-height:22px;}
    
    /* nav */
    #nav { right:10px; top:35%;}
    #nav li a { padding:5px 10px; font-size:16px; margin:3px 0;}
    
    .section-wrap { width:95%;}
    .books .book { width:160px; height:400px;}
    .books .book img { width:140px;}
    .books .book p.des { font-size:13px; line-height:18px;}
    .books .book .link { font-size:13px; line-height:18px;}
    .books .book .link a { font-size:13px; line-height:18px;}

}

@media screen and (max-width: 1000px) {
    
    /* 主視覺 */
    #section0 { width:90%; margin:40px auto;}
    .top-wrap h1 { left:-10px; top:-15px;}
    .top-wrap h2 { left:40px; bottom:40px;}
    .top-wrap h3 { right:-10px; top:-15px;}
    .top-wrap h4 { right:20px; bottom:20px; width:200px;}
    .top-img { left:30%; top:20%; width:500px;}
    
    .part-title { position:absolute; left:-10px; top:-60px; z-index:1;}
    .part-title h1 { width:auto; word-break:break-all;}
    .part-title .h1-use {}
    .part-title .h1-use h1 {}
    .part-title .h1-use h1:last-child { margin-left:-8px;}
    .part-title .h1-use h1:firdt-child .tbd { border-right:0; padding-right:0;}
    .part-title .h1-use h1:last-child .tbd { border-left:0; padding-left:0;}
    .part-title h3 { line-height:24px;}
    
    .lovewrap { display:none!important;}
	.lovewrap-m { display:block;}
    
    .col2 .wbox { width:100%; height:auto;}
    .col2 .wbox:first-child { float:none; margin-bottom:50px;}
    .col2 .wbox:last-child { float:none;}
    
    .books.v2 .book { height:250px;}

}

@media screen and (max-width: 768px) {
	
	body { background:#f4f4f4;}

	/*head*/
	.logo{ left:10px;}
	.logo img { width:80px; height:34px;}
	.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;}
	
    #nav { right:5px; top:inherit; bottom:10px;}
    #nav li a { padding:5px 10px; font-size:13px; margin:3px 0;}

    .top-wrap { height:520px;}
    .top-wrap h4 { display:none;}
    .top-img { left:2%; top:30%; width:95%;}
    
    h1 { font-size:50px; line-height:60px;}
    h2 { font-size:30px; line-height:40px;}
    h3 { font-size:22px; line-height:30px;}
    
    #section1 .section-in { background:url("../images/bg-01-m.png") no-repeat top 80px center; background-size:contain;}
    #section2 .section-in { background:url("../images/bg-02-m.png") no-repeat top 80px center; background-size:contain;}
    #section3 .section-in { background:url("../images/bg-03-m.png") no-repeat top 80px center; background-size:contain;}
    #section4 .section-in { background:url("../images/bg-04-m.png") no-repeat top 80px center; background-size:contain;}
    
    .sstitle1 { width:220px; height:50px; line-height:50px; font-size:18px; background-size:100% 100%;}
    .sstitle2 { width:150px; height:50px; line-height:50px; font-size:18px; background-size:100% 100%;}
    .sstitle3 {}
}

@media screen and (max-width: 640px) {
	
	body { font-size:15px; line-height:25px;}
    h1 { font-size:40px; line-height:50px;}
    h2 { font-size:25px; line-height:35px;}
    h3 { font-size:20px; line-height:28px;}
    h4 { font-size:17px; line-height:26px;}
    h5,p { font-size:15px; line-height:20px;}
    .small { font-size:13px !important;}
	
    .section { margin:80px auto;}
    .section-in { padding:50px 0;}
    #section4 { margin:80px auto 20px auto;}
    
    .top-wrap h1 { left:-10px; top:-25px;}
    .top-wrap h2 { left:10px; bottom:10px;}
    .top-wrap h3 { display:none;}
    .top-wrap .mobile { display:block; width:80px; height:65px; border-radius:50%; font-size:14px; line-height:17px; position:absolute; right:-10px; top:150px; background:#fff; border:1px solid #000; text-align:center; padding-top:16px;}
    .top-wrap h4 { right:20px; bottom:20px; width:200px;}
    
    .books .book { width:140px; height:340px;}
    .books .book img { width:120px;}
    .books.v2 .book { height:220px;}
    
    .s-date { width:100px; line-height:40px; font-size:17px; border-radius:20px; left:50%; top:-20px; margin-left:-50px;}
    .store-box { margin-bottom:10px;}
	
	.s-time2 {}
    
}
@media screen and (max-width: 480px) {
	
    h1 { font-size:35px; line-height:40px;}
	
}