@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,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:'PMingLiU', sans-serif; color:#fff; font-size:18px; line-height:26px;
    background:url(../images/bg2.png) no-repeat bottom center, url(../images/bg1.png) repeat-y top center #000; background-size: contain;}
/* 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;}
.red { color:#eb7c4a;}
.gray { color:#aaa;}
.black { color:#000;}
.blue { color:#67dae3 !important;}
.green { color:#556c21 !important;}
.pur { color:#a76a70;}
.yel { color:#ffe049;}
.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;}

.container { width:90%; max-width:1100px; margin:0 auto; position: relative; z-index: 3;}
.wrap { width:90%; max-width:1050px; margin:0 auto;}

/* head */
#po_bar { width:100%; margin:0 auto; height:50px; left:0; z-index:3; background:#104682;}
.top-title { font-size:24px; text-align:center; width:330px; margin:0 auto; padding-top:15px;}
.logo{ display:block; position:absolute; left:20px; top:15px; font-size:24px; color:#fff;}
ul#option { position:absolute; top:12px; right:20px;}
ul#option li { display:inline-block; float:none; font-size:13px; vertical-align:middle; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#fff;}
ul#option li a:hover { text-decoration:underline;}
.btn-menu { display:none;}

#footer { clear:both; font-size:13px; color:#64abc6; text-align:center; padding:100px 0 20px 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 #fff;
	background:url("../images/toparrow_.png") no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/* toparea */
.top-area { background: url("../images/top-bg.png") no-repeat top center; background-size:contain; height:440px; text-align:center;}
.top-area.part2 { height:350px;}
.top-wrap { width:45%; height:100%; margin:0 auto; background:#000;}
.top-wrap h1 { clear:both;margin:20px;}
.top-wrap h2 {}
.top-wrap .small { font-size:17px;}
.nav { overflow:hidden;}
.nav a { display:block; float:left; width:50%; padding:10px 0; font-size:22px; color:#000; background:#888;}
.nav a.active { color:#000; background:#fff;}

h1 { font-size:30px; line-height:40px;}
h2 { font-size:22px; line-height:30px; margin-bottom:10px;}
h3 { font-size:20px; line-height:28px; margin-bottom:10px;}
h4 { font-size:18px; line-height:26px;}
p { font-size:18px; line-height:26px; color:#fff;}

/* 翻牌 */
.author-flip { text-align:center; width:100%; max-width:800px; margin:0 auto;}
.author-flip .box { display:inline-block; vertical-align:top; width:320px; padding:20px; margin:10px 10px 30px 10px; border:1px solid #ccc; height:390px; /*perspective: 600px;*/}
.author-flip .box .photo {}
.author-flip .box .photo .imgs {}
.author-flip .box .photo img { width:200px; height:200px;}
.author-flip .box .photo .date { display:block; background:#ffe049; color:#000; width:90px; line-height:18px; font-size:17px; position:absolute; right:0; top:20px;}
.author-flip .box ol { padding-left:20px; text-align:left;}
.author-flip .box ol li,.author-flip .box p { font-size:16px; line-height:22px; text-align:left;}
.author-flip .box a.go { display:block; background:#ffe049; color:#000; width:120px; line-height:30px; font-size:17px; margin:10px auto;}
.author-flip .box a.go:hover { opacity:0.8;}
.author-flip .box h3 { margin-top:10px;}
.author-flip .box .com { padding-top:60px; text-align:center;}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 0.8s;
}
.card.is-flipped { transform: translateX(-100%) rotateY(-180deg); }

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  backface-visibility: hidden;
}

.card-front { }
.card-back { transform: rotateY(180deg);}
.card-back span { background:#000; color:#fff; padding:10px; position:absolute; left:0; top:0; z-index:2;}

/*頁籤二介紹*/
.stitle { width:253px; line-height:37px; margin:40px auto; text-align:center; color:#000; font-size:20px; font-weight:bold; background: url("../images/stitle.png") no-repeat center;}
.author-box { overflow:hidden; clear:both; border:1px solid #ccc; padding:50px; margin:30px auto; max-width:900px;}
.author-box .photo { width:250px; height:250px;}
.author-box .txt { width:calc(100% - 290px);}
.author-box .left { float:left; margin-right:40px;}
.author-box .right { float:right;}

.author-link { text-align: center;}
.author-link a { display:inline-block; vertical-align:middle; width:217px; height:110px; background:url("../images/author-link.png") no-repeat center; background-size:contain; margin:10px; font-size:18px; padding-top:50px; color:#fff;}
.author-link a:hover { opacity: 0.6;}

.book-wrap { width:100%; max-width:850px; margin: 0 auto;}
.book-wrap .cover { display: inline-block; vertical-align:top; width:220px;}
.book-wrap .info { display:inline-block; vertical-align:top; width:calc( 100% - 290px ); margin-left:40px;}
.book-wrap h3 { margin-bottom:15px;}
.book-wrap .comming {background:#49b0ff; color:#000; font-size:15px; padding:5px 0; text-align:center; width:150px; margin:10px auto; border-radius:5px;}

.saying { padding-top:15px;}
.saying h4 { font-size:15px; line-height:18px; color:#53b4db;}
.saying span { display:inline-block; vertical-align:middle; background:#104682; color:#fff; font-size:15px; padding:0 5px; margin:3px;}

.author-link2 { text-align: center;}
.author-link2 a { display:inline-block; vertical-align:middle; width:187px; height:110px; background:url("../images/author-link2.png") no-repeat center; background-size:contain; margin:10px; font-size:16px; line-height:20px; padding-top:50px; padding-right:15px; padding-left:15px; color:#fff;}
.author-link2 a:hover { opacity: 0.6;}

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

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

	body { background:#000; font-size:16px; line-height:23px; background:url(../images/bg2-m.png) no-repeat bottom center, url(../images/bg1-m.png) repeat-y top center #000; background-size: contain;}
	
	/*head*/
	.top-title { font-size:14px; width:250px; padding-top:15px;}
	.logo{ left:10px; font-size:14px;}
	.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:24px 24px; z-index:101;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:24px 24px;}
	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(0,0,0,.8); z-index:100; -webkit-backface-visibility:hidden;}
	ul#option li { }
 	ul#option li a {text-shadow:none;}

	#footer { padding:50px 0 20px 0;}
	#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;}
	
	h1 { font-size:18px; line-height:25px;}
	h2 { font-size:18px; line-height:25px;}
	h3 { font-size:16px; line-height:24px;}
	h4 { font-size:16px; line-height:24px;}
	p { font-size:16px; line-height:24px;}
	.top-wrap .small { font-size:13px;}

	/* toparea */
	.top-area { background: url("../images/top-bg-m.png") no-repeat top 40px center; background-size:contain; height:550px;}
	.top-area.part2 { height:300px;}
	.top-wrap { width:100%; background:none;}
	.top-wrap h1.big-title { padding-top:10%;}
	.nav { background:#888;}
	.nav a { font-size:15px; line-height:20px;}
	
	.author-flip .box { width:280px; padding:15px; margin:10px 5px; }
    .author-flip .box ol li,.author-flip .box p { font-size:15px;}
}

@media screen and (max-width: 768px) {
	.author-box { padding:15px;}
	.author-box .photo { width:100%; height:auto; margin:0 auto 10px auto; text-align:center;}
	.author-box .photo img { width:200px; height:200px}
	.author-box .txt { width:100%;}
	.author-box .left { float:none; margin-right:0;}
	.author-box .right { float:none;}
	.author-box h3 { text-align:center;}
	
	.author-link a { font-size:15px; line-height:20px; width:47%; margin:0 0.5%; height:100px; padding-top:50px;}
    
	.book-wrap .cover { display:block; width:150px; margin:0 auto;}
	.book-wrap .info { display:block; width:100%; margin:0; text-align:center;}
	
    .author-link2 a { font-size:14px; line-height:17px; width:45%; margin:0 0.5%; padding-left:1%; padding-right:1%; height:100px; padding-top:50px;}
    
}

@media screen and (max-width: 480px) {
    .top-area { height:460px;}
    .top-wrap h1.big-title { padding-top:15%;}
    .author-flip .box { height:auto;}
}