/*
  思源字体
 */
@font-face {
  font-family: 'iconfont';
  /* project id 180688 */
  src: url('//at.alicdn.com/t/font_180688_duyyajwwmq0bpgb9.eot');
  src: url('//at.alicdn.com/t/font_180688_duyyajwwmq0bpgb9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_180688_duyyajwwmq0bpgb9.woff') format('woff'), url('//at.alicdn.com/t/font_180688_duyyajwwmq0bpgb9.ttf') format('truetype'), url('//at.alicdn.com/t/font_180688_duyyajwwmq0bpgb9.svg#iconfont') format('svg');
}
@font-face {
  font-family: 'webfont';
  src: url('//at.alicdn.com/t/m5ku1kcyds4i.eot');
  /* IE9*/
  src: url('//at.alicdn.com/t/m5ku1kcyds4i.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/m5ku1kcyds4i.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/m5ku1kcyds4i.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/m5ku1kcyds4i.svg#思源黑体-极细') format('svg');
  /* iOS 4.1- */
}
.web-font {
  font-family: "webfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
html * {
  outline: none;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
i {
  font-style: normal;
}
body {
  background-image: url(../images/page4bg.jpg);
  margin: 0 ;
  padding: 0;
  font-size: 14px;
  font-family: "微软雅黑", "arial";
  background-color: #fff;
}
body * {
  font-family: "微软雅黑", "arial";
}
button {
  outline: none;
  border: none;
}
ul,
ol,
li,
dl,
dt,
dd,
h2 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}
p {
  margin: 0;
  padding: 0;
}
.center-block {
  margin: 0 auto;
  display: block;
}
.hide {
  display: none !important;
}
/*
  中间
  */
.contant {
  width: 1200px;
  margin: 0 auto;
}
.lastdiv {
  clear: both;
}
/*
 字体
  */
.font-ly {
  color: #f8ae39;
}
.font-yellow {
  color: #d0b883;
}
.font-top {
  color: #b28324;
}
.font-white {
  color: #fff;
}
.font-less {
  color: #999999;
}
.font-main {
  color: #666;
}
.font-54 {
  color: #545454;
}
.font-price {
  color: #f81232;
}
.font-green {
  color: #48c04c;
}
.fs12 {
  font-size: 12px;
}
.fs14 {
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
}
.fs18 {
  font-size: 18px;
}
.fs20 {
  font-size: 20px;
}
.fs22 {
  font-size: 22px;
}
.fs24 {
  font-size: 24px;
}
/*定位居中*/
.bg-yellow {
  background-color: #f1d517;
}
.bg-pink {
  background-color: #f4a7e8;
}
.bg-love {
  background-color: #eb7099;
}
.bg-blue {
  background-color: #6eccef;
}
/*fullpage*/
#fp-nav ul li a span {
  background-color: rgba(255, 255, 255, 0.5);
}
/*books strat*/
.flipbook-viewport {
  overflow: visible;
  width: 100%;
  height: 100%;
}
.flipbook-viewport .container {
  position: absolute;
  bottom: 0;
  left: 0%;
  margin: 0 auto;
  margin-top: -5px;
}
.flipbook-viewport .flipbook {
  width: 100%;
  height: 100%;
}
.flipbook-viewport .page {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: #fff;
  padding: 5px;
}
.flipbook .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);
}
.flipbook-viewport .page img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}
.flipbook-viewport .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 20px #ccc;
  -moz-box-shadow: 0 0 20px #ccc;
  -o-box-shadow: 0 0 20px #ccc;
  -ms-box-shadow: 0 0 20px #ccc;
  box-shadow: 0 0 20px #ccc;
}
/*books end*/
.clear {
  clear: both;
}
.btn-yellow {
  background-color: #f8ae39;
  border: none;
  color: #fff;
}
.btn-yellow:hover {
  background-color: #f7b956;
}
.btn-yellow:active {
  background-color: #ffbf59;
  transition: none;
}
button.delete {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50%;
  background-color: #e51717;
  margin-top: -5px;
  margin-right: -5px;
  cursor: pointer;
}
button.delete:before {
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  width: 16px;
  height: 2px;
  transform: rotate(45deg);
  display: block;
  background-color: #fff;
  border-radius: 99px;
  margin-left: -8px;
  margin-top: -1px;
}
button.delete:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  width: 16px;
  height: 2px;
  transform: rotate(-45deg);
  display: block;
  background-color: #fff;
  border-radius: 99px;
  margin-left: -8px;
  margin-top: -1px;
}
.vhide {
  visibility: hidden !important;
}
.shadowfocus {
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  padding: 4px;
  transition: all 0.3s;
}
.shadowfocus:focus {
  border: 1px solid #f8ae39;
  box-shadow: 0px 2px 4px #f3e4cc;
}
/*
 button test
 */
