html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background: url("../images/bg.jpg") no-repeat center center;
  background-size: cover;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #000;
}

#canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -338px 0px 0px -480px;
  width: 960px;
  height: 676px;
}

#book-zoom {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
}

.book {
  width: 960px;
  /*height: 648px;*/
  height: 676px;
}

.animated {
  -webkit-transition: margin-left 0.2s ease-in-out;
  -moz-transition: margin-left 0.2s ease-in-out;
  -o-transition: margin-left 0.2s ease-in-out;
  -ms-transition: margin-left 0.2s ease-in-out;
  transition: margin-left 0.2s ease-in-out;
}

.book .shadow {
  -webkit-transition: -webkit-box-shadow 0.5s;
  -moz-transition: -moz-box-shadow 0.5s;
  -o-transition: -webkit-box-shadow 0.5s;
  -ms-transition: -ms-box-shadow 0.5s;

  -webkit-box-shadow: 0 0 10px #999;
  -moz-box-shadow: 0 0 10px #999;
  -ms-box-shadow: 0 0 10px #999;
  -o-box-shadow: 0 0 10px #999;
  box-shadow: 0 0 10px #999;
}

.book .page {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.book .p1,
.book .p2,
.book .p21,
.book .p22 {
  background-color: white;
  background-image: url(../images/cover.jpg) !important;
}

.book .p1 {
  background-position: 0 0;
}

.book .p1 .side {
  width: 5px;
  height: 676px;
  position: absolute;
  top: 0;
  left: 475px;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5, #ddd), color-stop(1, #bbb));
  background-image: -webkit-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -moz-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -ms-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -o-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: linear-gradient(left, #bbb, #ddd, #bbb);

  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  transform: rotateY(-90deg);

  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -o-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  z-index: 100000;

}

.book-transform div[page="1"] > div,
.book-transform div[page="2"] > div {
  overflow: visible !important;
}

.book .depth {
  background-image: url(../images/depth.png);
  position: absolute;
  top: 6px;
  width: 16px;
  height: 668px;
}

.book .front-side .depth {
  left: 4px;
  background-position: 0 0;
}

.book .back-side .depth {
  right: 4px;
  background-position: right 0;
}


.book .p2 {
  background-position: -480px 0 !important;
}

.book .p21 {
  background-position: -960px 0 !important;
}

.book .p22 {
  background-position: -1440px 0 !important;
}

.book .hard {
  width: 480px;
  height: 676px;
  background-color: white;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.book .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  perspective: 2000px;
}

.book .own-size {
  width: 460px;
  /*height: 630px;*/
  height: 660px;
  background-color: white;
  overflow: hidden;
}

.book .even {
  background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
  background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: linear-gradient(left, #fff 95%, #dadada 100%);
}

.book .odd {
  background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #fff), color-stop(1, #cacaca));
  background-image: -webkit-linear-gradient(right, #fff 95%, #cacaca 100%);
  background-image: -moz-linear-gradient(right, #fff 95%, #cacaca 100%);
  background-image: -ms-linear-gradient(right, #fff 95%, #cacaca 100%);
  background-image: -o-linear-gradient(right, #fff 95%, #cacaca 100%);
  background-image: linear-gradient(right, #fff 95%, #cacaca 100%);
}

.book .loader {
  background-image: url(../images/loading.gif);
  width: 22px;
  height: 22px;
  position: absolute;
  top: 280px;
  left: 219px;
}

/* =====自定义样式===== */

/* 工具 */
.cp {
  cursor: pointer;
}

/* 菜单栏 */
.ivu-slider-button-wrap {
  z-index: 100;
}

.ivu-poptip-inner {
  white-space: pre-line;
}

.menubar {
  background: rgba(0, 0, 0, .4);
  padding: 5px 15px 5px 5px;
  border-radius: 32px;
}

/* 页码 */
.pages-num {
  color: #000;
  font-size: 14px;
}

.even .pages-num {
  position: absolute;
  left: 15px;
  bottom: 10px;
}

.odd .pages-num {
  position: absolute;
  bottom: 10px;
  right: 15px;
}

/* 章节大标题 */
.title {
  width: 100%;
  height: 100px;
  text-align: center;
  background: #999;
}

.title h1 {
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
}

.title h1 span {
  color: #f63;
  margin-right: 15px;
}

.title h1 em {
  font-style: normal;
}

.content {
  padding: 20px 10px;
}

.content-con {
  margin-bottom: 10px;
}

.content-left {
  float: left;
  width: 30%;
  margin: 0px 1.5%;
}

.content-right {
  float: left;
  width: 64%;
  margin: 0px 1.5%;
}

/* 章节小标题 */
.title-small {
  margin-bottom: 25px;
  height: 30px;
  line-height: 30px;
  text-align: right;
}

.title-small p {
  background: #FF9;
  color: #f63;
  font-size: 16px;
  display: inline-block;
  width: 275px;
  text-align: center;
}

/* 文字 */
.book-text {
}

.book-text p,
.paragraph {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
}

.ivu-poptip,
.ivu-poptip-rel {
  display: inline;
}

.extend-text {
  display: block;
  text-indent: 2em;
}

.book-text p input {
  border: none;
  background: none;
  border-bottom: solid #333333 1px;
  width: 50px;
  height: 20px;
  line-height: 20px;
  padding: 0px 10px;
  outline: none;
}

.book-text h6 {
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}

/* 配图 */
.illustration {
  width: 100%;
}

.illustration dt img {
  width: 100%;
  height: auto;
}

.illustration dd {
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  position: relative;
  margin-top: 5px;
}

.illustration dd span {
  display: inline-block;
  margin: 0px 4px;
}

/* 迷你实验室 */
.experiment {
  background: #FFC7AC;
  border: solid #F63 1px;
  box-shadow: 0px 0px 10px #F63;
  padding: 10px 0px;
  margin: 10px 10px;
}

.experiment h1 {
  font-size: 16px;
  margin-bottom: 5px;
  padding: 0px 10px;
  font-weight: bold;
}

/* 知识扩展 */
.extend {
  position: relative;
  padding: 3px 5px 0px 5px;
  border-bottom: solid #F00 2px;
  color: #000;
  font-weight: bold;
}

.extend:hover {
  background: #f00;
  color: #fff;
  border-radius: 5px;
}

.extend-pop {
  display: none;
  position: absolute;
  border: solid #F63 1px;
  border-radius: 5px;
  padding: 10px;
  width: 200px;
  background: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  box-shadow: 0 0 10px #f63;
  z-index: 10000;
}

.extend-pop span {
  display: block;
  text-indent: 2em;
  text-align: justify;
}

.extend-pop img {
  margin-top: 10px !important;
  width: 100%;
  height: auto;
}

/* 答案选择题 */
.choice {
  position: relative;
  background: #09F;
  color: #000;
  display: inline-block;
  width: 30px;
  text-align: center;
  border-radius: 5px;
  text-indent: 0;
}

.choice:hover {
  color: #fff;
}

.choice-pop {
  display: none;
  position: absolute;
  background: #0CF;
  border-radius: 5px;
  overflow: hidden;
}

.choice-pop ul li {
  padding: 0px 15px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}

.choice-pop ul li:hover {
  background: #3FF;
}

/* 信息窗 */
.news-window {
  background: #fff;
  border: solid #ccc 1px;
  box-shadow: 0px 0px 10px #ccc;
  padding: 10px 10px;
  margin: 10px 0px;
}

.news-window h2 {
  font-size: 16px;
  color: #286090;
  margin-bottom: 5px;
}

.news-window h6 {
  text-align: center;
  list-style: 30px;
  font-size: 13px;
}

.news-window p {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
}

/* 实验探究(练习题) */
.explore {
  height: 30px;
  line-height: 30px;
  position: relative;
}

.explore h4 {
  position: absolute;
  left: 0px;
  top: 0px;
  border: solid #ccc 1px;
  height: 28px;
  line-height: 28px;
  width: 120px;
  border-radius: 30px;
  color: #286090;
  font-size: 16px;
  text-align: center;
  background: #fff;
  z-index: 10;
  font-weight: bold;
}

.explore span {
  border-top: solid #ccc 1px;
  display: block;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  z-index: 0;
}

.explore-main {
  margin-top: 10px;
}

.explore-main h2 {
  font-size: 15px;
  color: #286090;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.explore-main p {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
}

.explore-main table {
  display: block;
  margin: 10px auto;
  width: 350px;
  background: #fff;
  border: solid #ccc 1px;
  box-shadow: 0px 0px 10px #ccc;
}

.explore-main table td {
  border: solid #ccc 1px;
  width: 87px;
  line-height: 24px;
  text-align: center;
}

.explore-main table td input {
  border: none;
  background: none;
  padding: 0px 10px;
  width: 67px;
  line-height: 24px;
  outline: none;
}

/* 作业 */
.task {
}

.task-title {
  height: 24px;
  line-height: 24px;
  background: #667d43;
  color: #fff;
  font-size: 15px;
  padding-left: 30px;
  margin: 20px 0px;
}

.task-con {
}

.task-con h3 {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
  font-weight: normal;
}

.task-con h3 input {
  width: 40px;
  padding: 0px 10px;
  border: none;
  background: none;
  line-height: 20px;
  outline: none;
}

.task-con ul {
  margin-left: 30px;
}

.task-con ul li {
  float: left;
  width: 50%;
  line-height: 20px;
  font-size: 12px;
  list-style: none;
}

.task-con p {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
}

.task-con p input {
  border: none;
  background: none;
  border-bottom: solid #333333 1px;
  width: 21px;
  height: 20px;
  line-height: 20px;
  padding: 0px 5px;
  outline: none;
}

/* 请提问 */
.questions {
}

.questions-title {
  height: 24px;
  line-height: 24px;
  background: #4f8ab7;
  color: #fff;
  font-size: 15px;
  padding-left: 30px;
  margin: 10px 0px 10px 0px;
}

.questions-con p {
  line-height: 20px;
  text-indent: 2em;
  font-size: 13px;
  text-align: justify;
}

.questions-con p input {
  border: none;
  background: none;
  border-bottom: solid #333333 1px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  padding: 0px 5px;
  outline: none;
}

/* 模型弹框 */
.model-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 150;
  background-color: rgba(0, 0, 0, .6);
}

.model-wrapper .close {
  font-size: 2rem;
  color: rgba(255, 255, 255, .7);
  position: absolute;
  right: 10px;
  top: 10px;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, .5);
  cursor: pointer;
}