@charset "UTF-8";
html{ scroll-behavior: smooth;}
body{ font-family: source-han-serif-tc, serif; margin: 0;
font-weight: 400; font-size: 20px;font-family: source-han-serif-tc, serif; font-weight: 300; font-style: normal;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
a{ color: inherit;}
*,*::before,*::after { box-sizing:border-box;}

.flex{ display: flex;}

.index{ overflow: hidden; position: relative;}
.hero{ height: 100vh; max-height: 1080px; position: relative;}
h1{ height: 80vh; margin: 10vh 0; text-align: center; width:60%;}
.bookinfo { position: relative;}
#bgImg{ position: absolute; top:0; left: 0; z-index: 0; width:100%; height: auto; display: block; will-change: transform; pointer-events: none;}

.bookinfo>[class^=info]{ display: grid; grid-template-columns: 300px 1fr; gap:0px 50px; padding:50px; background:#fff; width:90%; max-width: 900px; margin: 30px auto;}
.info-txt p{ font-size: 0.8em;}
.info-txt strong{ font-size: 1.1em;}
.info-links{ grid-column: -1/1;}
.info-links a{ text-decoration: none; text-align: center;}
.read{ border: 1px solid #000; padding: 10px; display: block;width:90%; max-width: 950px; margin:30px auto;}
.links{ display: flex; gap: 15px 0; font-size: 0.9em;}
.links a{ flex: 1;}
.links a:nth-of-type(n+2){ border-left: 1px solid #000;}
ul.star{ list-style: none; padding: 0; color:#3d6385; font-size: 0.9em;}
ul.star li{ position: relative; padding-left: 20px;}
ul.star li:before{ content: '★'; position: absolute; left: 0; top:0;}

h2{ margin:0 auto 30px auto; text-align: center; width:85%; max-width: 480px;}
hgroup p{ margin: -1em 0 2em 0; text-align: center; }
hgroup b{  color:#f56200; font-weight: 600;}
.author{ background:linear-gradient(#fffbef, #fff4d3); padding:100px 0;}
.aboutauthor{ width:90%; max-width: 1000px; margin: 0 auto; display:grid; gap:20px; align-items: center; grid-template-columns: 300px 1fr; align-items: center;}
.about-img{ border-radius: 200px; overflow: hidden;}
.about-info p{ font-size: 0.9em;}
.share{ display: flex; gap:5px; vertical-align: center;}
.share a{ text-decoration: none; color:#000; border:1px solid #000; padding:10px 20px; text-decoration: none;}
.share img{ height: 1.2em; vertical-align: text-bottom; margin-right: 5px;}

.activity{ background: url(images/bg2.jpg) fixed center center/cover; padding:100px 0;}
.activity dl{ position: relative; display: grid; grid-template-columns:5em 1fr; gap:20px 10px; width:80%; max-width: 800px; padding:50px 100px; box-sizing: border-box; margin:0 auto 50px auto; background:#ffffffb9;}
.activity dt{ font-weight: 400;}
.activity dd{ font-size: 0.9em;}
fieldset{ font-size: 0.8em; font-family: source-han-sans-traditional, sans-serif; font-weight: 100; width:85%; max-width:900px; margin: 0 auto; border: 1px solid #000;}
fieldset li{ margin-bottom: 10px;}
legend{ text-align: center; font-weight: bold;}

.bookfair{ padding:100px 0; background:url(images/bg3.jpg) fixed center center/cover;}
.booklist{ display: grid; grid-template-columns: repeat(5,1fr); gap:30px 20px; max-width: 1440px; width:95%; margin: 0 auto;}
.book{ text-decoration: none; text-align: center; color:#000;}
.book span{ display: block;}

@media screen and (max-width: 1080px) {
	.hero{ height: auto; padding:100px 0;}
	h1{ width:80%; margin: 0 auto;}
}
@media screen and (max-width: 768px) {
	body{ font-size: 18px;}
	.bookinfo>[class^=info]{grid-template-columns: 1fr;}
	.aboutauthor{ grid-template-columns: 1fr;}
	.booklist{ grid-template-columns: repeat(2,1fr);}
	.activity dl{ padding: 50px; grid-template-columns:1fr;}
	.info-img,.about-img{ width:60%; margin: 0 auto;}
	.author h3{ text-align: center;}
}
@media screen and (max-width:480px) {
	body{ font-size: 16px;}
}

/*TOP*/
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/* po_bar */
#po_bar {  width:100%; margin:0 auto; height:25px; padding-top: 10px; position:absolute; z-index:3; top:0; left: 0;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:10px; right:20px; margin:0;}
.active+ul#option{ display: block;}
ul#option li { display:inline-block; font-size:15px; margin-left:10px; vertical-align:middle; }
ul#option li img { vertical-align:middle; height: 18px;}
ul#option li a { color:#000; text-decoration: none;}
ul#option li a:hover { text-decoration:underline;}
.btn-menu { display:none;}
@media screen and (max-width: 1000px) {
    .logo{ left:10px; top:3px;}
	.logo img { width:80px; height:34px;}
	.btn-menu { display:block; width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(images/icon-menu.png) no-repeat center; background-size:32px 32px; z-index:101;}
	.btn-menu.active{ background:url(images/icon-xx.png) no-repeat center; background-size:32px 32px;}
	ul#option { display:none; margin:0; position: fixed; right: 0; top:0; padding: 50px 5px 20px 5px;  background:#c5c9ce; width:50%; max-width:300px; height: 100vh;}
 	ul#option li{ display: block; text-align: center; margin: 20px 0;}
	ul#option li a {text-shadow:none;}

    /*TOP*/
	#gotop{ bottom:50px; right:10px;}
	#gotop a{ width:35px; height:35px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
}