@charset "UTF-8";
html{ scroll-behavior: smooth;}
body{ margin: 0; padding: 0; font-size: 20px; background: #feebed; font-family:"source-han-serif-tc", sans-serif;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
h2{text-align: center; font-size: 3em; line-height: 1.1; margin: 0 0 50px 0; font-family: "source-han-serif-tc", sans-serif; font-weight: 700; }
h2 i{ display: block; font-size: 0.6em; margin-top: -0.2em; color:#e28895; font-weight: normal;font-family: r41-alfabeta-72, sans-serif;}
h2 span{ display: inline-block; padding:0 80px;position: relative;}
h2 span:before,h2 span:after{ content: ''; display: inline-block; background: url(images/H2-heart.png) no-repeat center center/contain; position: absolute; width:70px;}
h2 span:before{ top:0; left: 0; bottom:0;}
h2 span:after{ top:0; right: 0; bottom:0;}

/*header*/
header{background:url(images/ribbonB.png) no-repeat center center/cover; position: relative; height: 100vh; max-height: 1080px;}
header:after{ content: ''; display: block; background:url(images/ribbonT.png) no-repeat center center/cover; inset: 0 0 0 0; position: absolute;}
h1{ width:52%; margin:0 auto;}

section{ padding:100px 2.5%;}
.red{color:#dd257d;}
/*作品回顧排行榜*/
.WR{ background: url(images/page-bg.png) repeat-y center center;}
.RV-ranks{ background: #fff; border-radius: 15px; max-width: 1155px; margin:0 auto; overflow: hidden; font-family:  "source-han-serif-cn-subset", sans-serif; padding-bottom: 30px;}
.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:#f5c9ce; color:#c97884;}
ul.main-tab a{ display: block; font-size: 1.35em; padding:20px 0;}
    ul.main-tab li.ui-state-active{ background:#fff; color:#dd257d;}
ul.sub-tab{ max-width: 420px; margin: 30px auto;}
ul.sub-tab li+li{ border-left:1px solid #a1a1a1;}
ul.sub-tab a{ display: block; font-size: 1.2em;}
    ul.sub-tab li.ui-state-active{ color:#ed5499;}

.note{ text-align: center; margin-bottom: 20px;}
.bookwrap{ display: grid; grid-template-columns: repeat(5, 195px); gap:20px; padding: 20px 50px; counter-reset:rank;}
.book{ position: relative; text-align: center;}
    .book:after{ counter-increment: rank; content:counter(rank); display: block; position: absolute; top:0; left: 0; color:#fff; font-size:14px; width: 16px; line-height: 16px;}
    .book:before{ content: ''; display: block; width:0; height: 0; border:16px solid #000; border-right-color: transparent; border-bottom-color: transparent; position: absolute; top:0; left: 0;}
    .book:nth-of-type(1):before{ border-top-color: #dd5b74;border-left-color: #dd5b74;}
    .book:nth-of-type(2):before{ border-top-color: #e87cb0; border-left-color: #e87cb0;}
    .book:nth-of-type(3):before{ border-top-color: #efa0bb;border-left-color: #efa0bb;}
.book span{ display: block;}
/*.bookimg{ padding-top: 141%; background: #eee;}*/
.bookauthor{ font-size: 0.9em;color:#e28895;}


/*精選主題熱銷榜*/
h2:nth-of-type(2){ margin-top: 100px;}
.BS-ranks{ display: grid; grid-template-columns: repeat(3, 1fr); gap:30px; font-family:  "source-han-serif-cn-subset", sans-serif;}
.rank{background: #fff; border-radius: 15px; padding:0 20px 20px 20px;}
.rank ol{list-style: none; counter-reset:rank; padding: 0;}
.rank li{ padding-left:32px; position: relative;}
    .rank li+li{ margin-top: 0.9em;}
    .rank li:before{ counter-increment: rank; content:counter(rank); display: inline-block; width:1.35em; height: 1.35em; text-align: center; line-height: 1.35; background:#000; border-radius: 20px; color:#fff; position: absolute; top:0; left: 0;}
    .rank li:nth-of-type(1):before{ background:#dd5b74;}
    .rank li:nth-of-type(2):before{ background:#e87cb0;}
    .rank li:nth-of-type(3):before{ background:#efa0bb;}
.rank a{ text-decoration: none; color: inherit;}
.rank h3{ border-bottom: 1px solid #efa0bb; padding-bottom: 10px;}

/*生日加碼抽PO幣*/
.HB{ background: #fff url(images/coins.png) no-repeat center center;}
.CP-txt{ text-align: center; font-size: 1.35em; margin:0 ;}
.CP-txt b{ font-size: 1.5em; font-weight: 700;}
.CP-detail{ color:#9f004c; text-align: center; margin:0 0 50px 0;}
.CP-detail p{ margin: 10px 0; display: inline-block; text-align: left;}
fieldset{ border: 1px solid #a1a1a1; width:80%; margin:0 auto; font-size: 0.95em;}
legend{ text-align: center; padding: 0 20px; font-weight: bold;}
fieldset ol { padding-left: 20px;}
fieldset li+li{ margin-top:10px;}
fieldset a{ color:#000;}

/*好書應援賽*/
.CP{ background: #ff9bb6 url(images/ballon.png) repeat-y center top;}
.CP h2 span:before,.CP h2 span:after{background: url(images/H2-heartL.png) no-repeat center center/contain;}
.CP h2 i{ color:#feebed;}
.h2-describ{ font-size: 1.35em; text-align: center; margin: -30px 0 20px 0;}
.h2-describ b{ font-weight: 700;}
.CP h3{ font-size: 1.8em; text-align: center; }
.CP h3 span{border-top:2px solid #f0327f; border-bottom:2px solid #f0327f; display: inline-block; color:#e30760; line-height: 1; padding:10px 20px;}
.activity{ background: #ffdbe8; border-radius: 15px;font-size: 1.2em; padding:20px 50px; box-sizing: border-box; max-width:1080px; margin:0 auto ;}
dl{ display: grid; grid-template-columns: 100px 1fr; gap: 10px ;}
dt{ font-weight: 700;}
dd{ margin: 0;}
.AC-ranks{ margin: 50px 0; text-align: center;}
.AC-ranks ol{ display: grid; grid-template-columns: repeat(5, 1fr); gap:10px; list-style: none; padding:0;}
.AC-ranks li{ border-radius: 15px; background: linear-gradient(#ffffff,#ffcddf); padding:20px;}
.position{ height: 5em; display: block; margin-bottom: 20px;}
    .position:after{color:#000; font-weight: 700; content: 'TH';}
    li:nth-of-type(1) .position:after{ content: 'ST'; color:#ec0673;}
    li:nth-of-type(2) .position:after{ content: 'ND'; color:#ec0673;}
    li:nth-of-type(3) .position:after{ content: 'RD'; color:#ec0673;}
.QA{ max-width: 600px; margin:0 auto;}
details{ border-bottom: 1px dotted #000;}
details[open] summary ~ *{ animation:open 0.3s ease-in-out;}
details summary::-webkit-details-marker{ display: none;}
details summary{ width:100%; padding:0.5em 1.75em 0.5em 0;  position: relative; cursor: pointer; list-style: none; font-size: 1.1em; box-sizing: border-box;}
    details summary:after{ content:'+'; font-size: 1.75em; line-height: 0;  right:0px; top:0.65em; font-weight: 100; position: absolute; transform-origin: center; transition: 0.2s;}
    details[open] summary:after{ transform:rotate(45deg); font-size: 2em; top:0.55em; right: -3px;}
details p { color:#fff; margin: 0 10px 20px 10px;}

@media screen and (max-width:1440px) {
    body{ font-size: 18px;}
}

@media screen and (max-width:780px) {
    body{ font-size: 16px;}
    section{ padding:50px 2.5%;}

    header{ height: auto;}
    h1{ width: 80%;}
    h2{ font-size: 2em; margin: 0 0 30px 0;}
    h2 span{ padding: 0 50px;}
    h2 span:before, h2 span:after{ width:50px;}
    h2:nth-of-type(2){ margin: 50px 0 0 0;}

    .bookwrap{ display: block; display: grid; grid-template-columns:repeat(2,1fr); }

    .BS-ranks{ grid-template-columns:1fr; }

    .AC-ranks ol{ grid-template-columns:1fr;}

    .CP-txt{ font-size: 1em; margin: 0 0 30px 0;}
    }
    
    /***********POBAR***********/
#po_bar{ 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; font-family: "source-han-sans-traditional", sans-serif;}
.menu{ text-align: right; flex: 1;z-index: 20; position: relative;}
.btn-menu{display:inline-block; line-height: 44px; width:25px;}
.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:#2d1616f0; width:50%; max-width:300px; height: 100vh; box-sizing: border-box; z-index: 15;}
#option li{ display: block; text-align: center; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ width:25px;}
.menu.show #option{display: block;}
#gotop{ position:fixed; bottom:20px; right:20px; cursor: pointer; z-index:99;}

/*************/
@media screen and (max-width:468px){
	#po_bar{ padding:5px; position: relative;}
	#option{max-width:auto;}
	#gotop{ bottom:20px; right:20px;}
	
}