@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:30px;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
p { font-size:18px; line-height:30px; color:#000;}
b,.t-bold { font-weight:600;}
.red { color:#ea7dbb;}
.ora{ color:#f92626;}
.gray { color:#aaa;}
.black { color:#000;}
.blue { color:#4283e2;}
.green { color:#4d8546 !important;}
.pur { color:#6651bc;}
.yel { color:#9c9228;}
.small { font-size:13px !important;}
.m-l-m { margin-left:20px;}
.m-b-m { margin-bottom:20px;}
.m-b-s { margin-bottom:10px;}
.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 { position:absolute; width:100%; margin:0 auto; height:45px; left:0; top:0; z-index:5;}
#po_bar a { vertical-align:middle; }
#po_bar.forinn { height:auto;border-bottom:1px solid #000; position:fixed;}
.logo{ display:block; width:90px; position:absolute; top:10px; left:20px;}
ul#option { position:absolute; top:10px; right:20px;}
ul#option li { display:inline-block; float:none; margin-left:5px; vertical-align:middle; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#000; font-size:12px;}
ul#option li a:hover { text-decoration:underline;}

.btn-menu { display:none;}

/* ---------- 首頁 */
.parallax {position: relative; width: 100%;height: 100vh; background: url("../images/bg-idx.jpg") no-repeat center; background-size:cover;
	/*background-image: url("../images/bg-idx3.png"), url("../images/bg-idx2.png"), url("../images/bg-idx1.png");
	background-repeat: no-repeat; background-position: center; background-position: 50% 50%; background-size:contain;*/}
.idxbox { width:35%; margin:0 auto; position:relative; padding-top:100px;}
.idxbox .tag { position:absolute; top:220px; right:-100px;}
.idxbox h1 {}
.idxbox h2 { position:absolute; width:80%; left:-50px; top:50px;}
.idxbox .btns { width:100%; max-width:510px; margin:0 auto; position:relative; bottom:40px; text-align:center;}
.idxbox .btns a { display:inline-block; width:30%; vertical-align:top;}
.idxbox .btns a:first-child { margin-top:38px;}
.idxbox .btns a:nth-child(2) { margin-top:20px;}
.idxbox .btns a:last-child { margin-top:2px;}
.idxbox .btns a img {transition: all 0.2s ease-in-out;}
.idxbox .btns a:hover img { transform: scale(1.1);}
.bling1 { position:absolute; left:10%; top:50%;}
.bling2 { position:absolute; left:30%; top:2%;}
.bling3 { position:absolute; right:10%; top:20%;}
.bling4 { position:absolute; right:5%; bottom:20%;}
.bling5 { position:absolute; left:5%; bottom:10%;}
.bling1 img { animation: zoom-in-zoom-out 1s ease infinite;}
.bling2 img { animation: zoom-in-zoom-out 1.2s ease infinite;}
.bling3 img { animation: zoom-in-zoom-out 1.5s ease infinite;}
.bling4 img { animation: zoom-in-zoom-out 1.2s ease infinite;}
.bling5 img { animation: zoom-in-zoom-out 1.5s ease infinite;}

@keyframes zoom-in-zoom-out {
  0% { scale: 100%; }
  50% { scale: 140%; }
  100% { scale: 100%; }
}

#footer { clear:both; width:90%; margin:0 auto; font-size:13px; line-height:15px; color:#000; text-align:center; padding:20px 0;}
.parallax #footer { position:absolute; left:5%; bottom: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 #fff; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/* ---------- 內頁設定 */
.container { width:90%; margin:0 auto; max-width:1000px; padding-top:50px; }
.section { padding:50px 0;}
.stitle { margin-bottom: 30px; text-align: center; clear:both;}
.box { padding:40px 5%; width:90%; margin:50px auto; background:#fff; box-shadow:0 0 0 1px #000;}
h2 { font-size:30px; line-height:35px;}
h3 { font-size:25px; line-height:30px;}
/* nav */
nav { text-align:center;}
nav a { font-size:18px; color:#000; text-transform: uppercase; padding:5px 20px; margin:10px 5px; display: inline-block; border-radius:30px;}
nav a:hover {}
nav a.active { background:#fff;}

 /* 作者介紹 */
#section1 { }
.author { position:relative; width:100%; background:#fff; box-shadow:0 0 0 1px #000;}
.author .photo { position:absolute; width:25%; left:-20px; top:20px;}
.author .photo img { border:1px solid #000;}
.author h2 { padding:20px 0 20px 30%; border-bottom:1px solid #000;}
.author h2 span { font-size:50px; font-weight:bold; padding-bottom:5px; margin-left:5px;}
.author p { padding:40px 40px 40px 30%; min-height:100px;}
.author .dot { position:absolute; right:10px; top:10px;}
.author .dot span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #000; margin:2px;}
.link-btn { position:absolute; right:20px; bottom:-20px;}
.link-btn a{ display:inline-block; vertical-align:middle; width:60px; height:60px; border-radius:50%; margin-right:2px; border:1px solid #000;}
.txt-right { text-align:right;}

/* 問答 */
#section2 {}
.sstitle {margin:10px auto; text-align: center; position:relative; top:-20px;}
.sstitle h3 { display: inline-block; padding:10px 30px; background:#000; border-radius:30px; letter-spacing:5px; color:#fff; }
.qabox { padding:0 5% 30px 5%;}
.qa { margin-bottom:25px;}
.qa div:first-child { margin-bottom:10px; font-size:20px; line-height:30px;}
.qa div:first-child span { display:inline-block; vertical-align:top; width:25px; height:25px;}

/* 作品介紹 */
#section3 {}
.box2 { background:#fff; box-shadow:0 0 0 1px #000; margin:50px 0;}
.box2 .tp { width:96%; height: 30px; border-bottom:1px solid #000; text-align:right; padding:0 2%;}
.box2 .tp span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #000; margin:2px;}
.box2 .inn { padding:20px 5%;}
.box2 .inn h3 { margin-bottom:20px;}
.bookinfo { padding:20px 0; width:100%; max-width:600px; margin:0 auto;}
.bookinfo .left { display:inline-block; width:35%; vertical-align:middle;}
.bookinfo .right { display:inline-block; width:60%; margin-left:3%; vertical-align:middle;}
.bookinfo .t-bold { font-weight:600;}
.book-info p { font-family:'Microsoft JhengHei'; font-size:15px; line-height:25px; margin-bottom:10px;}
a.btn-black { clear:both; display:block; margin:20px auto; width:180px; border:1px solid #000; color:#000; padding:10px 0; text-align:center; font-size:20px; position:relative; bottom:-20px;transition: all 0.2s ease-in-out;}
a.btn-black:hover { transform: scale(1.1);}

/* 活動 */
.act-wrap { width:100%; max-width:800px; margin:20px auto;}
.act-box { position: relative; display:inline-block; width:calc( 100% - 300px ); margin-right:25px; vertical-align:middle;}
.act-box .arrow { width:20px; height:20px; overflow: hidden; position:absolute; top:20px; right:-20px;}
.act-box .arrow .outer { width: 0; height: 0; border-left: 20px solid #000000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; top: 0; left:1px;}
.act-box .arrow .inner { width: 0; height: 0; border-left: 20px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; top: 0; left:-2px;}
.act-box .message-body { float: left; width:90%; height: auto;  border: 1px solid #CCC; background-color: #ffffff;  border: 1px solid #000000; padding:50px 5%;
  -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px;}
.act-photo { display:inline-block; width:250px; vertical-align:middle;}
.act-photo img { display:block; width:250px; height:250px;  border-radius:50%;}

.act-wrap2 { width:100%; max-width:800px; margin:20px auto; background:#fff; border-radius:10px; border:1px solid #000; position:relative;}
.act-wrap2 p { padding:50px;}
.act-ti { position:absolute; left:-20px; top:-20px; background:#000; color:#fff; font-size:20px; border-radius:30px; padding:10px 20px;}

/* 出版作品 */
#section4 {}
.stitle2 { text-align:center; letter-spacing:10px; margin:10px 0;}
.promote-title { text-align:center;}
.promote-title div { display:inline-block; border:1px solid #000; font-size:20px; padding:10px 30px;}
.promote-title span { font-size:30px; font-weight:bold;}

.books { text-align: center; margin:30px auto 0 auto;}
.books a { display: inline-block; vertical-align: top; width:150px; height:330px; margin:10px 10px 0 10px; color: #000; opacity:1; position:relative;}
.books a img { width:150px !important; height:213px !important; box-shadow:0 0 0 1px #ccc;}
.books a h4 { font-size:17px; line-height:22px; margin: 10px 0;}
.books a span { display:inline-block; font-size:14px; line-height:16px; color:#000;}
.books a:hover { opacity:0.8;}
.books a .tag { display:block; position:absolute; left:0; top:0; color:#000; border:1px solid #000; font-size:13px; line-height:12px; padding:5px;}

/* 設定1 */
body.part1-bg { background: url("../images/bg-grid.png") #f3dbfe;}
.part1 { background: url("../images/bg-part1.png") repeat-y; background-size:contain;}
.part1 .qa div:first-child { color:#ea7dbb;}
.part1 .qa div:first-child span { background:url("../images/star1.png") no-repeat center; background-size:contain;}
.bg-part1-blue { background:#98E2FF; background: linear-gradient(90deg, rgba(152, 226, 255, 1) 0%, rgba(189, 194, 255, 1) 100%); }
.bg-part1-red { background:#FFA3DE; background: linear-gradient(90deg, rgba(255, 163, 222, 1) 0%, rgba(250, 255, 206, 1) 100%);}
.part1 .books a .tag { background:#a9e5ff;}
.part1 .books a h4 { color:#ea7dbb;}

/* 設定2 */
body.part2-bg { background: url("../images/bg-grid.png") #eae2f7;}
.part2 { background: url("../images/bg-part2.png") repeat-y; background-size:contain;}
.part2 .qa div:first-child { color:#6651bc;}
.part2 .qa div:first-child span { background:url("../images/star2.png") no-repeat center; background-size:contain;}
.bg-part2-pur { background: #B8A5F6; background: linear-gradient(90deg, rgba(184, 165, 246, 1) 0%, rgba(254, 225, 248, 1) 100%); }
.bg-part2-blue { background: #8C96FF; background: linear-gradient(90deg, rgba(140, 150, 255, 1) 0%, rgba(154, 220, 255, 1) 100%);}
.part2 .books a .tag { background:#8c96ff;}
.part2 .books a h4 { color:#6667aa;}

/* 設定3*/
body.part3-bg { background: url("../images/bg-grid.png") #ddd;}
.part3 { background: url("../images/bg-part3.png") repeat-y; background-size:contain;}
.part3 .author h2 { color:#fff;}
.part3 .qa div:first-child { color:#f92626;}
.part3 .qa div:first-child span { background:url("../images/star3.png") no-repeat center; background-size:contain;}
.bg-part3-pink { background:#ffc9d8; }
.bg-part3-red { background: #FF5A30; background: linear-gradient(90deg, rgba(255, 90, 48, 1) 0%, rgba(255, 43, 4, 1) 100%);}
.part3 .books a .tag { background:#ffc9d8}
.part3 .books a h4 { color:#ff5432;}
.part3 a.btn-black { background:#000; color:#fff;}

#books { display:block; padding-top:20px; }

/*-----------------------rwd*/
@media screen and (max-width: 1600px) {
    .idxbox .tag {top:200px; right:-120px;}
}
@media screen and (max-width: 1024px) {
    nav a { font-size:13px; padding:2px 10px; margin:10px 0;}
    .logo img { width:50px; height:21px;}
    
    .idxbox { width:50%;}
    .idxbox h2 { width:80%; left:-50px; top:80px;}
    
}
@media screen and (max-width: 768px) {

	/*head*/
	#po_bar.forinn { border-bottom:none;}
	.logo{ left:10px;}
    h2 { font-size:22px; line-height:30px;}
    h3 { font-size:18px; line-height:25px;}
    
	.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;}
	.btn-menu2 { display:block; width:30px; height:30px; position:absolute; top:10px; right:50px; background:url("../images/icon-menu.png") no-repeat center; background-size:28px 28px; z-index:101;}
	.btn-menu2.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 { }
    
    .parallax { background: url("../images/bg-idx-m.jpg") no-repeat top center; background-size:100% 100%; overflow:hidden;}
    .idxbox h2 { left:-50px; top:100px;}
    .idxbox .tag { top:180px; right:-120px;}
    
    .stitle { width:280px; margin:0 auto 30px auto;}

    .author .photo { width:28%; left:-10px;}
    .author h2 span { display:inline-block; font-size:30px; margin:2px;}
    .author .dot { right:5px; top:0;}
    .author .dot span { width:6px; height:6px; margin:1px;}
    .link-btn { bottom:-25px;}
    .link-btn a{  width:40px; height:40px;}
    
    .qa div:first-child { font-size:18px; line-height:20px;}
    .qa div:first-child span { display:inline-block; vertical-align:top; width:20px; height:26px; vertical-align:text-bottom;}
    
	.bookinfo { padding:0;}
	.bookinfo .left { display:block; width:200px; margin:20px auto;}
	.bookinfo .right { display: block;}
	.bookinfo .cover { width:80%; margin-right:0; margin:10px auto;}
	.bookinfo .book-info { width:100%; padding:0;}

	.bookinfo b { font-size:15px; line-height:22px;}
	.bookinfo .t-bold { font-size:15px;}
	.book-info p { font-size:14px; line-height:22px;}
    
    .part1 { background: url("../images/bg-part1-m.png") repeat-y; background-size:contain;}
    .part2 { background: url("../images/bg-part2-m.png") repeat-y; background-size:contain;}
    .part3 { background: url("../images/bg-part3-m.png") repeat-y; background-size:contain;}
}

@media screen and (max-width: 480px) {
	
	body { font-size: 15px; line-height:25px;}
    
    .idxbox { width:80%; height:400px;}
    .idxbox h2 { width:80%; left:-20px; top:90px;}
    .idxbox .tag { width:120px; top:330px; right:-20px;}
    .idxbox .btns { width:30%; bottom:0;}
    .idxbox .btns a { width:auto; margin:0 !important;}
	.bling1 { left:5%; top:45%;}
	.bling2 { left:40%; top:5%;}
	.bling3 { right:2%; top:30%;}
	.bling4 { right:10%; bottom:20%;}
	.bling5 { left:15%; bottom:10%;}
    .bling1 img { width:20px; height:20px;}
    .bling2 img { width:10px; height:10px;}
    .bling3 img { width:20px; height:20px;}
    .bling4 img { width:30px; height:30px;}
    .bling5 img { width:20px; height:20px;}
    
    h2 { font-size:20px;}
    h3 { font-size:17px;}
	p { font-size:15px; line-height:25px;}
    .section { padding:30px 0;}
    
    .author .photo { width:30%; left:-10px; top:-10px;}
    .author h2 { padding:20px 0 20px 35%;}
    .author p { padding:20px 20px 30px 20px;}
	.box { margin:30px auto;}
	
    /* 活動 */
    .act-box { width:calc( 100% - 130px ); margin-right:20px;}
    .act-box .arrow { width:20px; height:20px; overflow: hidden; position:absolute; top:20px; right:-20px;}
    .act-box .arrow .outer { width: 0; height: 0; border-left: 20px solid #000000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; top: 0; left:1px;}
    .act-box .arrow .inner { width: 0; height: 0; border-left: 20px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; top: 0; left:-2px;}
    .act-photo { width:100px;}
    .act-photo img { width:100px; height:150px;}
    .act-wrap2 p { padding:30px;}
    .act-ti { padding:5px; font-size:16px; left:-5px; top:-10px;}
    
    /* 書單 */
    .promote-title div { font-size:18px; padding:8px 20px;}
    .promote-title span { font-size:22px;}
	.books { text-align: center; margin-top:30px;}
	.books a { width:140px; margin:0 0 20px 0; height:260px;}
	.books a img { width: 120px !important; height:170px !important;}
	.books a h4 { font-size:16px; line-height:22px; margin: 10px 0;}
	.books a:hover { background:none; box-shadow:none;}
    .books a .tag { font-size:12px;}


	#footer { padding:50px 0 20px 0;}
	
}