body {
  color: #111
}

a {
  color: #7d5f49;
  text-decoration: none;
  line-height: 180%;
}

a:hover {
  color: #d83800
}

em {
  font-style: normal;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bg {
  margin: 0;
  padding: 0;
  background: #d9ae97 url(a/bg.jpg) no-repeat top left;
  background-size: cover;
}

#header {
  max-width: 1200px;
  margin: 0.5em auto 0;
  text-align: right;
  color: gray
}

#book {
  position: absolute;
  left: 50%;
  top: 3%;
  margin-left: -283px;
  width: 566px;
}

#book-top {
  background: url(a/book_top2.png) no-repeat left top;
  min-height: 148px;
}

#book-body {
  background: url(a/book_bg3.png) no-repeat left top;
  min-height: 18em
}

#book-bottom {
  background: url(a/book_bottom.png) no-repeat left bottom;
  min-height: 280px;
}

.content {
  width: 65%;
  margin: 0 auto;
  font-size: large;
  line-height: 180%;
}

.content_only {
  padding: 0 5em 0 6em;
  background: url(a/book_bottom.png) no-repeat bottom,
}

#author {
  padding: 2.5em 0 0 6.5em;
}

.author_face {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

.author_face img {
  vertical-align: middle;
}

.author_info {
  margin: -4.3em 0 0 6em;
}

.author_info strong {
  font-size: large;
}

.author_info span {
  color: #666
}

.author_intro {
  margin: 0.5em 0 0 6em;
  color: #666;
  width: 65%;
  height: 1.3em;
  overflow: hidden;
  txet-oevrflow: ellipsis;
}

h1 {
  text-align: center;
  border-top: 1px solid #ccc;
  margin: 0 4.5em 1em 4.5em;
  padding-top: 1em;
  font-size: x-large;
  line-height: 160%;
}

.book-52 {
  position: absolute;
  right: 5em;
  bottom: 5em;
  font-size: small;
  color: #888;
  writing-mode: vertical-rl;
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  width: 1em;
  line-height: 150%;
  letter-spacing: 0.1em;
  -webkit-writing-mode: tb-rl;
  -webkit-line-height: 150%;
}

.book-page {
  position: absolute;
  left: 50%;
  bottom: 5.5em;
  font-size: small;
  color: #888;
}

#container {
  max-width: 1200px;
  margin: 0 auto;
}

#nav li {
  overflow: hidden;
  display: inline-block;
  text-align: center;
  font-size: large;
}

#nav li a {
  background: url(a/nav.png) no-repeat;
  color: #e3c2a7;
  width: 151px;
  height: 90px;
  line-height: 120px;
  display: inline-block;
}

#nav li.curr a {
  color: #f8aa03
}

.do-area {
  position: absolute;
  right: -20%;
  top: 5.5em;
}

.do-area em {
  font-size: small;
}

.do-area i {
  color: #7d5f49;
  font-size: 1.2em;
}

#mulu_top {
  margin-top: 1em
}

#mulu,
#mulu_top {
  color: #7d5f49;
  white-space: nowrap;
  width: 18em;
  overflow: hidden;
}

#mulu li,
#mulu_top li {
  list-style: disc;
  margin: 0 0 0 1em;
}

.mulu li.red a {
  color: #d33a00 !important
}


i.red {
  color: red
}

.red {
  color: red
}

#footer_pic_l {
  left: 11%
}

#footer_pic_r {
  position: absolute;
  right: 18%;
  bottom: 1%;
}

#music {
  position: absolute;
  bottom: 1em;
  right: 8%
}

/* pages */
.pages {
  text-align: left;
  color: #888;
  width: 20em;
  font-size: small;
  margin: 15px 0;
  padding: 3px;
  text-align: center;
  overflow: hidden;
}

.pages * {
  vertical-align: top;
  padding: 1px 5px;
  display: inline-block;
  margin-bottom: 0.5em;
  background: #eee;
  color: #666;
}

.pages em {
  font-style: normal;
  padding: 3px 4px 4px;
}

.pages .curr {
  background: #f90;
  border: 1px solid #f90;
  color: #333;
}

.pages a:hover {
  background: #f90;
  color: #333;
  text-decoration: none;
}

.pages span {
  background: none;
  color: #888
}

.social-share {
  margin: 1em 0;
  -webkit-text-stroke-width: 0;
  background: #dab8a4;
  padding: 0.5em 0.2em 0 0.2em;
  color: #af8062;
  width: 2em;
  font-size: small;
  border-radius: 1em;
  display: inline-block;
}

@media only screen and (max-width:800px) {
  #footer_pic_r {
    bottom: -3em;
    text-align: right;
    right: 10%;
    display: none
  }

  #footer_pic_r img {
    width: 50%;
  }

  #footer_pic_l {
    margin: 0 0 0 2em;
    text-align: center;
  }

  #footer_pic_l img {
    width: 80%;
  }

  .book-52 {
    right: 2em;
    bottom: 7em;
    display: none;
  }

  #book-body {
    min-height: auto;
  }

  /* #book {top: 4%; width:115%; left: 0; right: 0; margin-left: auto;   }*/
  #book {
    width: 115%;
    margin-left: -2.5em;
    position: static;
  }

  #book-body,
  #book-top,
  #book-bottom {
    background-size: 100% !important;
  }

  #book-top {
    min-height: 118px
  }

  #book-bottom {
    background-position: left top;
  }

  .pages {
    text-align: center;
    width: auto
  }

  .do-area {
    position: static;
    text-align: center;
    margin-top: 1em;
    font-size: small !important;
  }

  .do-area br {
    display: none;
  }

  .do-area a {
    margin: 0 0.8em 0 0;
  }

  h1 {
    margin: 0 3em 0.5em;
    padding-top: 0.5em;
  }

  #mulu,
  #mulu_top {
    width: auto;
    white-space: normal;
    margin: 0.5em 0.5em 0 1em;
    padding: 0;
  }

  #nav {
    text-align: center;
  }

  #face {
    width: 48px;
  }

  #author {
    padding: 2.5em 0 0 5em;
  }

  .author_info {
    margin: -3.2em 0 0 4em;
  }

  .author_intro {
    margin: 0 0 0 4em
  }

  .book-page {
    display: none;
  }

  .bg {
    background-position: center;
  }

  #header {
    background: url(../../css/img/logo_2022.png) no-repeat 1em;
    background-size: 148px;
    height: 33px
  }

  .content {
    width: auto;
    margin: 0 2.5em 0 3.8em;
  }

  #music {
    position: absolute;
    top: -4em;
    right: 3em;
  }

  #container {
    position: relative;
  }

  #btnHome,
  .social-share {
    display: none !important;
  }
}