.ripple-container .ripple {
  background-color: rgba(255, 255, 255, 0.4);
  animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  80% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
/*
 datachose start
 * */
.datachose {
  text-align: right;
  height: 56px;
  width: 100%;
  z-index: 2;
  box-shadow: 0 2px 5px #d2d2d2;
}
.datachose select {
  float: left;
  height: 40px;
  border-radius: 4px;
  margin-top: 8px;
  margin-left: 8px;
}
.datachose .nice-select {
  margin-top: 8px;
  margin-left: 10px;
}
.datachose .total {
  line-height: 56px;
  color: #999999;
  margin-right: 12px;
}
.datachose .btn-save {
  width: 80px;
  height: 42px;
  float: right;
  background-color: #90cb44;
  color: #fff;
  margin-right: 10px;
  margin-top: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.datachose .btn-save:hover {
  background-color: #91d934;
}
.datachose .btn-save:active {
  background-color: #9ae637;
  transition: none;
}
.datachose.sm {
  width: 560px!important ;
}
.datachose.fixed {
  transition: margin-top 0.1s;
  position: absolute;
  width: 1000px;
  background-color: rgba(255, 255, 255, 0.8);
  top: 60px;
}
.datachose .searchbar {
  float: left;
  margin-top: 12px;
  margin-left: 10px;
  border-bottom: 1px solid #ccc;
}
.datachose .searchbar > input {
  border: none;
  outline: none;
  margin-bottom: 5px;
  line-height: 26px;
}
.datachose .searchbar > button {
  background-color: inherit;
  padding: 5px;
  cursor: pointer;
}
/*
 editlist start
 * */
.editlist {
  position: absolute;
  left: 0;
  top: 80px;
  margin-left: -96px;
}
.editlist li {
  color: #fff;
  margin-top: 20px;
  background-color: #d0b883;
  padding: 10px 20px;
  border-radius: 4px 0px 0px 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.editlist li:hover,
.editlist li.active {
  background-color: #b28324;
  font-size: 14px;
}
.editlist li:active {
  background-color: #cb9529;
  transition: none;
}
.editlist.fixed {
  transition: margin-top 0.1s;
  position: absolute;
  left: 50%;
  margin-left: -597px;
  top: 120px;
}
/*
 monthchose start
 * */
.monthchose {
  position: absolute;
  right: 0;
  top: 400px;
  margin-right: -100px;
}
.monthchose.fixed {
  transition: margin-top 0.1s;
  position: absolute;
  left: 50%;
  width: 92px;
  margin-left: 508px;
  top: 400px;
}
.monthchose li {
  transition: all 0.2s;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 4px;
  background-color: #fff;
  color: #545454;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #d1d1d1;
}
.monthchose li:hover {
  background-color: #f7f7f7;
}
.monthchose li:active {
  background-color: #fff;
  transition: none;
}
.monthchose li.btn-yellow {
  background-color: #f8ae39;
  border: none;
  color: #fff;
}
.monthchose li.btn-yellow:hover {
  background-color: #f7b956;
}
.monthchose li.btn-yellow:active {
  background-color: #ffbf59;
  transition: none;
}
/*
 monthchose end
 * */
/*
 clist start
 */
.clist {
  width: 100%;
}
.clist li {
  border-bottom: 1px solid #e6e6e6;
}
.clist li .leftdeta {
  width: 90px;
  float: left;
}
.clist li .leftdeta .datatip {
  width: 58px;
  height: 58px;
  background-color: #ffebc2;
  border: 1px solid #ffebc2;
  margin-top: 15px;
}
.clist li .leftdeta .datatip > div:nth-child(1) {
  background-color: #fff;
}
.clist li .leftdeta .datatip > div {
  text-align: center;
  line-height: 29px;
  color: #7a5a49;
}
.clist li .rightfonts {
  width: 450px;
  float: left;
  padding: 15px 0;
  /*图片区域*/
  /*底部3个按钮*/
}
.clist li .rightfonts .datatimechange {
  margin-bottom: 10px;
}
.clist li .rightfonts .datatimechange input {
  color: #888;
  border: none;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 10px 2px;
  cursor: pointer;
  box-shadow: none;
}
.clist li .rightfonts .wenzi {
  width: 100%;
  cursor: pointer;
}
.clist li .rightfonts .wenzi .texts {
  position: relative;
  font-size: 14px;
  color: #545454;
}
.clist li .rightfonts .wenzi .texts.restore:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.clist li .rightfonts .wenzi .texts.restore:after {
  content: '恢复';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -10px;
  margin-left: -10px;
  color: #fff;
  font-size: 16px;
  z-index: 2;
}
.clist li .rightfonts .wenzi textarea {
  background-color: #f7f7f7;
  width: 100%;
  border: none;
  resize: none;
  line-height: 20px;
  color: #545454;
  position: relative;
}
.clist li .rightfonts .wenzi.delete {
  text-decoration: line-through;
}
.clist li .rightfonts .wenzi.restore:before {
  display: block;
  content: '恢复';
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
}
.clist li .rightfonts .piclist {
  margin-top: 10px;
}
.clist li .rightfonts .piclist li {
  cursor: pointer;
  position: relative;
  width: 90px;
  overflow: hidden;
  height: 90px;
  float: left;
  margin-right: 10px;
  background-size: 100% 100%;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  margin-top: 10px;
}
.clist li .rightfonts .piclist li.delete:before {
  content: '删除';
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
}
.clist li .rightfonts .piclist li.restore:before {
  content: '恢复';
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
}
.clist li .rightfonts .bottombtngroup {
  margin-top: 40px;
}
.clist li .rightfonts .bottombtngroup button {
  float: right;
  margin-right: 10px;
  color: #d0b883;
  background-color: inherit;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.clist li .rightfonts .bottombtngroup button i {
  font-size: 22px;
  vertical-align: -3px;
  margin-right: 4px;
}
.clist li .rightfonts .bottombtngroup button:hover {
  color: #b28324;
}
/*
 clist end
 */
.datachange {
  width: 96px;
  float: left;
  line-height: 40px;
  border: 1px solid #ccc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-left: 10px;
  margin-top: 5px;
  background-color: inherit;
  cursor: pointer;
}
/*pic upload start*/
.picupload li {
  position: relative;
  width: 90px;
  height: 90px;
  float: left;
  margin-right: 15px;
  background-size: 100% 100%;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
}
.picupload li.upload {
  border: 1px dashed #ccc;
  cursor: pointer;
}
.picupload li.upload:before {
  content: '';
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background-color: #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -2px;
}
.picupload li.upload:after {
  content: '';
  width: 4px;
  height: 40px;
  border-radius: 99px;
  background-color: #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2px;
  margin-top: -20px;
}
/*pic upload end*/
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
/*loading弹出层*/
@-webkit-keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.loadingtc {
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.loadingtc .loadingbox {
  width: 190px;
  height: 130px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -95px;
  margin-top: -65px;
}
.loadingtc .loadingbox i {
  height: 40px;
  text-align: center;
  background-image: url(../images/loading.png);
  background-size: cover;
  background-position: center;
  -webkit-animation: roll 0.8s linear infinite;
  font-size: 40px;
  color: #fff;
  width: 40px;
  margin-top: 24px;
}
.loadingtc .loadingbox p {
  text-align: center;
  margin-top: 18px;
  color: #fff;
}
/*月份选择弹出层*/
.monthselecttcbox {
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}
.monthselecttcbox > div {
  width: 620px;
  background-color: #fff;
  min-height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
  padding: 14px 10px ;
  border-radius: 6px;
}
.monthselecttcbox .cover {
  margin-top: 12px;
  margin-right: 30px;
  float: left;
  width: 66px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  background-color: #ffc466;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
.monthselecttcbox .topselect {
  border-bottom: 1px solid #ccc;
  padding: 6px 0;
  position: relative;
}
.monthselecttcbox .topselect button {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 18px;
  background-color: inherit;
  color: #d0b883;
  cursor: pointer;
}
.monthselecttcbox .contbox {
  max-height: 600px;
  overflow-y: scroll;
  padding-bottom: 40px;
}
.monthselecttcbox dl {
  padding: 10px 0;
}
.monthselecttcbox dl dt {
  font-weight: bold;
}
.monthselecttcbox dl dd {
  margin-top: 12px;
  margin-right: 30px;
  float: left;
  width: 66px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  background-color: #ffc466;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
/*月份选择弹出层end*/
/*modetips start*/
.modetips {
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.modetips .modebtngroup button {
  float: right;
  line-height: 32px;
  width: 88px;
  margin-right: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.modetips .modebtngroup button:nth-child(1) {
  margin-right: 0;
}
.modetips .modebtngroup button.determine {
  background-color: #f8ae39;
  border: 1px solid #efb541;
  color: #fff;
}
.modetips .modebtngroup button.determine:hover {
  background-color: #ffc34b;
}
.modetips .modebtngroup button.determine:active {
  background-color: #f8ae39;
}
.modetips .modebtngroup button.cancel {
  width: 68px;
  background-color: #fff;
  border: 1px solid #cccccc;
  color: #999999;
}
.modetips .modebtngroup button.cancel:hover {
  background-color: #f0f0f0;
}
.modetips .modebtngroup button.cancel:active {
  background-color: #fff;
}
.modetips .modeboxtype-1 {
  width: 438px;
  height: 180px;
  background-color: #fff;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -219px;
  margin-top: -140px;
  padding: 10px 16px;
  box-shadow: 0px 4px 8px rgba(36, 36, 36, 0.2);
}
.modetips .modeboxtype-1 h5 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #f8ae39;
  font-weight: normal;
}
.modetips .modeboxtype-1 p {
  margin-top: 10px;
  font-size: 14px;
  color: #545454;
  min-height: 95px;
  padding-bottom: 5px;
  text-align: justify;
}
/*modetips end*/
/*提示层*/
/*提示层*/
/*封面选择 singalcoverchose*/
.singalcoverchose,
.dobcoverchose {
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}
.singalcoverchose > div,
.dobcoverchose > div {
  width: 620px;
  background-color: #fff;
  min-height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
  padding: 14px 10px ;
  border-radius: 6px;
}
.singalcoverchose .topselect,
.dobcoverchose .topselect {
  border-bottom: 1px solid #ccc;
  padding: 6px 0;
  position: relative;
}
.singalcoverchose .topselect button,
.dobcoverchose .topselect button {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 18px;
  background-color: inherit;
  color: #d0b883;
  cursor: pointer;
}
.singalcoverchose .contbox,
.dobcoverchose .contbox {
  max-height: 600px;
  overflow-y: scroll;
  padding-bottom: 40px;
  width: 588px;
  margin: 0 auto;
  display: block;
}
.singalcoverchose .contbox ol li,
.dobcoverchose .contbox ol li {
  width: 33%;
  float: left;
  margin-top: 18px;
  cursor: pointer;
}
.singalcoverchose .contbox ol li img,
.dobcoverchose .contbox ol li img {
  width: 140px;
  border: 1px solid #e5e5e5;
  position: relative;
  transition: all 0.3s;
}
.singalcoverchose .contbox ol li img:hover,
.dobcoverchose .contbox ol li img:hover {
  border: 1px solid #e6a926;
  box-shadow: 0px 2px 2px rgba(230, 170, 30, 0.2);
}
.singalcoverchose .contbox ol .coveruploader > div,
.dobcoverchose .contbox ol .coveruploader > div {
  margin: 0 auto;
  display: block;
  width: 140px;
  height: 80px;
  border-radius: 8px;
  color: #b3b3b3;
  line-height: 78px;
  text-align: center;
  font-size: 18px;
  border: 1px dashed #ccc;
}
.singalcoverchose .dobcontbox,
.dobcoverchose .dobcontbox {
  max-height: 600px;
  overflow-y: scroll;
  padding-bottom: 40px;
  width: 588px;
  margin: 0 auto;
  display: block;
}
.singalcoverchose .dobcontbox ol li,
.dobcoverchose .dobcontbox ol li {
  transition: all 0.3s;
  cursor: pointer;
  width: 260px;
  float: left;
  margin: 0px 10px;
  margin-top: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.singalcoverchose .dobcontbox ol li > div,
.dobcoverchose .dobcontbox ol li > div {
  width: 50%;
  float: left;
}
.singalcoverchose .dobcontbox ol li img,
.dobcoverchose .dobcontbox ol li img {
  width: 116px;
}
.singalcoverchose .dobcontbox ol li:hover,
.dobcoverchose .dobcontbox ol li:hover {
  border: 1px solid #e6a926;
  box-shadow: 0px 2px 2px rgba(230, 170, 30, 0.2);
}
/*封面选择*/
.teachtcbox {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.teachtcbox .tipbox {
  width: 730px;
  height: 570px;
  border-radius: 4px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -360px;
  margin-top: -285px;
}
.teachtcbox .tipbox .topimgbox {
  width: 560px;
  height: 400px;
  margin: 0 auto;
  background-color: #fafafa;
  margin-top: 30px;
}
.teachtcbox .tipbox .tipfont {
  margin-top: 10px;
}
.teachtcbox .tipbox button {
  width: 170px;
  height: 36px;
  border-radius: 4px;
  margin-top: 40px;
  cursor: pointer;
}
/*modetips start*/
.modetips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.modetips .modebtngroup button {
  float: right;
  line-height: 32px;
  width: 88px;
  margin-right: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.modetips .modebtngroup button:nth-child(1) {
  margin-right: 0;
}
.modetips .modebtngroup button.determine {
  background-color: #f8ae39;
  border: 1px solid #efb541;
  color: #fff;
}
.modetips .modebtngroup button.determine:hover {
  background-color: #ffc34b;
}
.modetips .modebtngroup button.determine:active {
  background-color: #f8ae39;
}
.modetips .modebtngroup button.cancel {
  width: 68px;
  background-color: #fff;
  border: 1px solid #cccccc;
  color: #999999;
}
.modetips .modebtngroup button.cancel:hover {
  background-color: #f0f0f0;
}
.modetips .modebtngroup button.cancel:active {
  background-color: #fff;
}
.modetips .modeboxtype-1 {
  width: 438px;
  height: 180px;
  background-color: #fff;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -219px;
  margin-top: -140px;
  padding: 10px 16px;
  box-shadow: 0px 4px 8px rgba(36, 36, 36, 0.2);
}
.modetips .modeboxtype-1 h5 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #f8ae39;
  font-weight: normal;
}
.modetips .modeboxtype-1 p {
  margin-top: 10px;
  font-size: 14px;
  color: #545454;
  min-height: 95px;
  padding-bottom: 5px;
  text-align: justify;
}
/*modetips end*/
.i-default:before {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
  display: block;
  background-color: #fafafa;
  border-radius: 50%;
}
.i-pass:before {
  content: '';
  width: 26px;
  height: 26px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -13px;
  margin-top: -13px;
  display: block;
  background-image: url(../images/haspass.png);
  background-size: cover;
  border-radius: 50%;
}
#drag {
  float: left;
  position: relative;
  background-color: #e8e8e8;
  width: 230px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  margin-left: 10px;
}
#drag .handler {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 35px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
}
.handler_ok_bg {
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
}
#drag .drag_bg {
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
}
#drag .drag_text {
  position: absolute;
  top: 0px;
  width: 230px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
.topnav {
  position: fixed;
  background-color: rgba(250, 250, 250, 0.8);
  z-index: 99;
  left: 0;
  top: 0;
  height: 60px;
  width: 100%;
  min-width: 1200px;
}
.topnav .contant {
  padding-right: 15px;
}
.topnav .logobox {
  width: 230px;
  height: 60px;
  float: left;
  background-color: #fff;
}
.topnav .logobox .logo {
  float: left;
  margin-top: 5px;
  margin-left: 16px ;
}
.topnav .logobox p {
  float: left;
  margin-left: 15px;
  margin-top: 6px;
  line-height: 24px;
  font-size: 16px;
}
.topnav .rightnavbox {
  float: right;
}
.topnav .rightnavbox ol li {
  float: left;
  text-align: center;
  padding: 5px 20px;
  margin: 14px 10px 0px 10px;
  color: #b28324;
  position: relative;
  cursor: pointer;
}
.topnav .rightnavbox ol li a {
  display: block;
  width: 100%;
  height: 100%;
}
.topnav .rightnavbox ol li:hover:before {
  opacity: 1;
}
.topnav .rightnavbox ol li:before {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #b28324;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: -17px;
  opacity: 0;
  transition: all 0.2s;
}
.topnav .rightnavbox ol li.active:before {
  opacity: 1;
}
.topnav .rightnavbox ol li.hasbg {
  background-color: #996b0f;
  color: #fff;
  border-radius: 99px;
  transition: all 0.3s;
  margin-left: 20px;
  margin-right: 0;
}
.topnav .rightnavbox ol li.hasbg:hover {
  background-color: #b9892a;
}
.topnav .rightnavbox ol li.hasbg:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 30px;
  background-color: #996b0f;
  margin-left: -20px;
  display: block;
  opacity: 1;
}
/*
 FULLPAGEHOME
 */
#fullpage {
  /*
     page1-over
    */
  /*
    page2over
     */
  /*
     page3 over
     */
  /*page4 over*/
}
#fullpage .page1 {
  position: relative;
  overflow: hidden;
  /*背景*/
  /*书*/
}
#fullpage .page1 .p1bg {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -530px;
  transform: scale(1.4, 1.4);
  z-index: 2;
}
#fullpage .page1 .zhezhao {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#fullpage .page1 .p1book {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -535px;
  margin-top: -330px;
  z-index: 3;
}
@media (max-width: 1400px) {
  #fullpage .page1 .p1book {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -500px;
    margin-top: -255px;
    width: 430px;
  }
}
#fullpage .page1 .p1biaoti {
  width: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 100px;
  margin-top: -260px;
  z-index: 3;
  color: #fff;
  font-size: 80px;
  letter-spacing: 5px;
}
#fullpage .page1 .p1fbiaoti {
  width: 330px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 106px;
  margin-top: -65px;
  margin-top: -moz-calc(-50px);
  background-color: #a72324;
  z-index: 3;
  color: #fff;
  font-size: 22px;
  padding: 6px 30px;
  letter-spacing: 8px;
  border-radius: 8px;
}
#fullpage .page1 .page1price {
  width: 309px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 127px;
  margin-top: 0px;
  z-index: 3;
  color: #fff;
  text-align: right;
  line-height: 20px;
  font-size: 22px;
}
#fullpage .page1 .page1price span {
  font-weight: bold;
  color: #f8d046;
  font-size: 24px;
}
#fullpage .page1 .madebookbtn {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 240px;
  margin-top: 100px;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 100;
  z-index: 4;
  width: 200px;
  height: 54px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background-image: -moz-linear-gradient(top, #facb59, #fdb11d);
  /* Firefox */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #facb59), color-stop(1, #fdb11d));
  /* Saf4+, Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#facb59', endColorstr='#fdb11d', GradientType='0');
  /* IE*/
  box-shadow: 0px 2px 0px #ea7c11;
}
#fullpage .page1 .madebookbtn:active {
  box-shadow: none;
  margin-top: 102px ;
}
#fullpage .page1 .madebookbtn:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 222, 107, 0.2);
  opacity: 0;
  transition: all 0.3s;
}
#fullpage .page1 .madebookbtn:hover:before {
  opacity: 1;
}
#fullpage .page1 .p1bg.move {
  transform: scale(1, 1);
  transition: all 5s ease;
}
#fullpage .page2 {
  position: relative;
}
#fullpage .page2 .p2bg {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -530px;
  z-index: 2;
}
#fullpage .page2 .zhezhao {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  background-color: rgba(28, 28, 28, 0.4);
  opacity: 1;
  transition: all 1s;
}
#fullpage .page2 .zhezhao.op0 {
  opacity: 0;
}
#fullpage .page2 .page2phone {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -500px;
  margin-top: -300px;
  z-index: 4;
}
#fullpage .page2 .phonepm {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -474px;
  margin-top: -219px;
  width: 250px;
  height: 444px;
  background-color: green;
  z-index: 5;
  overflow: hidden;
}
#fullpage .page2 .phonepm .bigpm {
  transition: all 0.4s;
  width: 750px;
  position: absolute;
  left: 0;
  top: 0;
  height: 444px;
  background-color: red;
}
#fullpage .page2 .phonepm .bigpm img {
  width: 250px;
  float: left;
}
#fullpage .page2 .rightfonts {
  font-size: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0px;
  margin-top: -290px;
  color: #fff;
  z-index: 3;
  width: 525px;
}
#fullpage .page2 .step {
  border-left: 1px solid #2fa9bb;
  width: 530px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 5px;
  margin-top: -170px;
  z-index: 3;
}
#fullpage .page2 .step dt {
  color: #fff;
  font-size: 22px;
  padding: 6px 15px;
  background-color: #2fa9bb;
  width: 400px;
  border-radius: 4px 4px 4px 0px;
  letter-spacing: 2px;
}
#fullpage .page2 .step dd {
  position: relative;
  cursor: pointer;
  margin-top: 60px;
}
#fullpage .page2 .step dd * {
  transition: all 0.3s;
}
#fullpage .page2 .step dd:nth-child(2) {
  margin-top: 50px;
}
#fullpage .page2 .step dd:before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -9px;
  margin-top: -9px;
  z-index: -1;
  background-color: #2fa9bb;
}
#fullpage .page2 .step dd .leftbox {
  width: 72px;
  height: 72px;
  text-align: center;
  background-color: #2fa9bb;
  float: left;
  color: #fff;
  opacity: 0.8;
}
#fullpage .page2 .step dd .leftbox i {
  font-size: 36px;
  font-weight: bold;
}
#fullpage .page2 .step dd .rightbox {
  height: 72px;
  float: right;
  background-color: rgba(255, 255, 255, 0.8);
  width: 457px;
  padding: 8px 12px;
  line-height: 26px;
  font-size: 16px;
}
#fullpage .page2 .step dd .rightbox span {
  font-size: 14px;
  color: #999999;
}
#fullpage .page2 .step dd.active .leftbox {
  opacity: 1;
}
#fullpage .page2 .step dd.active .rightbox {
  background-color: #ffffff;
}
#fullpage .page3 {
  overflow: hidden;
}
#fullpage .page3 .p1bg {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -530px;
  z-index: 2;
}
#fullpage .page3 .cover-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -555px;
  margin-top: -335px;
  width: 360px;
  z-index: 3;
}
#fullpage .page3 .cover-2 {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -185px;
  margin-top: -250px;
  z-index: 3;
}
#fullpage .page3 .cover-3 {
  width: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -555px;
  margin-top: 175px;
  z-index: 3;
}
#fullpage .page3 .cover-4 {
  width: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -265px;
  margin-top: 175px;
  z-index: 3;
}
#fullpage .page3 .rightfonttop {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 205px;
  margin-top: -246px;
  z-index: 3;
}
#fullpage .page3 p.miaoshu {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 205px;
  margin-top: -120px;
  z-index: 3;
  font-size: 18px;
  color: #6a6470;
  line-height: 36px;
  width: 330px;
  text-align: justify;
}
#fullpage .page4 {
  background-image: url(../images/page4bg.jpg);
  position: relative;
  overflow: hidden;
}
#fullpage .page4 .midtopfont {
  width: 1200px;
  position: relative;
  margin-top: 100px;
  z-index: 3;
  text-align: center;
  font-size: 34px;
  font-weight: lighter;
  color: #666;
}
#fullpage .page4 .midtopfont span {
  color: #f4b63e;
  font-size: 40px;
}
#fullpage .page4 .booktype {
  width: 1200px ;
  position: relative;
  margin-top: 20px;
  text-align: center;
}
#fullpage .page4 .booktype li {
  display: inline-block;
  width: 120px;
  line-height: 36px;
  font-size: 16px;
  color: #fff;
  border-radius: 99px;
  margin: 0 10px;
}
#fullpage .page4 .book {
  margin: 0 auto;
  display: block;
  width: 1200px;
}
#fullpage .page4 .flipbook-viewport {
  margin: 0 auto;
  display: block;
  width: 920px;
  height: 620px;
  margin-top: 20px;
}
#fullpage .page4 .centetrbtn {
  width: 1200px;
  margin: 0 auto;
  display: block;
}
#fullpage .page4 .madebookbtn {
  margin-top: 10px;
  font-size: 15px;
  color: #fff;
  width: 180px;
  height: 46px;
  border-radius: 99px;
  border: none;
  background-image: -moz-linear-gradient(top, #f7c460, #f9aa25);
  /* Firefox */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7c460), color-stop(1, #f9aa25));
  /* Saf4+, Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7c460', endColorstr='#f9aa25', GradientType='0');
  /* IE*/
  box-shadow: 0 6px 7px rgba(247, 182, 25, 0.3);
  cursor: pointer;
  position: relative;
}
#fullpage .page4 .madebookbtn:active {
  box-shadow: none;
  margin-top: 11px;
}
@media (max-width: 1400px) {
  #fullpage .page4 .midtopfont {
    margin-top: 70px;
  }
  #fullpage .page4 .booktype {
    margin-top: 10px;
  }
  #fullpage .page4 .flipbook-viewport {
    margin-top: 10px;
    width: 780px;
    height: 516px;
  }
}
#fullpage .page5 {
  padding-top: 60px;
  background-image: url(../images/page4bg.jpg);
}
/* #fullpage over*/
/*
 * bookshelf  start
 */
