@charset "UTF-8";
html{ scroll-behavior: smooth;}
body{ font-family: source-han-serif-tc, serif; margin: 0;
font-weight: 400; font-size: 18px;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
*{ box-sizing: border-box;}

.bg1,.bg2{width:100%; position: fixed; height: 100vh;}
.bg1{background:url(images/bg.png) no-repeat center center/cover;opacity: 1; }
.bg2{background:url(images/bg2.png) no-repeat center center/cover;opacity: 0;}

h2{text-align: center;}
h2 img{ width:80%; max-width: 250px;}
section{ position: relative;}
.hero{  height: 100vh; max-height: 1080px; display: grid; align-items: center; justify-content: center;}
h1{ background:url(images/title.png) no-repeat center center/cover; height: 95vh; aspect-ratio: 1181/962; max-height: 962px;}
.content{ }
.rule{ background: url(images/page.png) no-repeat center center/cover; padding:90px 110px; aspect-ratio: 1304/807; margin: 0 auto; width:90%; max-width: 900px; position: relative;}
.rule:before{ content: ''; display: block; position: absolute; background:url(images/pen.png) no-repeat right top/cover; inset: 0 0 0 0;}

hgroup{ text-align: center; margin-top: 3em;}
hgroup p{ margin: -1em 0 2em 0;}
dl{ display: grid; grid-template-columns: 100px 1fr;position: relative;}
dt{ color:#949494;}
dt,dd{ margin: 10px 0;}
legend{ text-align: center;}
fieldset{ font-size: 0.9em; border:1px solid #949494; position: relative;}
dd b{ color:#8326da; margin: 0 3px;}

.tabs ul{ display: grid; grid-template-columns:repeat(4,1fr); list-style: none; gap:20px; margin:0 auto; padding:0; width:90%; max-width: 800px; font-family: source-han-serif-tc, serif;}
.tabs li{ text-align: center;}
.tabs a{ text-decoration: none; color: inherit;}
.tabs>ul li{ display: inline-block; border-radius: 20px; background:#f0fcff; padding:3px 20px; color:#333;}
.tabs>ul li.ui-tabs-active{ background: #8326da; color:#fff;}
.tabs>ul a{ display: block;}

.booklist{ display: grid; width:90%; max-width: 1095px; margin: 50px auto; grid-template-columns: repeat(5,1fr); gap:30px 20px;}
.book{ text-align: center; background:#fff; padding:5px;}
.book span{ display: block;}
.b-name{ line-height: 1.1;}
.b-author{ font-size: 0.8em; color:#999;}
.more{ grid-column:1/-1; background: #fff; text-align: center; padding:10px; border-radius: 10px; font-size: 0.8em; color: #333 !important;}

@media screen and (max-width:1440px) {
    .rule{padding:50px 120px;}
    
}
@media screen and (max-width:1080px) {
    .hero{ height: auto; display: block; padding:100px 0;}
    h1{ height: auto; width: 90%;  margin: 0 auto;}
}

@media screen and (max-width:768px) {
    .rule{padding:50px;}
    .rule:before{ display: none;}
    .tabs ul{ gap:10;}
    .booklist{ grid-template-columns: repeat(2,1fr);}

}
@media screen and (max-width:575px) {
    .tabs ul i{ display: block;}
    .tabs>ul li{ line-height: 1.1; padding:10px;}

}

/*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;}
.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:#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:#ebf8ff; 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;}
}