@import url('../../css/base.css');
html {
  font-size: 10px
}
body {
  background: #000000; font-size: 1.2rem; color: #f8f8f8; --hc-max-width: 1680px; --hc-min-width: 1200px; --hc-gap: 40px; --hc-mainmenu-height: 94px
}
body, input, textarea {
  font-family: 'Source Han Sans CN', 'Microsoft YaHei', Arial, Verdana
}
.homepage {
  width: 100%; background: #000000; min-width: var(--hc-min-width); position: relative; z-index: 20000
}
.homepage div.focus {
  width: 100%; height: 690px; position: relative; overflow: hidden
}
.homepage div.box {
  width: 100%; height: 690px; position: absolute; bottom: 0px; left: 0px; z-index: 100
}
.homepage div.guide {
  width: 100%; height: 100%; mask-position: center; mask-image: linear-gradient(to left, transparent 47.5%, #000 52.5%); mask-size: 210%; position: absolute; top: 0px; z-index: 200; transition: mask-position 2s cubic-bezier(0.00, 1.11, 0.78, 0.95)
}
.homepage div.guide.out {
  mask-position: right !important
}
.homepage div.guide img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center
}
.homepage div.guide img[mode='1'] {
  object-position: top center
}
.homepage div.guide img[mode='2'] {
  object-position: center center
}
.homepage div.guide img[mode='3'] {
  object-position: bottom center
}
.homepage div.box div.area {
  width: 33.33%; height: 100%; position: absolute; top: 0px; z-index: 1000
}
.homepage div.box div.area a.link {
  display: block; width: 100%; height: 100%
}
.homepage div.box div.area[position=left] {
  left: 0px; cursor: pointer
}
.homepage div.box div.area[position=right] {
  right: 0px
}
.homepage div.box div.wukong {
  width: 100%; height: 100%; position: absolute; top: 0px; z-index: 100
}
.homepage div.box div.wukong div.body {
  width: 1142px; height: 1274px; background: url(../images/wukong.png) 0px 0px no-repeat; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 50%; left: 50%; z-index: 50
}
.homepage div.box div.wukong div.body div.feather {
  width: 400px; height: 400px; background: none 0px 0px no-repeat; position: absolute
}
.homepage div.box div.wukong div.body div.feather1 {
  background-image: url(../images/feather1.png); top: -64px; left: 900px; animation-name
  : wukong-feather; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: step-start; z-index: 120
}
.homepage div.box div.wukong div.body div.feather2 {
  background-image: url(../images/feather2.png); top: -72px; left: 684px; animation-name
  : wukong-feather; animation-duration: 1.8s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: step-start; z-index: 100
}
.homepage div.box div.wukong div.body div.finger {
  width: 100px; height: 100px; background: url(../images/wukong.finger.v2.png) 0px 0px no-repeat; position: absolute; top: 410px; left: 588px; z-index: 100
}
.homepage div.box div.wukong div.body div.finger.play {
  animation-name: wukong-finger; animation-duration: 0.4s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: step-start
}
.homepage div.box div.wukong div.body div.mask {
  width: 344px; height: 482px; background: url(../images/wukong.mask.png) 0px 0px no-repeat; position: absolute; top: 0px; left: 617px; z-index: 150
}
.homepage div.box div.wukong div.body div.twinkle {
  width: 834px; height: 1139px; background: url(../images/wukong.twinkle.png) 0px 0px no-repeat; position: absolute; top: 8px; left: 308px; z-index: 200; animation-name
  : wukong-twinkle; animation-duration: 0.1s; animation-iteration-count: infinite; animation-timing-function: step-start
}
.homepage div.box:has(div.area[position=left]:hover) div.guide {
  mask-position: left
}
.homepage div.box:has(div.area[position=right]:hover) div.guide {
  mask-position: right
}
.homepage div.mainmenu {
  bottom: 0px
}
.homepage::after {
  content: ''; display: block; width: 100%; height: 207px; background: url(../images/bg.mask.2.png) bottom center repeat-x; opacity: 1; pointer-events: none; position: absolute; left: 0px; bottom: 0px; z-index: 10000; transition: 0.3s ease; transition-delay: 2s
}
.homepage.fixed {
  position: sticky; top: 0px; left: 0px
}
.homepage.fixed div.focus {
  height: calc(var(--hc-mainmenu-height) + 20px)
}
.homepage.fixed::after {
  opacity: 0
}
.homepage:not(.fixed) div.mainmenu div.items div.socialmedia div.item::after {
  display: none
}
.homepage:not(.fixed) div.mainmenu div.items div.socialmedia div.item:hover::before {
  opacity: 1; bottom: calc(var(--hc-gap) * 2 / 3); pointer-events: all
}
.mainmenu {
  width: 100%; box-sizing: border-box; min-width: var(--hc-min-width); padding: 0px var(--hc-gap); position: absolute; z-index: 20000
}
.mainmenu div.items {
  width: 100%; height: var(--hc-mainmenu-height); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20000
}
.mainmenu div.items div.item {
  position: relative
}
.mainmenu div.items div.item img.en {
  display: block; width: 100%; transition: opacity 1s ease
}
.mainmenu div.items div.item img.cn {
  display: block; width: 44px; height: 44px; object-fit: contain; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 1s ease
}
.mainmenu div.items div.item[item=work] {
  width: 63px
}
.mainmenu div.items div.item[item=work] img.en {
  transform: translate(0px, -7px)
}
.mainmenu div.items div.item[item=work] img.cn {
  width: 60px; height: 60px
}
.mainmenu div.items div.item[item=comic] {
  width: 69px; transform: translate(7px, 0px)
}
.mainmenu div.items div.item[item=blog] {
  width: 84px; transform: translate(3px, 0px)
}
.mainmenu div.items div.item[item=blog] img.en {
  transform: translate(0px, 1px)
}
.mainmenu div.items div.item[item=blog] img.cn {
  width: 48px; height: 48px; margin-top: -2px
}
.mainmenu div.items div.item[item=about] {
  width: 78px; transform: translate(-6px, 0px)
}
.mainmenu div.items div.item[item=about] img.en {
  transform: translate(0px, -1px)
}
.mainmenu div.items div.item[item=about] img.cn {
  margin-left: -2px
}
.mainmenu div.items div.item[item=contact] {
  width: 82px; transform: translate(-6px, 0px)
}
.mainmenu div.items div.item[item=contact] img.en {
  transform: translate(0px, -3px)
}
.mainmenu div.items div.item[item=guestbook] {
  width: 118px; transform: translate(-2px, 0px)
}
.mainmenu div.items div.item.on img.en {
  opacity: 0
}
.mainmenu div.items div.item.on img.cn {
  opacity: 1
}
.mainmenu div.items div.socialmedia {
  width: 190px; display: flex; align-items: center; justify-content: right; gap: 11px
}
.mainmenu div.items div.socialmedia div.item {
  width: 16px; height: 16px; position: relative
}
.mainmenu div.items div.socialmedia div.item::before {
  content: ''; display: block; width: 98px; height: 122px; background: none center center no-repeat; background-size: cover; transform: translate(-50%); opacity: 0; pointer-events: none; position: absolute; bottom: var(--hc-gap); left: 50%; z-index: 1000; transition: all 0.3s ease
}
.mainmenu div.items div.socialmedia div.item::after {
  content: ''; display: block; width: 98px; height: 122px; background: none center center no-repeat; background-size: cover; transform: translate(-50%); opacity: 0; pointer-events: none; position: absolute; top: var(--hc-gap); left: 50%; z-index: 1000; transition: all 0.3s ease
}
.mainmenu div.items div.socialmedia div.item span.icon {
  display: block; width: 100%; height: 100%; background: none center center no-repeat; background-size: contain
}
.mainmenu div.items div.socialmedia div.item-1 span.icon {
  background-image: url(../images/img.socialmedia.logo-1.svg)
}
.mainmenu div.items div.socialmedia div.item-1::before {
  background-image: url(../images/img.socialmedia.1d.png)
}
.mainmenu div.items div.socialmedia div.item-1::after {
  background-image: url(../images/img.socialmedia.1u.png)
}
.mainmenu div.items div.socialmedia div.item-2 span.icon {
  background-image: url(../images/img.socialmedia.logo-2.svg)
}
.mainmenu div.items div.socialmedia div.item-2::before {
  background-image: url(../images/img.socialmedia.2d.png)
}
.mainmenu div.items div.socialmedia div.item-2::after {
  background-image: url(../images/img.socialmedia.2u.png)
}
.mainmenu div.items div.socialmedia div.item-3 span.icon {
  background-image: url(../images/img.socialmedia.logo-3.svg)
}
.mainmenu div.items div.socialmedia div.item-3::before {
  background-image: url(../images/img.socialmedia.3d.png)
}
.mainmenu div.items div.socialmedia div.item-3::after {
  background-image: url(../images/img.socialmedia.3u.png)
}
.mainmenu div.items div.socialmedia div.item-4 {
  margin-left: -1px; width: 17px
}
.mainmenu div.items div.socialmedia div.item-4 span.icon {
  background-image: url(../images/img.socialmedia.logo-4.svg)
}
.mainmenu div.items div.socialmedia div.item-4::before {
  background-image: url(../images/img.socialmedia.4d.png)
}
.mainmenu div.items div.socialmedia div.item-4::after {
  background-image: url(../images/img.socialmedia.4u.png)
}
.mainmenu div.items div.socialmedia div.item-5 {
  margin-left: -1px; width: 19px
}
.mainmenu div.items div.socialmedia div.item-5 span.icon {
  background-image: url(../images/img.socialmedia.logo-5.svg)
}
.mainmenu div.items div.socialmedia div.item-5::before {
  background-image: url(../images/img.socialmedia.5d.png)
}
.mainmenu div.items div.socialmedia div.item-5::after {
  background-image: url(../images/img.socialmedia.5u.png)
}
.mainmenu div.items div.socialmedia div.item-6 {
  margin-left: -2px
}
.mainmenu div.items div.socialmedia div.item-6 span.icon {
  background-image: url(../images/img.socialmedia.logo-6.svg)
}
.mainmenu div.items div.socialmedia div.item-6::before {
  background-image: url(../images/img.socialmedia.6d.png)
}
.mainmenu div.items div.socialmedia div.item-6::after {
  background-image: url(../images/img.socialmedia.6u.png)
}
.mainmenu div.items div.socialmedia div.item-7 {
  margin-left: -3px; margin-top: 1px; width: 24px
}
.mainmenu div.items div.socialmedia div.item-7 span.icon {
  background-image: url(../images/img.socialmedia.logo-7.svg)
}
.mainmenu div.items div.socialmedia div.item-7::before {
  background-image: url(../images/img.socialmedia.7d.png)
}
.mainmenu div.items div.socialmedia div.item-7::after {
  background-image: url(../images/img.socialmedia.7u.png)
}
.mainmenu div.items div.socialmedia div.item:hover::after {
  opacity: 1; top: calc(var(--hc-gap) * 2 / 3); pointer-events: all
}
.mainmenu::after {
  content: ''; display: block; width: 100%; height: 112px; background: url(../images/bg.mask.1.png) top center repeat-x; position: absolute; top: 100%; left: 0px; z-index: 18000; pointer-events: none; opacity: 1; transition: opacity 0.3s ease
}
/* .mainmenu.mask::after {
  opacity: 1; z-index: 18000
} */
.mainmenu[genre=work],
.mainmenu[genre=comic],
.mainmenu[genre=blog] {
  background: #000000; padding-top: 20px; position: sticky; top: 0px; left: 0px
}
.mainmenu[genre=about],
.mainmenu[genre=contact],
.mainmenu[genre=guestbook] {
  background: #000000; position: sticky; top: 0px; left: 0px
}
.mainmenu[genre=work]::before,
.mainmenu[genre=comic]::before,
.mainmenu[genre=blog]::before {
  content: ''; display: block; width: 543px; height: 91px; background: url(../images/bg.wukong.png) center center no-repeat; background-size: contain; transform: translate(calc(-50% - 14px), -3px); position: absolute; top: 0px; left: 50%; z-index: 50; pointer-events: none
}
.pagination {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; transform: scale(0.7)
}
.pagination a.page {
  display: block; width: 26px; height: 26px; position: relative
}
.pagination a.page::before {
  content: ''; display: block; width: 26px; height: 26px; background: none center center no-repeat; background-size: contain; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 100; opacity: 0.5; transition: opacity 1s ease
}
.pagination a.page:hover::before {
  opacity: 1
}
.pagination a.page::after {
  content: ''; display: block; width: 26px; height: 26px; background: none center center no-repeat; background-size: contain; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 1s ease
}
.pagination a.page[page='1']::before {
  background-image: url(../images/img.number.1-1.svg)
}
.pagination a.page[page='1']::after {
  background-image: url(../images/img.number.1-2.svg)
}
.pagination a.page[page='2']::before {
  width: 22px; background-image: url(../images/img.number.2-1.svg)
}
.pagination a.page[page='2']::after {
  width: 28px; background-image: url(../images/img.number.2-2.svg)
}
.pagination a.page[page='3']::before {
  background-image: url(../images/img.number.3-1.svg)
}
.pagination a.page[page='3']::after {
  background-image: url(../images/img.number.3-2.svg)
}
.pagination a.page[page='4']::before {
  width: 22px; background-image: url(../images/img.number.4-1.svg)
}
.pagination a.page[page='4']::after {
  width: 28px; background-image: url(../images/img.number.4-2.svg)
}
.pagination a.page[page='5']::before {
  width: 22px; background-image: url(../images/img.number.5-1.svg)
}
.pagination a.page[page='5']::after {
  background-image: url(../images/img.number.5-2.svg)
}
.pagination a.page[page='6']::before {
  width: 22px; background-image: url(../images/img.number.6-1.svg)
}
.pagination a.page[page='6']::after {
  background-image: url(../images/img.number.6-2.svg)
}
.pagination a.page[page='7']::before {
  background-image: url(../images/img.number.7-1.svg)
}
.pagination a.page[page='7']::after {
  background-image: url(../images/img.number.7-2.svg)
}
.pagination a.page[page='8']::before {
  width: 22px; background-image: url(../images/img.number.8-1.svg)
}
.pagination a.page[page='8']::after {
  width: 28px; margin-top: -2px; background-image: url(../images/img.number.8-2.svg)
}
.pagination a.page[page='9']::before {
  background-image: url(../images/img.number.9-1.svg)
}
.pagination a.page[page='9']::after {
  margin-top: -2px; background-image: url(../images/img.number.9-2.svg)
}
.pagination a.page[page='10']::before {
  background-image: url(../images/img.number.10-1.svg)
}
.pagination a.page[page='10']::after {
  background-image: url(../images/img.number.10-2.svg)
}
.pagination a.page.on::before {
  opacity: 0
}
.pagination a.page.on::after {
  opacity: 1
}
.pagination span.prevPage {
  display: block; width: 24px; height: 24px; background: url(../images/img.arrow.left.svg) center center no-repeat; background-size: contain; opacity: 0.1
}
.pagination span.nextPage {
  display: block; width: 24px; height: 24px; background: url(../images/img.arrow.right.svg) center center no-repeat; background-size: contain; opacity: 0.1
}
.pagination a.prevPage {
  display: block; width: 24px; height: 24px; background: url(../images/img.arrow.left.svg) center center no-repeat; background-size: contain; opacity: 0.5
}
.pagination a.prevPage:hover {
  opacity: 1
}
.pagination a.nextPage {
  display: block; width: 24px; height: 24px; background: url(../images/img.arrow.right.svg) center center no-repeat; background-size: contain; opacity: 0.5
}
.pagination a.nextPage:hover {
  opacity: 1
}
.beian {
  width: 100%; padding: calc(var(--hc-gap) * 2) 0px calc(var(--hc-gap) / 2) 0px; display: flex; align-items: center; justify-content: center
}
.beian a.link {
  font-size: 1.2rem; color: rgba(255, 255, 255, 0.3); transform: all 0.3s ease
}
.beian a.link:hover {
  color: rgba(255, 255, 255, 0.4)
}
.container {
  width: 100%; margin: auto; box-sizing: border-box; background: none center center no-repeat; background-size: contain; min-width: var(--hc-min-width); max-width: var(--hc-max-width); padding: calc(var(--hc-gap) / 2) var(--hc-gap); position: relative; z-index: 100
}
.container.p100 {
  padding-top: 112px
}
.container div.works {
  width: 100%
}
.container div.works div.item {
  width: 100%; padding-bottom: calc(var(--hc-gap) * 6)
}
.container div.works div.item div.image img {
  width: 100%; display: block
}
.container div.works div.item div.video {
  width: 100%; display: flex; align-items: center; justify-content: center; position: relative
}
.container div.works div.item div.video::before {
  content: ''; display: block; width: 18%; aspect-ratio: 1 / 1; background: url(../images/img.video.play.png); background-size: contain; transform: translate(-50%, -50%); cursor: pointer; position: absolute; top: 50%; left: 50%; z-index: 100; transition: all 0.3s ease
}
.container div.works div.item div.video video {
  display: block; max-width: 100%
}
.container div.works div.item div.video.played::before {
  opacity: 0; pointer-events: none
}
.container div.works div.item div.text {
  width: 100%; padding-top: calc(var(--hc-gap) * 2 / 3); text-align: center; font-size: 1.2rem; line-height: 160%; color: #808080
}
.container div.comics {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--hc-gap) * 1.5); padding-bottom: calc(var(--hc-gap) * 3)
}
.container div.comics[count='0'] {
  width: 100%; padding: 0px; height: calc(100vh - var(--hc-mainmenu-height)); min-height: 600px
}
.container div.comics div.item {
  width: calc(33.33% - var(--hc-gap))
}
.container div.comics div.item div.image img {
  width: 100%; display: block
}
.container div.comic {
  width: 100%
}
.container div.comic div.image {
  width: 100%
}
.container div.comic div.image img {
  width: 100%; display: block; margin: auto
}
.container div.comic[percentage='50'] div.image img {
  width: 50%
}
.container div.comic[percentage='75'] div.image img {
  width: 75%
}
.container div.comic[percentage='100'] div.image img {
  width: 100%
}
.container div.blogs {
  width: 100%
}
.container div.blogs div.item {
  width: 100%; padding-bottom: calc(var(--hc-gap) * 6)
}
.container div.blogs div.item div.image img {
  width: 100%; display: block
}
.container div.blogs div.item div.video {
  width: 100%; display: flex; align-items: center; justify-content: center; position: relative
}
.container div.works div.item div.video::before {
  content: ''; display: block; width: 18%; aspect-ratio: 1 / 1; background: url(../images/img.video.play.png); background-size: contain; transform: translate(-50%, -50%); cursor: pointer; position: absolute; top: 50%; left: 50%; z-index: 100; transition: all 0.3s ease
}
.container div.blogs div.item div.video video {
  display: block; max-width: 100%
}
.container div.blogs div.item div.video.played::before {
  opacity: 0; pointer-events: none
}
.container div.blogs div.item div.text {
  width: 100%; padding-top: calc(var(--hc-gap) * 2 / 3); text-align: center; font-size: 1.4rem; line-height: 160%; color: #808080
}
.container div.about {
  width: 100%; height: calc(100vh - var(--hc-mainmenu-height)); min-height: 600px; display: flex; align-items: center; justify-content: center
}
.container div.about div.content {
  width: 865px; margin: auto
}
.container div.about div.content img {
  display: block; width: 100%
}
.container div.contact {
  width: 100%; height: calc(100vh - var(--hc-mainmenu-height)); min-height: 600px; display: flex; align-items: center; justify-content: center
}
.container div.contact div.content {
  width: 100%; position: relative; transform: translate(0px, calc(0px - var(--hc-gap) * 3))
}
.container div.contact div.content div.qrcode {
  width: 100%
}
.container div.contact div.content div.qrcode img {
  display: block; width: 276px; margin: auto
}
.container div.contact div.content div.email {
  transform: translate(-50%, 0px); position: absolute; top: calc(100% + 120px); left: 50%; z-index: 100
}
.container div.contact div.content div.email img {
  display: block; height: 42px
}
.container div.guestbook {
  width: 100%; padding-top: calc(var(--hc-gap) * 2)
}
.container div.guestbook div.form {
  width: 100%; height: calc(calc(var(--hc-gap) * 2) + 264px); position: relative
}
.container div.guestbook div.form form.form {
  opacity: 1; transition: all 0.3s ease
}
.container div.guestbook div.form div.field {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--hc-gap) / 4); padding-bottom: calc(var(--hc-gap) / 2)
}
.container div.guestbook div.form div.field span.label {
  font-size: 1.4rem; color: #808080; transform: translate(-10px, 0px)
}
.container div.guestbook div.form div.field input.text {
  width: 160px; height: 24px; line-height: 18px; background: transparent; box-sizing: border-box; padding: 0px 0.7rem; border: #808080 1px solid; font-size: 1.4rem; color: #808080; appearance: none; outline: none; transform: translate(-10px, 0px)
}
.container div.guestbook div.form div.field div.message {
  width: 600px; height: 149px; box-sizing: border-box; padding: 30px 80px; background: url(../images/bg.guestbook.scroll.png) center center no-repeat; background-size: contain
}
.container div.guestbook div.form div.field div.message textarea.textarea {
  width: 100%; height: 100%; display: block; background: transparent; box-sizing: border-box; padding: 0.7rem; border: 0px; font-size: 1.4rem; line-height: 160%; color: #000000; appearance: none; outline: none; resize: none
}
.container div.guestbook div.form div.button {
  display: flex; align-items: center; justify-content: center
}
.container div.guestbook div.form div.button input.submit {
  width: 100px; appearance: none; outline: none; transform: translate(10px, 0px)
}
.container div.guestbook div.form div.successed {
  transform: translate(-50%, 20px); position: absolute; top: 0px; left: 50%; z-index: -100; opacity: 0; transition: all 0.3s ease
}
.container div.guestbook div.form div.successed div.image img {
  display: block; width: 365px
}
.container div.guestbook div.form.successed form.form {
  transform: translate(0px, -20px); opacity: 0; pointer-events: none
}
.container div.guestbook div.form.successed div.successed {
  transform: translate(-50%, 0px); opacity: 1; z-index: 100
}
.container div.guestbook div.messages {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--hc-gap) * 3); display: grid; grid-template-columns: 1fr; gap: calc(var(--hc-gap) / 2)
}
.container div.guestbook div.messages div.item {
  width: 100%; box-sizing: border-box; border: #989898 1px solid
}
.container div.guestbook div.messages div.item div.title {
  padding: calc(var(--hc-gap) / 3); line-height: 160%; font-size: 1.4rem; color: #808080; text-align: center
}
.container div.guestbook div.messages div.item div.content {
  padding: calc(var(--hc-gap) / 3); padding-top: 0px; line-height: 160%; font-size: 1.4rem; color: #808080; text-align: center
}
.container:has(div.comics[count='0']) {
  padding: 0px; background-image: url(../images/bg.comic.coming.jpg)
}
.container:has(div.comics[count='0']) div.pagination {
  display: none
}
.comicBar {
  transform: translate(0px, calc(-50% + (var(--hc-mainmenu-height) + 20px) / 2)); height: 420px; user-select: none; position: fixed; top: 50%; right: calc(var(--hc-gap) * 2); z-index: 18000
}
.comicBar div.bar {
  width: 24px; box-sizing: border-box; padding: 10px 0px; background: #000000; border: #3e3e3e 1px solid; border-radius: 12px; --hc-comic-bar-line-height: 0px
}
.comicBar div.bar div.line {
  width: 4px; height: 240px; margin: auto; background: #343434; border-radius: 2px; position: relative
}
.comicBar div.bar div.line::before {
  content: ''; display: block; width: 100%; height: var(--hc-comic-bar-line-height); background: #9a9a9a; border-radius: 2px
}
.comicBar div.bar div.button {
  width: 12px; height: 12px; background: #ffffff; transform: translate(-50%, 0px); border-radius: 100%; position: absolute; top: 10px; left: 50%; z-index: 100; cursor: move
}
.comicBar div.bar div.catalog {
  margin-top: 10px; cursor: pointer
}
.comicBar div.bar div.catalog div.icon {
  width: 8px; margin: auto
}
.comicBar div.bar div.catalog div.icon img {
  display: block; width: 100%; opacity: 0.8
}
.comicBar div.bar div.catalog div.text {
  width: 100%; padding-top: 5px; font-size: 0.9rem; text-align: center
}
.comicBar div.bar div.fullscreen {
  margin-top: 10px; cursor: pointer
}
.comicBar div.bar div.fullscreen div.icon {
  width: 10px; margin: auto
}
.comicBar div.bar div.fullscreen div.icon img {
  display: block; width: 100%; opacity: 0.8
}
.comicBar div.bar div.fullscreen div.text {
  width: 100%; padding-top: 5px; font-size: 0.9rem; text-align: center
}
.comicBar div.percentage {
  width: 24px; box-sizing: border-box; margin-top: 14px; padding: 10px 0px; background: #000000; border: #3e3e3e 1px solid; border-radius: 12px
}
.comicBar div.percentage div.zoom {
  width: 100%; height: 12px; font-size: 1.2rem; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer
}
.comicBar div.percentage div.text {
  width: 100%; height: 24px; font-size: 0.8rem; color: #ffffff; display: flex; align-items: center; justify-content: center; opacity: 0.8
}
.comicBar div.percentage[percentage='100'] div.zoom.in,
.comicBar div.percentage[percentage='50'] div.zoom.out {
  opacity: 0.3; cursor: default
}
body.fullscreen .mainmenu,
body.fullscreen .beian {
  display: none
}
@keyframes wukong-twinkle {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 0
  }
}
@keyframes wukong-finger {
  0% {
    background-position: 0px 0px
  }
  10% {
    background-position: -100px 0px
  }
  20% {
    background-position: -200px 0px
  }
  30% {
    background-position: -300px 0px
  }
  40% {
    background-position: -400px 0px
  }
  50% {
    background-position: 0px 0px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes wukong-feather {
  0% {
    background-position: 0px 0px
  }
  5% {
    background-position: -400px 0px
  }
  10% {
    background-position: -800px 0px
  }
  15% {
    background-position: -1200px 0px
  }
  20% {
    background-position: -1600px 0px
  }
  25% {
    background-position: -2000px 0px
  }
  30% {
    background-position: -2400px 0px
  }
  35% {
    background-position: -2800px 0px
  }
  40% {
    background-position: -3200px 0px
  }
  45% {
    background-position: -3600px 0px
  }
  50% {
    background-position: 0px -400px
  }
  55% {
    background-position: -400px -400px
  }
  60% {
    background-position: -800px -400px
  }
  65% {
    background-position: -1200px -400px
  }
  70% {
    background-position: -1600px -400px
  }
  75% {
    background-position: -2000px -400px
  }
  80% {
    background-position: -2400px -400px
  }
  85% {
    background-position: -2800px -400px
  }
  90% {
    background-position: -2800px -400px
  }
  95% {
    background-position: -3200px -400px
  }
  100% {
    background-position: -3200px -400px
  }
}