.bookshelf,
.ordersub {
  width: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
  min-width: 1200px;
  overflow: hidden;
  padding-bottom: 20px;
}
.bookshelf .bookslist,
.ordersub .bookslist {
  width: 1170px;
  background-color: #fff;
  min-height: 600px;
  margin-top: 35px;
  box-shadow: 0px 4px 8px rgba(36, 36, 36, 0.2);
  padding: 36px 15px 10px 15px ;
}
.bookshelf .bookslist ol,
.ordersub .bookslist ol {
  width: 100%;
}
.bookshelf .bookslist ol li,
.ordersub .bookslist ol li {
  border-bottom: 4px solid #c8c8c8;
  margin-bottom: 40px;
  width: 50%;
  float: left;
  height: 280px;
  padding-left: 50px;
}
.bookshelf .bookslist ol li .leftbookcover,
.ordersub .bookslist ol li .leftbookcover {
  position: relative;
  box-shadow: 0 2px 4px rgba(36, 36, 36, 0.2);
  background-size: cover;
  width: 190px;
  height: 264px;
  background-color: #ccc;
  float: left;
  transition: all 0.4s;
}
.bookshelf .bookslist ol li .leftbookcover .redobook,
.ordersub .bookslist ol li .leftbookcover .redobook {
  opacity: 0;
  transition: all 0.4s;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.bookshelf .bookslist ol li .leftbookcover .redobook button,
.ordersub .bookslist ol li .leftbookcover .redobook button {
  cursor: pointer;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
}
.bookshelf .bookslist ol li .leftbookcover .redobook button i,
.ordersub .bookslist ol li .leftbookcover .redobook button i {
  font-size: 40px;
}
.bookshelf .bookslist ol li .leftbookcover:hover .redobook,
.ordersub .bookslist ol li .leftbookcover:hover .redobook {
  opacity: 1;
}
.bookshelf .bookslist ol li:hover .leftbookcover,
.ordersub .bookslist ol li:hover .leftbookcover {
  box-shadow: 0 4px 8px rgba(36, 36, 36, 0.4);
}
.bookshelf .bookslist ol li .right,
.ordersub .bookslist ol li .right {
  width: 300px;
  height: 264px;
  float: left;
  margin-left: 20px;
  padding-top: 20px;
}
.bookshelf .bookslist ol li .right .bookname,
.ordersub .bookslist ol li .right .bookname {
  font-size: 18px;
  color: #545454;
  width: 300px;
  height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookshelf .bookslist ol li .right .tip,
.ordersub .bookslist ol li .right .tip {
  float: left;
  margin-top: 10px;
  padding: 8px 10px;
  color: #fff;
  line-height: 14px;
  border-radius: 2px;
}
.bookshelf .bookslist ol li .right .tip.weixin,
.ordersub .bookslist ol li .right .tip.weixin {
  background-color: #3dce3d;
}
.bookshelf .bookslist ol li .right .pnumber,
.ordersub .bookslist ol li .right .pnumber {
  margin-top: 80px;
  font-size: 16px;
  color: #999999;
}
.bookshelf .bookslist ol li .right .btn-group,
.ordersub .bookslist ol li .right .btn-group {
  margin-top: 24px;
}
.bookshelf .bookslist ol li .right .btn-group button,
.ordersub .bookslist ol li .right .btn-group button {
  width: 130px;
  float: left;
  line-height: 36px;
  border-radius: 2px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  border-radius: 99px;
}
.bookshelf .bookslist ol li .right .btn-group button.thpe-1,
.ordersub .bookslist ol li .right .btn-group button.thpe-1 {
  background-color: #ebf4b2;
  border: 1px solid #dfe99d;
  color: #6e782e;
}
.bookshelf .bookslist ol li .right .btn-group button.thpe-1:active,
.ordersub .bookslist ol li .right .btn-group button.thpe-1:active {
  background-color: #f6ffba;
}
.bookshelf .bookslist ol li .right .btn-group button.thpe-2,
.ordersub .bookslist ol li .right .btn-group button.thpe-2 {
  background-color: #ffe7ab;
  border: 1px solid #f3d382;
  margin-left: 20px;
  color: #7a5a49;
}
.bookshelf .bookslist ol li .right .btn-group button.thpe-2:active,
.ordersub .bookslist ol li .right .btn-group button.thpe-2:active {
  background-color: #fff0cc;
}
.bookshelf .bookslist ol .madebook:hover .leftbookcover,
.ordersub .bookslist ol .madebook:hover .leftbookcover {
  box-shadow: none;
}
.bookshelf .bookslist ol .madebook .leftbookcover,
.ordersub .bookslist ol .madebook .leftbookcover {
  box-shadow: none;
  border: 2px dashed #ccc;
  position: relative;
  opacity: 0.6;
}
.bookshelf .bookslist ol .madebook .leftbookcover .addicon,
.ordersub .bookslist ol .madebook .leftbookcover .addicon {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin-top: -30px;
  margin-left: -30px;
}
.bookshelf .bookslist ol .madebook .leftbookcover .addicon:before,
.ordersub .bookslist ol .madebook .leftbookcover .addicon:before,
.bookshelf .bookslist ol .madebook .leftbookcover .addicon:after,
.ordersub .bookslist ol .madebook .leftbookcover .addicon:after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 6px;
  margin-left: -18px;
  margin-top: -3px;
  border-radius: 99px;
  content: '';
  display: block;
  background-color: #fff;
}
.bookshelf .bookslist ol .madebook .leftbookcover .addicon:after,
.ordersub .bookslist ol .madebook .leftbookcover .addicon:after {
  width: 6px;
  height: 36px;
  margin-left: -3px;
  margin-top: -18px;
}
.bookshelf .bookslist ol .madebook .shutong,
.ordersub .bookslist ol .madebook .shutong {
  width: 190px;
  margin-top: 10px;
}
.bookshelf .bookslist ol .madebook .shutong-ewm,
.ordersub .bookslist ol .madebook .shutong-ewm {
  margin-top: 20px;
}
.bookshelf .bookslist ol .madebook .shutong-ewm img,
.ordersub .bookslist ol .madebook .shutong-ewm img {
  width: 140px;
  height: 140px;
}
/*
 * bookshelf  end
 */
/*
 pagetop start
 * */
.topmainpic {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 100%;
  height: 235px;
}
.topmainpic img {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -960px;
}
.topmainpic .rect {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 160px;
  height: 160px;
  background-color: rgba(123, 123, 123, 0.2);
  border-radius: 50%;
  margin-left: -80px;
}
.topmainpic .rect .mid {
  background-color: rgba(14, 14, 14, 0.3);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126px;
  height: 126px;
  margin-top: -63px;
  margin-left: -63px;
  color: #fff;
  line-height: 126px;
  text-align: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 100;
}
/*
 pagetop end
 * 
 * */
.footer {
  margin-top: 40px;
  width: 100%;
  min-width: 1200px;
  height: 240px;
  background-color: #333;
}
.footer .contant {
  width: 1200px;
  margin: 0 auto;
  display: block;
  color: #ccc;
  color: #fff;
}
.footer .contant:nth-child(1) {
  border-bottom: 1px solid #656565;
  padding: 20px 30px 0px 30px;
}
.footer .contant:nth-child(2) {
  padding: 9px 30px 0px 30px;
}
.footer .contant dl {
  float: left;
}
.footer .contant dl dt {
  font-size: 16px;
}
.footer .contant dl dd {
  font-size: 14px;
  margin-top: 14px;
}
.footer .contant dl dd .contentbefore {
  display: inline-block;
  width: 90px;
}
.footer .contant .ewm {
  float: right;
  width: 240px;
}
.footer .contant .ewm .ewmbox {
  padding: 6px;
}
.footer .contant .ewm > div:nth-child(1) {
  width: 140px;
  height: 140px;
  background-color: #fff;
  border-radius: 4px;
}
.footer .contant .ewm > div:nth-child(2) {
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.copyright {
  text-align: center;
  width: 100%;
  min-width: 1200px;
  background-color: #1a1a1a;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
}
/*
 book edit start
 */
.bookchange,
.bookedit {
  min-width: 1200px;
  overflow: hidden;
}
.bookedit {
  padding-bottom: 20px;
}
.bigeditlist {
  margin-top: 20px;
  width: 100%;
  min-width: 1200px;
}
.bigeditlist .editing {
  box-shadow: 0 2px 8px rgba(36, 36, 36, 0.2);
  width: 1000px;
  margin: 0 auto;
  display: block;
  min-height: 600px;
  background-color: #fff;
  position: relative;
}
.bigeditlist .editing .bookview {
  width: 100%;
}
.bigeditlist .editing .bookview .bookpage {
  width: 50%;
  float: left;
  padding: 14px 10px;
}
.bigeditlist .editing .bookview .bookpage .pages {
  border: 1px solid #ccc;
  width: 478px;
  height: 679px;
}
/*
 book edit end
 * 
 * */
/*
bookchange start
 * 
 * */
.bookchange .changelist {
  margin-top: 20px;
  width: 100%;
  min-width: 1200px;
  padding-bottom: 20px;
}
.bookchange .changelist .changeing {
  /*回收站*/
  /*回收站*/
  box-shadow: 0 2px 8px rgba(36, 36, 36, 0.2);
  width: 560px;
  margin: 0 auto;
  display: block;
  min-height: 600px;
  background-color: #fff;
  position: relative;
}
.bookchange .changelist .changeing .reback {
  margin-top: 20px;
  float: left;
  margin-left: 17px;
  color: #b28324;
}
.bookchange .changelist .changeing .clist li > .changepage {
  margin-top: 4px;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  line-height: 40px;
  color: #d0b883;
  opacity: 0;
  transition: all 0.6s;
}
.bookchange .changelist .changeing .clist li > .changepage.showpage {
  height: 40px;
  opacity: 1;
}
.bookchange .changelist .changeing .monthtop {
  float: left;
  margin-top: 7px;
  margin-left: 7px;
  color: #f8ae39;
  font-size: 16px;
}
.bookchange .changelist .changeing .monthmiaoshu {
  margin-left: -63px;
  font-size: 14px;
  color: #545454;
  float: left;
  margin-top: 32px;
}
/*
bookchange end
 * 
 * */
/*
 monthlist
 * */
.monthlist {
  margin-top: 8px;
  padding: 5px 10px ;
}
.monthlist dt {
  font-size: 16px;
  color: #545454;
  margin-top: 8px;
  padding-right: 8px;
  margin-bottom: 5px;
}
.monthlist dt button {
  line-height: 24px;
  float: right;
  background-color: inherit;
  color: #999999;
  font-size: 12px;
  margin-right: 5px;
  padding: 0px 5px;
  line-height: 20px;
  cursor: pointer;
}
.monthlist dd {
  width: 70px;
  height: 42px;
  border-radius: 2px;
  text-align: center;
  float: left;
  line-height: 42px;
  border: 1px solid #f8ae39;
  color: #f8ae39;
  margin: 8px 20px 8px 0;
  cursor: pointer;
  transition: all 0.2s;
}
.monthlist dd.sele {
  background-color: #f8ae39;
  color: #fff;
}
/*monethlist end*/
/*
 addcontent start
 */
.addcontent {
  padding: 5px 10px;
}
.addcontent li {
  margin-top: 14px;
}
.addcontent li .datainput {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  margin-top: 6px;
}
.addcontent li textarea {
  margin-top: 6px;
  width: 100%;
  font-size: 14px;
  color: #545454;
}
/*
 addcontent end
 */
/*
 bookcover edit start
 * */
.bookcover {
  padding-bottom: 20px;
}
.bookcover ol li,
.bookcover dl li,
.bookcover ol dt,
.bookcover dl dt {
  position: relative;
  padding: 0 15px;
  margin-top: 15px;
}
.bookcover ol li .icon-question,
.bookcover dl li .icon-question,
.bookcover ol dt .icon-question,
.bookcover dl dt .icon-question {
  color: #f8ae39;
  margin-left: 5px;
  cursor: pointer;
}
.bookcover ol li input,
.bookcover dl li input,
.bookcover ol dt input,
.bookcover dl dt input {
  height: 36px;
}
.bookcover ol li input,
.bookcover dl li input,
.bookcover ol dt input,
.bookcover dl dt input,
.bookcover ol li textarea,
.bookcover dl li textarea,
.bookcover ol dt textarea,
.bookcover dl dt textarea {
  width: 100%;
  border-radius: 4px;
  margin-top: 5px;
  color: #545454;
}
.bookcover ol li .name,
.bookcover dl li .name,
.bookcover ol dt .name,
.bookcover dl dt .name {
  float: left;
}
.bookcover ol li .hengpai,
.bookcover dl li .hengpai,
.bookcover ol dt .hengpai,
.bookcover dl dt .hengpai {
  cursor: pointer;
  float: right;
}
.bookcover ol li .hengpai > div,
.bookcover dl li .hengpai > div,
.bookcover ol dt .hengpai > div,
.bookcover dl dt .hengpai > div {
  float: left;
  margin-right: 6px;
}
.bookcover ol li .radiochose,
.bookcover dl li .radiochose,
.bookcover ol dt .radiochose,
.bookcover dl dt .radiochose {
  position: relative;
  float: left;
  display: block;
  top: 0px;
  margin-left: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #b28324;
  background-color: #fff;
}
.bookcover ol li .radiochose span,
.bookcover dl li .radiochose span,
.bookcover ol dt .radiochose span,
.bookcover dl dt .radiochose span {
  position: absolute;
  font-size: 18px;
  color: #fff;
  left: 0px;
  top: -1px;
  display: none;
}
.bookcover ol li .radiochose.active,
.bookcover dl li .radiochose.active,
.bookcover ol dt .radiochose.active,
.bookcover dl dt .radiochose.active {
  background-color: #b28324;
}
.bookcover ol li .radiochose.active > span,
.bookcover dl li .radiochose.active > span,
.bookcover ol dt .radiochose.active > span,
.bookcover dl dt .radiochose.active > span {
  display: block;
}
.bookcover ol li .hrefbox > div,
.bookcover dl li .hrefbox > div,
.bookcover ol dt .hrefbox > div,
.bookcover dl dt .hrefbox > div,
.bookcover ol li .fullbox > div,
.bookcover dl li .fullbox > div,
.bookcover ol dt .fullbox > div,
.bookcover dl dt .fullbox > div {
  width: 50%;
  float: left;
  position: relative;
  margin-top: 15px;
}
.bookcover ol li .hrefbox > div img,
.bookcover dl li .hrefbox > div img,
.bookcover ol dt .hrefbox > div img,
.bookcover dl dt .hrefbox > div img,
.bookcover ol li .fullbox > div img,
.bookcover dl li .fullbox > div img,
.bookcover ol dt .fullbox > div img,
.bookcover dl dt .fullbox > div img {
  width: 60%;
  max-height: 222px;
  margin: 0 auto;
  display: block;
  border: 1px solid #e5e5e5;
}
.bookcover ol li .hrefbox > div:hover button,
.bookcover dl li .hrefbox > div:hover button,
.bookcover ol dt .hrefbox > div:hover button,
.bookcover dl dt .hrefbox > div:hover button,
.bookcover ol li .fullbox > div:hover button,
.bookcover dl li .fullbox > div:hover button,
.bookcover ol dt .fullbox > div:hover button,
.bookcover dl dt .fullbox > div:hover button {
  top: 50%;
  opacity: 1;
}
.bookcover ol li .hrefbox > div.clear,
.bookcover dl li .hrefbox > div.clear,
.bookcover ol dt .hrefbox > div.clear,
.bookcover dl dt .hrefbox > div.clear,
.bookcover ol li .fullbox > div.clear,
.bookcover dl li .fullbox > div.clear,
.bookcover ol dt .fullbox > div.clear,
.bookcover dl dt .fullbox > div.clear {
  float: none;
}
.bookcover ol li .hrefbox button,
.bookcover dl li .hrefbox button,
.bookcover ol dt .hrefbox button,
.bookcover dl dt .hrefbox button,
.bookcover ol li .fullbox button,
.bookcover dl li .fullbox button,
.bookcover ol dt .fullbox button,
.bookcover dl dt .fullbox button {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -44px;
  margin-top: -44px;
  opacity: 0;
  transition: all 0.3s;
}
.bookcover ol li .hrefbox button i,
.bookcover dl li .hrefbox button i,
.bookcover ol dt .hrefbox button i,
.bookcover dl dt .hrefbox button i,
.bookcover ol li .fullbox button i,
.bookcover dl li .fullbox button i,
.bookcover ol dt .fullbox button i,
.bookcover dl dt .fullbox button i {
  font-size: 32px;
}
.bookcover ol li .hrefbox button span,
.bookcover dl li .hrefbox button span,
.bookcover ol dt .hrefbox button span,
.bookcover dl dt .hrefbox button span,
.bookcover ol li .fullbox button span,
.bookcover dl li .fullbox button span,
.bookcover ol dt .fullbox button span,
.bookcover dl dt .fullbox button span {
  font-size: 12px;
}
.bookcover ol li .fullbox,
.bookcover dl li .fullbox,
.bookcover ol dt .fullbox,
.bookcover dl dt .fullbox {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin: 5px 20px;
  padding-bottom: 15px;
}
.bookcover ol li .fullbox > div img,
.bookcover dl li .fullbox > div img,
.bookcover ol dt .fullbox > div img,
.bookcover dl dt .fullbox > div img {
  border: none;
}
.bookcover ol li .fullbox:hover button,
.bookcover dl li .fullbox:hover button,
.bookcover ol dt .fullbox:hover button,
.bookcover dl dt .fullbox:hover button {
  top: 50%;
  opacity: 1;
}
.bookcover ol li .nopic,
.bookcover dl li .nopic,
.bookcover ol dt .nopic,
.bookcover dl dt .nopic {
  width: 60%;
  height: 90px;
  border-radius: 4px;
  padding-top: 20px;
  font-size: 18px;
  background-color: #ebebeb;
  color: #b2b2b2;
}
/*
 bookcover edit end
 * */
/*login start*/
.login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.login .pmblack {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.login .ewm {
  box-shadow: 0px 2px 10px rgba(76, 76, 76, 0.4);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -255px;
  margin-top: -300px;
  width: 500px;
  height: 336px;
  border-radius: 4px;
  background-color: #fff;
}
.login .ewm h3 {
  text-align: center;
  font-weight: normal;
}
.login .ewm .ma {
  position: relative;
  height: 230px;
}
.login .ewm .ma .left {
  transition: all 0.4s;
  width: 186px;
  height: 186px;
  position: absolute;
  left: 50%;
  margin-left: -93px;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 4px;
  background-size: cover;
}
.login .ewm .ma .left > div {
  display: none;
  opacity: 0;
  transition: all 0.3s;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  border-radius: 6px;
  color: #fff;
  text-align: center;
}
.login .ewm .ma .left > div i {
  font-size: 70px;
  line-height: 120px;
}
.login .ewm .ma .left > div span {
  line-height: 26px;
}
.login .ewm .ma .left > div.show {
  display: block;
  opacity: 1;
}
.login .ewm .ma .right {
  transition: all 0.4s;
  width: 186px;
  height: 186px;
  position: absolute;
  left: 50%;
  margin-left: -93px;
  opacity: 0;
}
.login .ewm .ma:hover .left {
  margin-left: -190px;
}
.login .ewm .ma:hover .right {
  margin-left: 10px;
  opacity: 1;
}
.login .ewm .miaoshu {
  text-align: center;
}
/*login end*/
/*ordersub start*/
.ordersub {
  /*order left end*/
}
.ordersub .bookslist {
  width: 600px;
  padding: 20px 20px 30px 20px;
}
.ordersub h4 {
  font-size: 18px;
  color: #f8ae39;
  font-weight: normal;
  margin: 0;
  padding: 0 0 0 10px;
}
.ordersub .orderleft {
  margin: 0 auto;
  display: block;
  width: 565px;
}
.ordersub .orderleft .booknop {
  width: 260px;
  height: 64px;
  float: left;
  margin-left: 10px;
}
.ordersub .orderleft .booknop > div:nth-child(1) {
  margin-top: 10px;
  margin-bottom: 5px;
}
.ordersub .orderleft .booknop .bianhao {
  margin-top: 14px;
}
.ordersub .orderleft .booknop .youhuima {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 250px;
  line-height: 26px;
}
.ordersub .orderleft .booknop .logistics button {
  height: 30px;
  width: 124px;
  background-color: #ccc;
  color: #fff;
  transition: all 0.2s;
  cursor: pointer;
  line-height: 30px;
}
.ordersub .orderleft .booknop .logistics button.active {
  background-color: #4caf50;
}
.ordersub .orderleft .booknop.number {
  position: relative;
}
.ordersub .orderleft .booknop.number button {
  background-color: #ffc34b;
  box-shadow: 0px 2px 4px rgba(245, 182, 55, 0.3);
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-top: 10px;
  margin-left: 8px;
  transition: all 0.2s;
}
.ordersub .orderleft .booknop.number button:active {
  margin-top: 12px;
  box-shadow: none;
}
.ordersub .orderleft .booknop.number button:disabled {
  background-color: #ccc;
  box-shadow: none;
}
.ordersub .orderleft .booknop.number button:disabled:active {
  margin-top: 12px;
}
.ordersub .orderleft .booknop.number button:before {
  content: '';
  width: 76%;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -38%;
  margin-top: -1px;
  background-color: #fff;
}
.ordersub .orderleft .booknop.number button:after {
  content: '';
  width: 2px;
  height: 76%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  margin-top: -38%;
  background-color: #fff;
}
.ordersub .orderleft .booknop.number button:nth-child(2) {
  margin-left: 0;
}
.ordersub .orderleft .booknop.number button:nth-child(2):after {
  display: none;
}
.ordersub .orderleft .booknop.number input {
  text-align: center;
  transition: all 0.2s;
  width: 38px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #ccc;
  float: left;
  margin-top: 8px;
  margin-left: 8px;
  border-radius: 2px;
  padding: 0 5px;
}
.ordersub .orderleft .booknop.number input:focus {
  border: 1px solid #f8ae39;
}
.ordersub .orderleft .booknop .namebox {
  width: 190px;
  border: none;
  border-bottom: 1px solid #f8ae39;
  outline: none;
  margin-top: 4px;
  line-height: 20px;
  padding: 5px 0;
}
.ordersub .orderleft .booktype {
  margin-top: 20px;
  padding-left: 10px;
}
.ordersub .orderleft .booktype ol {
  margin-top: 10px;
}
.ordersub .orderleft .booktype ol li {
  margin-bottom: 0px;
  float: left;
  border: 1px solid #cccccc;
  background-color: #fff;
  width: 162px;
  height: 240px;
  margin-right: 18px;
  border-radius: 2px;
  padding: 8px 6px;
  line-height: 20px;
  transition: all 0.3s;
  cursor: pointer;
}
.ordersub .orderleft .booktype ol li .ty {
  margin-top: 4px;
  color: #f8ae39;
}
.ordersub .orderleft .booktype ol li div {
  line-height: 22px;
}
.ordersub .orderleft .booktype ol li.active {
  border: 1px solid #f8ae39;
  box-shadow: 0px 2px 4px #f3e4cc;
}
.ordersub .orderleft .buybox {
  transition: all 0.3s;
  cursor: pointer;
  margin: 10px;
  border-radius: 2px;
  padding-left: 10px;
  border: 1px solid #ccc;
}
.ordersub .orderleft .buybox .leftboxpic {
  float: left;
}
.ordersub .orderleft .buybox .rightmiaoshu {
  float: left;
  margin-left: 20px;
}
.ordersub .orderleft .buybox .rightmiaoshu > div {
  margin-top: 5px;
}
.ordersub .orderleft .buybox.active {
  border: 1px solid #f8ae39;
  box-shadow: 0px 2px 4px #f3e4cc;
}
.ordersub .orderleft .total {
  margin-left: 10px;
  margin-top: 10px;
}
.ordersub .orderleft .total > div {
  width: 545px;
  margin-top: 10px;
}
.ordersub .orderleft .total .fl {
  float: left;
}
.ordersub .orderleft .total .fr {
  float: right;
}
.ordersub .orderleft .total .youhui {
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.ordersub .orderleft .total .numberbox {
  position: relative;
}
.ordersub .orderleft .total .numberbox button {
  background-color: #ffc34b;
  box-shadow: 0px 2px 4px rgba(245, 182, 55, 0.3);
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-top: 4px;
  margin-left: 8px;
  transition: all 0.2s;
}
.ordersub .orderleft .total .numberbox button:active {
  box-shadow: none;
}
.ordersub .orderleft .total .numberbox button:disabled {
  background-color: #ccc;
  box-shadow: none;
}
.ordersub .orderleft .total .numberbox button:before {
  content: '';
  width: 76%;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -38%;
  margin-top: -1px;
  background-color: #fff;
}
.ordersub .orderleft .total .numberbox button:after {
  content: '';
  width: 2px;
  height: 76%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  margin-top: -38%;
  background-color: #fff;
}
.ordersub .orderleft .total .numberbox button:nth-child(1):after {
  display: none;
}
.ordersub .orderleft .total .numberbox input {
  text-align: center;
  transition: all 0.2s;
  width: 38px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #ccc;
  float: left;
  margin-top: 2px;
  margin-left: 8px;
  border-radius: 2px;
  padding: 0 5px;
}
.ordersub .orderleft .total .numberbox input:focus {
  border: 1px solid #f8ae39;
}
.ordersub .orderleft .beizhu {
  padding: 0 10px;
  margin-top: 10px;
}
.ordersub .orderleft .beizhu textarea {
  margin-top: 10px;
  width: 545px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  padding: 4px;
  transition: all 0.3s;
}
.ordersub .orderleft .beizhu textarea:focus {
  border: 1px solid #f8ae39;
  box-shadow: 0px 2px 4px #f3e4cc;
}
.ordersub .orderleft .beizhu .xiaoxi {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
.ordersub .orderleft .tishi {
  padding: 0 10px;
  margin-top: 20px;
  font-size: 14px;
}
.ordersub .orderleft .tishi dt {
  color: #666;
}
.ordersub .orderleft .tishi dd {
  margin-top: 5px;
  color: #999999;
}
.ordersub .orderleft .tishi dd:nth-child(2) {
  font-weight: bold;
}
.ordersub .orderview .showbooks {
  padding-left: 10px;
}
.ordersub .orderview .showbooks .leftpic {
  float: left;
  margin-top: 10px;
  width: 148px;
  height: 110px;
  border: 1px solid #ccc;
  background-size: cover;
}
.ordersub .orderview .showbooks .rightfont {
  float: left;
  margin-left: 10px;
  font-size: 14px;
}
.ordersub .orderview .showbooks .rightfont > div {
  line-height: 20px;
  margin-top: 5px;
}
.ordersub .orderview .showbooks .rightfont > div:nth-child(1) {
  margin-top: 10px;
}
.ordersub .orderview .showbooks .rightfont > div > button {
  cursor: pointer;
  line-height: 28px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: inherit;
}
.ordersub .orderview .showbooks .rightfont > div > button:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.ordersub .weipay {
  width: 140px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 4px;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  background-color: #f8a015;
  color: #fff;
  box-shadow: 0 2px 4px rgba(226, 137, 84, 0.4);
}
.ordersub .weipay:active {
  background-color: #f8b44a;
}
.ordersub .weipay:active.totaobao {
  background-color: #fc8b2f;
}
.ordersub .weipay:active.totaobao:active {
  background-color: #fc9f53;
  box-shadow: none;
}
/*ordersub end*/