@charset "utf-8";
html{ scroll-behavior: smooth;}
body{ margin: 0; background:#f4e44d; font-size: 20px; font-family: "source-han-sans-traditional", sans-serif;
font-weight: 400;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}

header{ background:url(images/header.png) no-repeat center top; min-height: 100vh; max-height: 1080px; padding:50px 0 165px 0; display: grid; place-items: center;}
h1{ margin:0 auto; position: relative;}
    .firework1{ background: url(images/firework.png) no-repeat center center/contain; position: absolute; inset: 0 0 0 0; animation: firework 2s infinite;}
    .firework2{ background: url(images/firework2.png) no-repeat center center/contain; position: absolute; inset: 0 0 0 0; animation: firework 2.5s infinite;}
    .firework3{ background: url(images/firework3.png) no-repeat center center/contain; position: absolute; inset: 0 0 0 0; animation: firework 2.2s infinite;}
@keyframes firework {
  0% { opacity: 0;}
  70%{opacity: 1;}
  100% {opacity: 0;}
}
h1 img{ width:55%;}
.h-describe{ color:#003075; font-size: 2em; margin: -1em 0 0.5em 0; line-height: 1.2;}
.h-txt{ color:#474747; font-size: 1.5em; line-height: 1.2;}
hgroup{ text-align: center;width:100%;}

.rule{ background: #fff url(images/confetti.png) no-repeat center top; position: relative;}
.rule .content{ max-width: 1200px; margin:0 auto; padding:12% 5%;}
h2{ background: url(images/ribbon-title.png) no-repeat center top/contain; padding-top: 19%; margin: 0;width: 100%; position: absolute; transform: translate(0 , -45%);}
dl{ display: grid; grid-template-columns: 100px 1fr;}
dt{ font-weight: 700;}
dl ol{ padding-left:1.2em; list-style: none; counter-reset: number;}
dl ol li{ position: relative;}
dl ol li:before{ counter-increment:number; content: counter(number); display: inline-block; height:1.2em; width:1.2em; font-size: 0.85em; line-height: 1.2em; background:#0847a3; border-radius:20px; color:#fff; text-align: center; position: absolute; left: -1.3em; top:5px;}
.ribbon{ background: url(images/ribbon.png) no-repeat center top/contain; width: 100%; position: absolute;transform: translate(0 , -45%);}
.ribbon:after{content: ''; display: block; padding-top: 19%;}
legend{ text-align: center;}
fieldset a{ color:#ff2e92;}

.booklist{ padding: 13% 5% 50px 5%;}
.tabs ul{ list-style: none; display: flex;  margin: 0; padding: 0;}
.tabs li{flex: 1; text-align: center; }
.tabs a{ text-decoration: none; color: inherit;}
ul.main-tab{ background:#b3d2ff; color:#0847a3;}
ul.main-tab a{ display: block; font-size: 1.35em; padding:20px 0;}
    ul.main-tab li.ui-state-active{ background:#fff; color:#3880e9;}

[id^=tab]{ display: grid; grid-template-columns: repeat(5,1fr); gap:20px; background: #fff; padding:30px; justify-items: center;}
.book{ text-align: center;}
.book span{ display: block;}
.bookauthor{ font-size: 0.9em; color:#474747;}

@media screen and (max-width:1440px) {
    header{ background-size: cover;}
    .h-describe{ margin: -0.5em 0 0.5em 0;  font-size: 1.8em;}
    .h-txt{ font-size: 1.3em;}
}

@media screen and (max-width:1080px) {
    body{ font-size: 18px;}
    header{ background:url(images/header_m.png) no-repeat center top/cover; min-height: 400px; height: auto; padding: 0;}
    h1{ background: none;}
    hgroup{ width:85%; height: auto; padding: 100px 0;}
    .h-describe{ font-size: 1.2em; margin: -0.5em 0 1em 0;}
    .h-txt{ font-size: 1em;}

    [id^=tab]{ grid-template-columns: repeat(4,1fr); }
}
    
@media screen and (max-width:540px) {
    h1 img{ width:80%;}
    h2{background-size:640px 120px; height: 120px; padding-top: 0;}
    .ribbon{background-size:640px 120px; height: 120px;}
    .ribbon:after{padding-top: 0;}
    .rule .content{  padding:15% 5%;}
    .booklist{ padding: 20% 5% 50px 5%;}

    ul.main-tab a{font-size: 1.1em; }

    [id^=tab]{ grid-template-columns: repeat(2,1fr); }
}

/***********POBAR***********/
.pobar{ display:flex; padding: 5px 15px;  width:100%; box-sizing: border-box; font-size:16px; font-weight: 500; position: absolute; top:0; left: 0; z-index: 10;}
.menu{ text-align: right; flex: 1;z-index: 20; position: relative;}
.btn-menu{display:inline-block; line-height: 44px; width:25px; margin:5px 0 0 0;}
.btn-close{ position:absolute; top:8px; right: 15px;}
.logo{width:80px;}
#option{margin:0; display: none; position: fixed; right: 0; top:0; transition: all 0.5s; padding: 50px 5px 20px 5px;  background:#03253ddd; width:50%; max-width:300px; height: 100vh; box-sizing: border-box; z-index: 15; box-shadow: -5px 0 10px #0000002e;}
#option li{ display: block; text-align: center; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ width:25px; margin:0 auto;}
.menu.show #option{display: block;}
#gotop{ position:fixed; bottom:20px; right:20px; cursor: pointer; z-index:99;}

/*************/
@media screen and (max-width:468px){
	.pobar{ padding:5px; margin-bottom:25px;}
	.logo{width:65px;}
	#gotop{ bottom:20px; right:20px;}
	
}