/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */
a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

a, ins, del {
  text-decoration: none; }

ul, ol {
  list-style: none; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

caption, th {
  text-align: left; }

q:after, q:before {
  content: ""; }

a, button:hover {
  cursor: pointer; }

input, textarea {
  outline: none; }

.clear {
  clear: both;
  display: block; }

a {
  cursor: pointer;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

label, input[type="submit"] {
  cursor: pointer; }

/* = Structure-------------------------------------------------------------- */
html, body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
  outline: medium; }

body {
  background: url(bg.jpg) center repeat;
  line-height: 1.5;
  font-family: 'Arial', sans-serif;
  cursor: url(closedhand.cur); }

#home {
  text-align: center; }
  #home a {
    display: block; }
  #home img {
    max-width: 100%;
    height: auto !important; }
  #home ul, #home li {
    margin: 0;
    padding: 0;
    list-style: none outside none;
    font-size: 0; }
  #home li {
    display: inline-block; }
  #home #logo {
    padding: 30px 0 40px; }
    #home #logo a {
      display: inline-block; }
  #home .inner-wrap {
    max-width: 1200px;
    padding: 0 5%;
    margin: 0 auto; }
  #home .list-wrap {
    text-align: left; }
    #home .list-wrap li {
      vertical-align: top;
      width: 20%;
      margin: 0 auto 50px; }
    #home .list-wrap a {
      max-width: 200px;
      margin: 0 auto;
      padding: 0 5%;
      overflow: hidden; }
      #home .list-wrap a:hover img {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -webkit-transition: 0.5s;
        transition: 0.5s; }
    #home .list-wrap .figure {
      overflow: hidden; }
    #home .list-wrap h2 {
      font-size: 20px;
      line-height: 1.1;
      margin: 15px 0 10px;
      color: #eee; }
    #home .list-wrap span {
      font-size: 12px;
      color: #aaa; }
  #home .page-limit {
    margin: 20px auto 50px; }
    #home .page-limit li {
      vertical-align: middle; }
      #home .page-limit li a {
        font-size: 16px;
        padding: 10px 15px;
        color: #aaa; }
      #home .page-limit li:first-child {
        margin-right: 10px; }
      #home .page-limit li:last-child {
        margin-left: 10px; }
      #home .page-limit li.on {
        background: #85B200; }
        #home .page-limit li.on a {
          color: #fff; }
      #home .page-limit li:hover a {
        color: #fff; }

#page {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: none;
  width: 1100px;
  height: 715px;
  margin: -358px 0 0 -550px; }
  #page.mobile {
    width: 550px;
    height: 358px;
    margin: -210px 0 0 -275px; }
  #page .padding {
    /*padding: 0 34px;*/ }

.cursor-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab; }

.overlay {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 20;
  background: #000;
  /**old wrb*/
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  padding: 12% 5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0; }

.overlay.active {
  left: 0; }

#menu_holder {
  max-width: 1600px;
  margin: 0 auto;
  text-align: left;
  overflow-x: auto; }
  #menu_holder #slider {
    max-width: 100%; }
  #menu_holder li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 0;
    margin: 0 10px;
    cursor: pointer; }
    #menu_holder li:hover {
      opacity: 0.5;
      -moz-transition: 0.2s;
      -o-transition: 0.2s;
      -webkit-transition: 0.2s;
      transition: 0.2s; }
  #menu_holder figcaption {
    font-size: 16px;
    color: #fff;
    margin: 5px auto; }

/* = About-------------------------------------------------------------- */
#about {
  position: absolute;
  z-index: 5;
  width: 45%;
  display: none; }
  #about h3 {
    background: url(arrow-right.png) no-repeat 0 50%;
    margin: 0 0 0.5em 0;
    padding: 0 0 0 25px;
    font-size: 1.375em;
    color: #333;
    -webkit-font-smoothing: antialiased; }
  #about ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  #about li {
    padding: 5% 0; }
    #about li:first-child {
      padding-top: 15%; }
  #about p {
    font-size: 0.688em;
    color: #cfeaee; }
  #about a {
    color: #fff;
    text-decoration: underline; }
    #about a:hover {
      text-decoration: none; }

/* = Book-------------------------------------------------------------- */
#book {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #book .turn-page {
    background-color: white;
    background-size: 100% 100%; }

.double {
  background-size: 200% 100% !important; }
  .double.first {
    background-position: 0% 0%; }
  .double.second {
    background-position: -100% 0%; }

/* = Nav Arrows---------------------------------------- */
.nav_arrow {
  position: absolute;
  top: 50%;
  z-index: 15;
  background: url(arrow-navpage.png);
  width: 34px;
  height: 136px;
  margin-top: -68px; }
  .nav_arrow.next {
    right: -34px;
    background-position: 0 0; }
    .nav_arrow.next:hover {
      background-position: 0 -186px; }
  .nav_arrow.prev {
    left: -34px;
    background-position: 0 -372px;
    display: none; }
    .nav_arrow.prev:hover {
      background-position: 0 -558px; }

/*#page.mobile .nav_arrow.next { right: -24px; }*/
/* = End---------------------------------------- */
#end {
  text-align: center; }
  #end p {
    padding-top: 60%; }

