html{ scroll-behavior: smooth;box-sizing: border-box; overflow-x: hidden; }
*,*::before,*::after { box-sizing:border-box;}

body{ margin:0; padding:0;font-family: source-han-serif-tc, serif; font-weight: 300; font-style: normal; font-size: 20px;overflow-x: hidden;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
dd{ margin: 0;}
ol{ padding: 0 0 0 1em;}
h1,h2,h3,h4{ font-weight: 400; margin:0; position: relative; z-index: 2;}
em,i{ font-style: normal;}
sub{ vertical-align: text-bottom; font-size: 0.65em;}

h1{ text-align: center; width:95%; margin:0 auto; max-width: 786px; animation: fadeIn 1.5s;}
h2{ text-align: center; line-height: 1.15; font-size: 1.8em; letter-spacing: 2px; margin-bottom: 50px; }
h2 span{ display: inline-block; position: relative;}
h2 i{ display: block; font-size: 0.6em; letter-spacing: 0; color:#83add4;}
h2 strong{ color:#416b8d; font-weight: 700;}
h2 span:before,h2 span:after{content: ''; display: block; background:url(images/snowflake.png) no-repeat center center/contain; position: absolute;}
h2 span:before{ width:1em; height: 1em; top:10px; left: -1.3em;}
h2 span:after{ width:0.8em; height: 0.8em; top:-5px; right: -1em;}
h3{ font-size: 1.3em;}

section{ padding:100px 0;}

/**/
header{ position: absolute; inset: 0 0 0 0;}
.index{ background: url(images/page-hero.png) no-repeat center top/cover; padding:0 0 100px 0;}
.hero{ height: 100vh; display: grid; align-items: center;}
.booksinfo a{ text-decoration: none; color: inherit; text-align: center; }
.main{ width: 90%; max-width: 950px; margin: 0 auto; display: flex;}
.main-img{ width:55%;}
.main-txt strong{ font-size: 1em; color:#3057a7;}
.main-txt p{ font-size: 0.8em;}
.links h4{ text-align: center; width: 125px; font-size: 0.8em; padding:0 10px;}
.links{ display: flex; gap: 15px 0; width: 90%; max-width: 950px; margin: 0 auto 30px auto; font-size: 0.9em; align-items: center;}
.links a{ flex: 1;}
.links a:nth-of-type(n+2){ border-left: 1px solid #000;}
.border{ border: 1px solid #000; padding: 10px; display: block;width:90%; max-width: 950px; margin:30px auto; font-size: 0.9em;}
.wrap{  width:90%; max-width:850px; margin: 0 auto;}
.series{ padding:20px 50px 20px 0; background:#fff; box-shadow: 3px 3px 5px rgba(97, 120, 139, 0.322); max-width: 800px; display: grid; grid-template-columns: 300px 1fr;}
.series+.series{ margin-top: 30px;}
.series:nth-of-type(even){ margin-left: 50px;}
.series h4{ text-align: center; width:100px; color:#fff; font-size: 0.8em;}
.series p{ font-size: 0.9em; color:#54585f;}
.series .border,.series .links{ width:100%;}
ul.love{ list-style: none; padding: 0; color:#3d6385; font-size: 0.9em;}
ul.love li{ position: relative; padding-left: 20px;}
ul.love li:before{ content: 'ღ'; position: absolute; left: 0; top:0;}
.booksinfo h2:nth-of-type(2){ margin-top: 100px;}

/**/
.authorinfo{ background: linear-gradient(#fff,#bad3e9);}
.aboutauthor{ width:90%; max-width: 1000px; margin: 0 auto; display:grid; gap:20px; align-items: center; grid-template-columns: 300px 1fr;}
.about-img{ border-radius:200px; overflow: hidden;}
.about-img img{ display: block;}
.about-info{ font-size: 0.9em;}
.share{ display: flex; gap:5px;}
.share a{ text-decoration: none; color:#6b4b5f; border:1px solid #6b4b5f; padding:10px 20px;}
.share img{ height: 1.2em; vertical-align: text-bottom; margin-right: 5px;}
/**/
.activity{ background: url(images/page-activity.png) fixed center bottom/cover;}
.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;}
fieldset li{ margin-bottom: 10px;}
/**/
.bookfair{ padding:100px 0 0 0; background: url(images/page-bookfair.png) no-repeat center bottom/cover;}
.bookfair h2+p{ width:90%; max-width: 950px;}
.bookzone{ display: grid; grid-template-columns: repeat(4, 205px); gap:20px; justify-content: center; width:90%; margin: 0 auto 100px auto;}
.book{ text-decoration: none; color: inherit;}
.book span{ display: block; text-align: center;}
.b-name{font-family:source-han-sans-traditional, sans-serif; font-size: 0.9em;}
b{ font-size: 1.3em; color:#516477; font-weight: 700; margin: 0 3px;}
/**/
footer{ text-align: center; font-size: 14px; padding:20px;}

@media screen and (max-width: 1080px) {
	.hero{ height: auto; padding:100px 0;}
}
@media screen and (max-width: 768px) {
	body{ font-size: 18px;}
	.main{ flex-direction: column;}
	.main-img{ width:100%; text-align: center;}
	.series{ grid-template-columns: 1fr; padding:20px;}
	.series:nth-of-type(even){ margin:30px auto;}
	.aboutauthor{ grid-template-columns: 1fr;}
	.bookzone{ grid-template-columns: repeat(2,1fr);}
	.links h4{ width:80px; padding:5px 10px; line-height: 1.1;}
	.activity dl{ padding: 50px; grid-template-columns:1fr;}
}
@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; border-radius:50%; border:1px solid #000000;
	background:url(images/toparrow.png) no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/* po_bar */
#po_bar {  width:100%; margin:0 auto; height:25px; padding-top: 10px; position: relative; z-index:3;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:10px; right:20px; margin:0;}
.activity+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:#37528a; 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;}
}

@keyframes fadeIn {
	0%{ opacity: 0; transform: scale(0.9);}
	100%{ opacity: 1; transform: scale(1);}
}