html{ scroll-behavior: smooth;}
body{ margin:0; padding:0;font-family: "source-han-serif-tc", serif; font-weight: 300; }
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;}

nav{ display: none; position: fixed; top:0; z-index: 10; background: #fff; width:100%;}
nav ul{ list-style: none; padding:0; display: grid; grid-template-columns: repeat(3,1fr); max-width: 800px; margin:0 auto;}
nav li{ text-align: center;}
nav a{ display: block; text-decoration: none; color:#000; font-size: 1.5em; padding:10px 0;}

header{ background: url(images/bg-header.png) no-repeat center bottom/cover; height: 100vh; max-height: 1180px; padding-bottom: 65px;}
header hgroup{ text-align: center; padding-top:7vh; font-family: source-han-sans-traditional, sans-serif; }
h1{font-size: 3.5em; color:#37528a; line-height: 1.1;}
h1 span{ font-family: itc-bradley-hand-std, sans-serif; font-weight: 700; font-style:italic; font-size: 1.3em;}
header p{ font-size: 1.8em; color:#6b4b5f; line-height: 1.2; margin: 0;}

section h2{ text-align: center; margin: 2em 0 1em 0;}

#section1{ position: relative; margin-top: -130px; padding:130px 0 180px 0;}
    #section1:before{ content: ''; display: block; background:url(images/bg-section1.png) no-repeat center top; position: absolute; inset: 0 0 50% 0;}
    #section1:after{ content: ''; display: block; background:url(images/bg-section1.png) no-repeat center bottom; position: absolute; inset: 50% 0 0 0;}

#section1 .wrap{ position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap:30px; width:95%; max-width: 1440px; margin: 0 auto;}
.book{ background: #fff; border-radius: 5px; box-shadow: 0 0 5px #0000001c; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows:1fr auto auto; gap:10px; padding:50px 20px; align-items: center;}
    .book:nth-of-type(3){ grid-column: 1 / -1;}
.book1h3{ font-size: 1.5em; color:#000;}
    .b-img h3{ margin-top: 10px;}
.book h4{ font-size: 1em; margin:1em 0;}
    .book1 h4{ color:#dfa04c;}
    .book2 h4{ color:#f196af;}
    .book3 h4{ color:#6bb447;}
.book h4 strong{ font-weight: normal; font-size: 1.3em;}
.book a{ flex: 1 1 25%; color: #000; text-align: center; text-decoration: none;}
.linkstopopo{ display: flex; gap: 10px; grid-column: 1 / -1;}
.b-img{ text-align: center;}
.b-img img{ display: block; margin:0 auto;}
.b-txt p{ color:#333;}
.b-txt em{ font-size: 1.1em;}
.b-txt i{ color:#000;}
.b-links{ display: flex; gap: 10px; grid-column: 1 / -1; margin-top: 1em;}
.b-links a+a{ border-left:1px solid #000;}
.b-info{ grid-column: 1 / -1; text-align: center;}
.b-info h4{ display: inline-block; border:1px solid #000; color:#000; padding:0 10px; font-size: 1.1em;}
.linkstopopo a{ border-radius: 5px; padding:10px 0;}
    .book1 .linkstopopo a{ background:#fffdc8;}
    .book2 .linkstopopo a{background:#ffdee7 ;}
    .book3 .linkstopopo a{background: #e8f3f7;}

.note{ display: inline-block; padding: 0 10px;}
    .book1 .note{ color:#dfa04c; border:1px solid #dfa04c;}
    .book2 .note{ color:#f196af; border:1px solid #f196af;}
    .book3 .note{ color:#6bb447; border:1px solid #6bb447;}

#section2{ background: url(images/bg-section2.png) no-repeat center bottom fixed; margin-top: -120px; padding:120px 0;}
#section2 hgroup{ text-align: center; margin:50px 0;}
#section2 hgroup p{ font-size: 1.3em;}
.group{ display: grid; grid-template-columns: repeat(4,1fr); gap:20px; width:95%; margin: 0 auto;}
.author{ background: #fff; border-radius: 5px; padding:50px 20px;}
.a-img{ border-radius: 300px; overflow: hidden; max-width: 200px; margin: 0 auto;}
.a-img img{ display: block;}
.a-name{ font-size: 1.5em; color:#6b4b5f; text-align: center; margin: 0.5em 0; font-weight: 400;}
.author a{ display: inline-block; padding:2px 5px; border:1px solid #6b4b5f; color:#6b4b5f; text-decoration: none;}
.author a img{ height: 1.5em; vertical-align:bottom;}

.video{ display: grid; justify-self: center; grid-template-columns: repeat(4,1fr); gap:20px;}
.video video{width:100%; max-width: 267px; aspect-ratio: 267/476;}

#section3{ background:url(images/bg-section3.png); padding:50px 0;}
#section3 .wrap{ width: 90%; max-width:1000px; margin: 100px auto 50px auto; background: #fff; position: relative; box-sizing: border-box; padding:0 50px 20px 50px;}
#section3 .wrap:before{ content: ''; display: block; height: 50px; background:url(images/paper.png) repeat-x center top; position: absolute; top: -50px; left: 0; width:100%;}
#section3 dl{ display: grid; grid-template-columns:5em 1fr; gap:20px 10px; font-size: 1.1em;}
#section3 dt{ font-weight: 400;}
fieldset{ width:90%; max-width: 1000px; margin: 50px auto; border: 1px solid #000; box-sizing: border-box;}
legend{text-align: center; font-size: 1.1em; font-weight: 400;}

footer{ text-align: center; font-size: 14px;}

@media screen and (max-height:680px) {
    header hgroup{ padding-top: 5vh;}
    h1{font-size: 3em; color:#37528a; line-height: 1.1;}
    header p{ font-size: 1.3em;}

    
}

@media screen and (max-width:1200px) {
    #section1 .wrap{grid-template-columns: 1fr;}
    .book{ grid-template-columns: 1fr;}
    .group{ grid-template-columns: repeat(2,1fr);}
    .video{ grid-template-columns: repeat(2,1fr);}

}


@media screen and (max-width:768px) {
    .group{ grid-template-columns:1fr;}
    #section3 dl{ grid-template-columns:1fr;}

    #section1{ background: linear-gradient(#dad4c200 10% , #dad4c2 10% , #e8e0d4 90% , #e8e0d400 10%);}

    .video{ grid-template-columns:1fr;}
}

/*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;}
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 (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; text-align:left; width:100%; margin-top:0; position:absolute; padding:11px 25px 15px 25px; box-sizing: border-box; top:0; right:0; left:0; background:#fff; z-index:100; -webkit-backface-visibility:hidden;}
 	ul#option li a {text-shadow:none;}

    /*TOP*/
	#gotop{ bottom:10px; right:10px;}
	#gotop a{ width:35px; height:35px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
}