/* = Meta data---------------------------------------- */
.meta {
  position: absolute;
  bottom: 1%; }
  .meta .num {
    font-weight: bold;
    font-size: 0.75em;
    color: #666; }
  .meta .description {
    font-size: 0.688em;
    color: #666; }
  .meta.left {
    left: 12px; }
    .meta.left .num {
      padding-right: 10px; }
  .meta.right {
    right: 12px;
    text-align: right; }
    .meta.right .num {
      padding-left: 10px; }

/*= Video in lightbox----------------------------*/
#lightbox {
  width: 100%;
  height: 100%;
  z-index: 106;
  position: absolute;
  display: block; }

.bcg {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  position: absolute;
  cursor: pointer; }

/* --------------------------*/
.page_book {
  padding: 5%; }
  .page_book p {
    -webkit-text-size-adjust: none;
    margin-bottom: 3%; }
    .page_book p a {
      text-decoration: underline;
      color: #333;
      font-weight: bold; }
      .page_book p a:hover {
        text-decoration: none; }
  .page_book h1 {
    -webkit-text-size-adjust: none;
    margin-bottom: 3%; }
  .page_book h3 {
    -webkit-text-size-adjust: none;
    margin-bottom: 3%;
    margin-top: 5%; }
  .page_book ul {
    list-style: disc inside;
    margin-bottom: 3%; }
  .page_book li {
    margin-bottom: 1%; }
    .page_book li a {
      color: #77797F; }
      .page_book li a:hover {
        color: #000000;
        text-decoration: underline; }

.booklink {
  /**�s��*/
  position: absolute;
  z-index: 99999999;
  background: #000;
  opacity: 0.3;
  display: block;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  text-indent: -3000px; }
  .booklink:hover {
    /**�s���@�襤*/
    background: none;
    border: solid 1px #E40408;
    opacity: 1; }

/* = Menu-------------------------------------------------------------- */
nav#center {
  text-align: center;
  padding: 10px 0; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }
nav li {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 10px; }
  nav li a {
    display: block;
    background: url(icons.png) no-repeat;
    width: 30px;
    height: 40px; }
  nav li .download {
    background-position: 0 0; }
    nav li .download:hover {
      background-position: 0 -90px; }
  nav li .home {
    background-position: 0 -175px; }
    nav li .home:hover {
      background-position: 0 -265px; }
  nav li .contact {
    background-position: 0 -355px; }
    nav li .contact:hover {
      background-position: 0 -445px; }
  nav li .show_all {
    background-position: 0 -535px; }
    nav li .show_all:hover {
      background-position: 0 -625px; }
  nav li .zoom_auto {
    background-position: 0 -715px; }
    nav li .zoom_auto:hover {
      background-position: 0 -805px; }
  nav li .zoom_in {
    background-position: 0 -895px; }
    nav li .zoom_in:hover {
      background-position: 0 -985px; }
  nav li .zoom_original {
    background-position: 0 -1075px; }
    nav li .zoom_original:hover {
      background-position: 0 -1165px; }
  nav li .zoom_out {
    background-position: 0 -1255px; }
    nav li .zoom_out:hover {
      background-position: 0 -1345px; }
  nav li .goto {
    position: relative;
    width: auto;
    padding-right: 28px;
    font-size: 12px;
    overflow: hidden; }
    nav li .goto label, nav li .goto input {
      display: inline-block;
      vertical-align: middle; }
    nav li .goto label {
      line-height: 12px;
      font-weight: bold;
      color: #aaa;
      -webkit-font-smoothing: antialiased; }
    nav li .goto input[type='text'] {
      text-align: left;
      background: none;
      max-width: 25px;
      border: 1px solid #222;
      padding: 5px;
      margin: 0 0 0 5px;
      color: #fff; }
    nav li .goto button {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 9px;
      font-weight: bold;
      padding: 7px 5px;
      background: none;
      color: #aaa;
      background: #222;
      filter: progid:dximagetransform.Microsoft.gradient(startcolorstr='#2b3e4d', endcolorstr='#1f303d', gradienttype=0); }
      nav li .goto button:hover {
        color: #fff; }
  nav li .backhome {
    width: 70px;
    background: url(logo.png) center no-repeat;
    background-size: 70px 30px; }

.ui-btn-text {
  display: none; }

/* = Tooltip-------------------------------------------------------------- */
.tooltip {
  position: absolute;
  left: 0;
  top: -25px;
  z-index: 5;
  display: none;
  padding: 2px 10px;
  background: #333;
  white-space: nowrap;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: white; }
  .tooltip b {
    position: absolute;
    left: 6px;
    bottom: -6px;
    display: block;
    background: url(arrow-tooltip.png) no-repeat;
    width: 7px;
    height: 6px; }

/* = Footer-------------------------------------------------------------- */
footer#footer {
  position: fixed;
  bottom: 0;
  z-index: 15;
  background: url(bg.png);
  /*background-color: rgba(0, 0, 0, .7);
	border-top: 1px solid #053149;*/
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 0; }

@media screen and (max-width: 1600px) {
  .overlay {
    height: auto;
    padding: 6% 11%; }

  #menu_holder {
    max-width: 100%;
    text-align: center; }
    #menu_holder li {
      width: 300px; }
 }

@media screen and (max-width: 1024px) {
  #home .inner-wrap {
    min-width: 1000px; }
  #home .list-wrap li {
    width: 25%; }

  .overlay {
    max-width: 1024px;
    padding: 6% 18%; }
 }

@media screen and (max-width: 1000px) {
  #home .inner-wrap {
    min-width: 320px; }
  #home .list-wrap li {
    width: 33.3%; }

  .overlay {
    max-width: 1024px;
    padding: 10% 7%; }
 }

@media screen and (max-width: 640px) {
  #home .list-wrap li {
    width: 50%; }

  .overlay {
    padding: 10% 15%; }
 }

@media screen and (max-width: 480px) {
  .overlay {
    padding: 10% 15%; }

  #menu_holder li {
    width: auto; }
    #menu_holder li img {
      width: 100px; }
 }

@media screen and (max-width: 320px) {
  .overlay {
    padding: 10% 13%; }
 }

/*# sourceMappingURL=style.css.map */