.user-sidebar { width: 240px; height: auto; margin-top: 20px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 6px #f9ccb3; float: left;}
.user-sidebar li a { display: block; height: 65px; line-height: 65px; text-align: center; font-size: 18px;}
.user-sidebar li:hover { border-color: #fbf2ee;}
.user-sidebar .active, .user-sidebar .active:hover { border-color: #fbf2ee; border-left: 4px solid #ff620e; z-index: 2;}
.user-sidebar .active a, .user-sidebar li:hover a { color: #ff620e; background: #fbf2ee;}

.user-container { width: 920px; min-height: 200px; margin-top: 20px; border-radius: 5px; box-shadow: 0 0 6px #f9ccb3; float: right;}
.item-hd { line-height: 66px; height: 65px; padding: 0 36px; color: #ff620e; font-size: 20px; cursor: default; background: #fbf2ee; position: relative;}
.item-empty { text-align: center; padding: 100px 0; font-size: 18px; color: #666;}
.btn-edit { padding-left: 30px; font-size: 14px; color: #333; position: absolute; top: 0; right: 36px; background: url('../image/edit.png') 0px center no-repeat; background-size: 24px;}

.layout-list-col6 .item { margin: 0 0 20px 37px;}
.layout-list-col6 .item .imgbox { position: relative;}


.book-list { overflow: hidden; padding-bottom: 20px;}
.book-list .item { width: 440px; margin: 20px 0 0 20px; overflow: hidden; float: left;}
.book-list .cover { width: 150px; height: 200px; border-radius: 5px; overflow: hidden; box-shadow: 0px 1px 4px #dfdfdf; position: relative; float: left;}
.book-list .info { margin-left: 170px; color: #666; line-height: 26px; overflow: hidden;}
.book-list .name { font-size: 18px; color: #333; margin-top: 10px;}
.book-list .time { margin-top: 30px;}
.book-list .btn { display: block; width: 140px; height: 36px; line-height: 36px; text-align: center; margin-top: 20px; font-size: 16px; border-radius: 20px; color: #fff; background: #ff620e;}

.list-edit .mask { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.8);}
.list-edit .mask .check { width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; position: absolute; bottom: 10px; right: 10px; z-index: 3;}
.list-edit .mask-check .check:after { display: block; content: ' '; width: 10px; height: 5px; border: 1px solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); margin: 6px auto;}


.edit-opt-list { font-size: 14px; color: #666; position: absolute; top: 0; right: 36px; user-select: none;}
.edit-opt-list .check-total-num { display: inline-block; vertical-align: top; min-width: 10px; color: #ff620e; }
.edit-opt-list .check-all { padding-left: 22px; margin-left: 20px; position: relative; float: left;}
.edit-opt-list .check-all:before { content: ''; width: 15px; height: 15px; border: 1px solid #ff620e; border-radius: 50%; position: absolute; top: 24px; left: 0;;}
.edit-opt-list .check-all-val:before { background: #ff620e;}
.edit-opt-list .check-all-val:after { position: absolute; content: ''; width: 8px; height: 4px; border: 1px solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); top: 28px; left: 3px;}
.edit-opt-list .btns { float: left;}
.edit-opt-list .btn-delete, .edit-opt-list .btn-cancle { float: left; width: 76px; height: 30px; line-height: 30px; text-align: center; border-radius: 15px; margin: 16px 0 0 20px;; color: #fff; background: #ff620e; cursor: pointer;}
.edit-opt-list .btn-delete { background: #000; cursor: default;}
.edit-opt-list .btn-delete-val { background: #ff620e; cursor: pointer;}

/* m */
.mobile .user-sidebar { width: 100%; margin-top: 15px; box-shadow: 0 0 4px #f9ccb3;}
.mobile .user-sidebar li { width: 50%; float: left;}
.mobile .user-sidebar .active, .mobile .user-sidebar .active:hover { border-bottom: 3px solid #ff620e; border-left: 0 none; }
.mobile .user-sidebar li a { height: 42px; line-height: 42px; font-size: 16px; }
.mobile .user-container { width: 100%; box-shadow: none; margin-top: 15px;}
.mobile .item-hd { line-height: 42px; height: 42px; padding: 0 10px; font-size: 16px;box-shadow: 0 0 4px #f9ccb3; margin-bottom: 15px;}
.mobile .btn-edit { right: 10px;}
.mobile .edit-opt-list { right: 0; width: 100%; padding: 0 10px; background: #fbf1ee;}
.mobile .edit-opt-list .check-all:before { top: 14px;}
.mobile .edit-opt-list .btn-delete, .mobile .edit-opt-list .btn-cancle { margin: 8px 0 0 10px;}
.mobile .edit-opt-list .check-all { margin-left: 15px;}
.mobile .edit-opt-list .btns { float: right;}
.mobile .list-edit .mask-check .check:after { margin: 4px auto;}
.mobile .edit-opt-list .check-all-val:after { top: 18px;}

.mobile .book-list .item { width: 100%; margin: 0 0 10px 0;}
.mobile .book-list .cover { height: auto; width: 120px;}
.mobile .book-list .info { margin-left: 140px;}
.mobile .book-list .name { margin-top: 0;}
.mobile .book-list .time { margin-top: 10px; height: 26px; overflow: hidden;}
.mobile .book-list .btn { margin-top: 10px; max-width: 100%; height: 30px; line-height: 30px;}