@charset "UTF-8";
html{ scroll-behavior: smooth;}
body{ margin:0; background: url(images/content-bg.png) fixed center bottom/cover; font-size: 18px;font-family: source-han-sans-traditional, sans-serif;font-weight: 400;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
*{box-sizing: border-box;}
ul,ol{ padding-left: 24px;}
sub{vertical-align: baseline; font-size: 0.6em;}
a{ color: inherit;}

header{ background:url(images/header.png) no-repeat center top/cover; height: calc(100vh + 235px); max-height:1270px; padding-top: 100px;}
h1{ background:url(images/h1.png) no-repeat center center/contain; max-width:1260px; width:50%; margin:0 auto;}
h1:before{ content: ''; display:block;padding-top: 40%;}

nav{ position: fixed; inset: 50% 20px auto auto; z-index: 10; transform: translate(0 , -50%);font-family: source-han-serif-tc, serif; }
nav ul{ list-style: none; margin:0; padding: 0; text-align: right;}
nav a{ text-decoration: none; display: inline-block; transition: all .5s; color:#000; background: #fff; padding: 2px 5px; margin:3px 0;}
nav a.active{ transition: all .2s; font-size: 1.1em; background:#000; color:#fff;}
nav a.linksto{ background:linear-gradient(135deg,#b6dafe,#97cbff);}


.section1{ background:#fff url(images/cloud.png) center top/cover; margin-bottom:300px;}
.wavy .wrapbox{ position: relative; padding:65px 0;}
    .wavy .wrapbox:before{ content: ''; display: block; width:100%; height: 235px; background:url(images/wavybg.png) no-repeat center top/cover; position: absolute; top: -235px;}
    .wavy .wrapbox:after{ content: ''; display: block; width:100%; height: 235px; background:url(images/wavybg.png) no-repeat center bottom/cover; position: absolute; bottom: -235px;}

h2{ text-align: center; font-family: source-han-serif-tc, serif; font-weight: 400;}
    h2 span{ display: inline-block; font-size: 1.4em; line-height: 1; padding:0 5px 3px 5px;}
    h2 b{ display: block; font-size: 0.75em; line-height: 1.1; font-weight: normal;}
        h2.type1 span{ background:#000; color:#fff; }
        h2.type1 b{ color:#000;}
        h2.type2 span{ background:#fff; color:#000}
        h2.type2 b{ color:#fff;}
        h2 strong{ font-weight: normal; color:#b55bb1;}

.booksinfo{ width:90%; max-width: 950px; margin:0 auto; display: grid; grid-template-columns:300px 1fr; gap:50px; align-items: center;}
p.strong{ font-size: 1.1em; font-family: source-han-serif-tc, serif; font-size: 1.1em; color:#0f6fcf;}
p.highlight{ color: #777777; font-family: source-han-serif-tc, serif;}
    .highlight b{ font-weight: normal; display: inline-block; background:#777777; border-radius: 15px; color:#fff; padding:1px 10px; font-size: 0.9em;}
    .highlight em{ font-size: 1.1em; margin: 5px; font-style: normal;}
.btn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 0; width:90%; max-width: 950px; margin:35px auto 0 auto;}
.btn a{ display: block; text-align: center;  color:#000; text-decoration: none;} 
.btn a:nth-of-type(n+3){border-left: 1px solid #000;}

/* 第一排的 item 滿版 */
.item-full { grid-column: 1 / -1;  border:1px solid #000; color:#000; padding: 15px; }

.gift{ display: grid; grid-template-columns: 1fr 300px; gap:20px; width:90%; max-width: 1000px; margin: 100px auto 0 auto; background: linear-gradient(#dbc0f1,#b6dafe);  padding:30px 100px;  border-radius: 20px; position: relative; align-items: center;}
.gifttxt{color:#3f2087;}
.giftimg{ text-align: center; color:#0951a7;}
    .gift h3{ font-weight: normal; display: inline-block; background:#fff; color:#7251b4; font-size: 0.9em; margin: 10px 0; padding:0 5px;}
    .gift p{ margin:0; font-size: 1.2em;}
    .gift span{ display: block; font-size: 0.7em;}
    .gift a{ text-decoration: none; display: inline-block; padding:5px 20px; border:1px solid #3f2087; margin:10px 0 0 0;}

.letter{ background: url(images/letter.png) no-repeat center center/contain; width:835px; height: 663px; padding: 100px; margin: 50px auto 150px auto;font-family: source-han-serif-tc, serif;line-height: 2; font-size: 1.1em;}
.sign{ background:url(images/溫郁芳.png) no-repeat right top/contain; height: 2em; max-height: 57px; margin: 1.5em 0 0 0;}

.section3 .wrapbox{ position: relative; width:80%; margin:0 auto; max-width: 1080px;}
.authortxt{padding:50px 100px 50px 50px; background:#fff; width:85%;}
    .authortxt ul{ list-style: none; margin:0; font-weight: 500;}
    .authortxt li{ margin-bottom: 5px;}
    .authortxt li:before{ content: '✨'; position: relative; margin-left: -25px;}
    .authortxt em{ font-style: normal; font-size: 1.1em; color:#e753bf;}

.authorimg{ position: absolute; inset:-10% -100px -5% auto; z-index: 5;}
.publishedinfo{ background:#f5f5f5; padding: 20px; font-size: 0.9em; width:80%; margin-bottom: 20px;}

.link-btn{ display: grid; grid-template-columns: repeat(3, 1fr); gap:10px; width:80%;}
    .link-btn a{ border: 1px solid #000; text-decoration: none; color:#000; padding: 10px 20px; text-align: center;}
    .link-btn img{ vertical-align: middle; height:20px;}

.section4{ padding-top: 300px; margin-bottom:300px;}
.section4 .wrapbox{ background: #fff;}
dl{ display: grid; grid-template-columns: 90px 1fr; gap:30px 20px; width:90%; max-width: 800px; margin:0 auto;}

dt{ border-right: 1px solid #000; font-weight: 500;}
dd{ margin: 0;}

.award{ display: grid; grid-template-columns: repeat(3, 1fr);}
.award span{ display: block; text-align: center;}

fieldset{ border: none; width:85%; margin: 30px auto; background:#f5f5f5; padding:20px 10px; font-size: 0.9em;}
legend{ display: contents;}
fieldset ol{ margin:5px 0 0 0;}

.books{ display: grid; grid-template-columns: repeat(4, 205px); gap:20px; justify-content: center; width:90%; margin: 0 auto 100px auto;}
.books a{ text-decoration: none; text-align: center; background:#fff; padding:5px; color:#000;}
.booksname{font-family: source-han-serif-tc, serif; }
.books .tags{ margin:5px;}
.books .tags span{ display: inline-block; font-size: 0.7em; background:#f5f5f5; padding:2px; color:#a09595;}

footer{ font-size: 14px; color:#a6c2de; text-align: center; padding: 10px 0;}

@media screen and (max-width:1280px){
    header{ height: calc(100vh + 200px); }
    h1{ width:70%;}
    .wavy .wrapbox{  padding:0px;}
        .wavy .wrapbox:before{height: 200px;  top: -200px;}
        .wavy .wrapbox:after{height: 200px; bottom: -200px;}
    .gift{ margin:180px 0;}

}

@media screen and (max-width:1000px){
    nav{ background: #fff; inset: auto 0 0 0; transform: unset;}
    nav ul{ text-align: center; display: grid; grid-template-columns: repeat(5 , 1fr);line-height: 1.1;}
    nav a{ margin: 0; width:100%; padding: 5px 0;}
    nav a.linksto{ position: fixed; bottom:60px; right: 10px; width:80px; height: 80px; border-radius: 50px; padding:12px 0 0 0;}

}

@media screen and (max-width:800px) {
    .br{ display: block;}
    .bodybg{ content: ''; display: block; position: fixed; inset:0 0 0 0; background: url(images/content-bg.png) no-repeat center bottom/cover; }

    body{ font-size: 16px;}
    header{ height: calc( 70vh + 100px); padding-top: 80px; position: relative;}
    h1{ width:90%; background:url(images/h1-mobile.png) no-repeat left top/cover;}
    h1:before{ padding-top:48%;}
    
    section{ position: relative;}

    .section1{ margin-bottom: 200px;}
    .booksinfo{ grid-template-columns: 1fr; justify-items: center; gap:20px;}
    .bookimg{ width:300px;}
    .wavy .wrapbox:before{ height: 100px; top:-100px;}
    .wavy .wrapbox:after{ height: 100px; bottom:-100px;}

    .gift{ margin: 50px auto; align-items: end; padding:20px 30px; grid-template-columns:1fr 1fr; }
        .gift a{bottom:20px; left: 30px;}

    .letter{ width:85%; height: auto; background-size:100% 100%; padding:20px 60px 50px 60px; font-size: 1em;}

    .section3 .wrapbox{background-color: #fff;}
    .authorimg{ position: relative; inset: auto; width:300px; margin: 0 auto; padding: 20px 0 0 0;}
    .authortxt{ width:100%; padding: 30px; margin-top: -30px;}
    .publishedinfo{ width:100%;}
    .link-btn{width:100%; grid-template-columns: 1fr;}

    .section4{ padding-top: 200px; margin-bottom: 200px;}
    .books{ grid-template-columns: repeat(2,1fr); }

    footer{ padding-bottom: 80px;}
}
@media screen and (max-width:500px){
    .award{ grid-template-columns: 1fr; gap:20px;}
}

/*miniheader*/
.logo{ position: absolute; top:0; left: 0;}
.sns{ position:absolute; inset: 0 0 0 auto; padding:10px; text-align: right; width:50%; max-width:300px;}
.sns.active{ background:#000000cc; position: fixed; z-index: 15;}
.sns img{ height: 35px;}
#option{ display: none; text-align: center; list-style: none; margin: 0; padding: 0; font-size:16px;}
#option li{ display: block; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}

@media not all and (min-resolution:.001dpcm) { @media {
    .bodybg{ content: ''; display: block; position: fixed; inset:0 0 0 0; background: url(images/content-bg.png) no-repeat center bottom/contain; }
    header{ position: relative;}
    section{ position: relative;}
}}