button,button::after {
    border: none;
    border-radius: 0;
}
.search_box{
  background: #eceaea;
  padding: .3rem;
  display: flex;
  align-items: center;
}
.search_box input{
  flex: 1;
  background: #fff;
  border-radius: 3px;
  height: 1.6rem;
  line-height: 1.6rem;
  padding:0 .2rem;
}
.search_box button{
  background: none;
  border: none;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size:.6rem;
  padding:0 .5rem;
}
.nav {
  display: flex;
  background: #fff;
}
.nav span{
  flex: 1;
  text-align: center;
  line-height: 2rem;
  border-bottom: 1px solid #eceaea;
  font-size:.65rem;
}
.nav span.cur{
  color:#f69f42;
  border-bottom: 1px solid #f69f42;
}

.box{
  margin-top:.5rem;
}
.book {
    background: white;
    border-radius: .2rem;
    margin: 0 .5rem;
    position: relative;
    box-shadow: 0 .1rem 18px rgba(86,100,143,0.12);
    display: inline-block;
    width: 7.2rem;
	margin-bottom:.5rem;
}
.circle .book:nth-child(even) {
    margin-left: 0px!important;
}
.headstone {
    width: 100%;
    height: 0rpx;
}

.book .book-line0 {
    width: 100%;
    height: 7rem;
    overflow: hidden;
    position: relative;
}

.headerImg {
    width: 100%;
    background-color: lightgray;
    border-radius: .2rem .2rem 0 0;
    overflow: hidden;
}
.detail {
    width: 100%;
    border-radius: 0 0 .2rem .2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.detail .line {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .2rem;
    overflow: hidden;
}


.detail .line:nth-child(1) {
    font-size: .7rem;
    color: #404445;
}

.detail .line:nth-child(2) {
    font-size: .55rem;
    color: #b2b2b2;
    margin-bottom: .2rem;
}

.detail .line .left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.detail .line .left .section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.detail .line .left .section:first-child {
    margin-right: .2rem;
}
.detail .line .left .section img{
    height: .9rem;
}

.left {
    margin-left: 15rpx;
}

.right {
    margin-right: 15rpx;
    font-size: 26rpx;
}

.addBook {
    position: fixed;
    bottom: 18rpx;
    right: 20rpx;
    z-index: 100;
}

.active {
    transform: rotate(-45deg);
    transition: All 0.3s;
}

.no-active {
    transition: All 0.3s;
    box-shadow: 0rpx 2rpx 16rpx rgba(11,217,133,50);
}
.content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 95;
    transition: All 0.3s;
}
.content .wrap {
    position: fixed;
    right: 20rpx;
    bottom: 160rpx;
    transition: All 0.3s;
    font-size: 0;
    z-index: 93;
}
.wrap .item {
    width: 108rpx;
    height: 108rpx;
    line-height: 108rpx;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    margin-top:20rpx;
}

.wrap .item .img {
    display: inline-block;
}

.wrap .item .text {
    display: inline-block;
    font-size: 26rpx;
    color: #585D68;
    letter-spacing: 0;
    text-align: center;
}
.admin_icon {
    position: absolute;
    width: 88rpx;
    height: 88rpx;
    top: -0.5rpx;
    left: -1rpx;
}
.book-list .desc {
    font-size: 32rpx;
    color: #79B39B;
    text-align: center;
}
.red-dot {
    position: absolute;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    background: #f96464;
    bottom: 20rpx;
    left: 30rpx;
}
.circletype{
  position: absolute;
  bottom: 40%;
  background:rgba(0,0,0,0.5);
  color: #fff;
  font-size: .8rem;
  padding:0 .5rem;
  right: 40%;
  line-height: 1.6rem;
  height: 1.6rem;
  text-align: right;
  border-radius: .2rem;
}
.circletype img{
  height: 1.2rem;
  width: 1.2rem;
  margin-top:0.2rem;
}

.group .book{
    width: 15rem;
}
.group .detail{
    padding: .3rem;
}
.myGroup .book{
    margin-bottom: .5rem;
}