/**

 @Name：layinfoAdmin
 @Author：黄宇风 1278675785@qq.com
 @Site：http://www.layinfo.com/
 @License：LPPL
 
 */
 /*主题*/
:root {
  --bg-color: #fcfbf3;
  --txt-color: #2f363c;
  --grey-color: #c2c2c2;
  --a-color: #1e9fff;
  --active-color: #ef3e43;
}
/*全局配置*/
html{background-color: #F4F4F4; color: var(--txt-color);}
body{
    margin: 0;
    overflow-x: hidden;
    min-width: 320px;
    background-color: var(--bg-color);
    font-size: 14px;
    line-height: 1.8em;
    color: rgba(0,0,0,.87);
    font: 500 17px / 1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", "sans-serif";
	color: #333;
}
*, :after, :before{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color: var(--a-color);
    text-decoration: underline;
}
a:hover, .active{
	color: var(--active-color);
}

#app{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header{
    height:60px;
    line-height:60px;
    border-bottom: 1px solid #b3b3b329;
	display:flex;
}
.header .header-title{
	padding:4px;
	display:flex;
	text-decoration: none;
	color: var(--txt-color);
}
.header .header-title p{
	padding:4px;
	display:grid;
	align-items: center;
}
.header .header-title p span{
	line-height:1em;
	font-size:14.5px;
}
.header .header-title p span:nth-child(1){
	display:block;
	font-size:26px;
}
.header .layui-nav{
	background:none;
}
.header .layui-nav .layui-nav-item a{
    display:inline-block;
	font-size:1.2em;
	color: var(--txt-color);
	text-decoration: none;
}
.header .layui-nav .layui-nav-item>a{
	font-weight:600;
}
.header a img{
    padding-bottom:4px;
    max-width:180px;
    max-height:60px;
}

.header .menu-more{
	display:none;
	position:absolute;
	top:10px;
	right:10px;
	width:40px;
	height:40px;
	cursor: pointer;
}
.header .menu-close{
	display:none;
	position:absolute;
	top:10px;
	padding:2px;
	right:52%;
	width:30px;
	height:30px;
	border-radius:50%;
	background-color:#eee;
	z-index: 101;
	cursor: pointer;
	opacity:0.5;
}
.header .menu-close:hover{
	opacity:1;
}
.header.open-navbar .menu-close{
	display:block;
}
.header.open-navbar .menu-mask{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:2;
}
.header.open-navbar .layui-nav{
	display:block!important;
	padding:20px 0px 0px 0px;
	position: absolute;
    left: 0px;
    height: 100vh;
    background-color: #fff;
    width: 50%;
    z-index: 100;
}
.header.open-navbar .layui-nav .layui-nav-item{
	display:block;
	line-height: 50px;
}
.header.open-navbar .layui-nav .layui-nav-item a{
	display:block;
	padding-left:30px;
}
.header.open-navbar .layui-nav .layui-nav-item a:hover{
	background-color:#eee;
}
.header.open-navbar .menu-more,
.header.open-navbar .layui-nav .layui-nav-bar{
	display:none!important;
}

.dict-form{
    margin: 0px auto;
    max-width: 600px;
}
.dict-form>div:nth-child(1){
    margin:30px 0px;
    text-align:center;
}
.dict-form>div:nth-child(1)>p:nth-child(2){
    margin:20px 0px -20px -40px;
    font-size:2em;
    text-align:left;
    color:#ccc;
}
.dict-form>div:nth-child(1)>p:nth-child(4){
    margin:-20px -40px 20px 0px;
    font-size:2em;
    text-align:right;
    color:#ccc;
}
.dict-form>div:last-child{
    position:relative;
    padding-bottom:50px;
}
.dict-form>div:last-child input{
    margin-bottom:15px;
    padding-right:100px;
    height:50px;
    line-height:50px;
}
.dict-form>div:last-child button{
    position:absolute;
    top:0px;
    right:0px;
    padding:0 30px;
    height:50px;
    line-height:50px;
}
.dict-form>div:last-child a{
    display:inline-block;
    padding-right:15px;
    color: #ccc;
}

.main{
    flex-grow: 1;
    display:flex;
    overflow: hidden;
}
.main .sidebar{
    position:relative;
    flex:0 0 160px;
    border-right: 1px solid #b3b3b329;
    display: flex;
    flex-direction: column;
	background-color:#fff;
}
.main .sidebar form{
    border-bottom: 1px solid #b3b3b329;
}
.main .sidebar form input{
    margin: 5px 0px;
    padding-right:30px;
}
.main .sidebar form button{
    position:absolute;
    top: 4px;
    right: 0px;
    width: 30px;
    height: 38px;
    border: none;
    background: none;
    cursor: pointer;
}
.main .sidebar ul{
    flex: 1;
    overflow-y: auto;
}
.main .sidebar ul li{
    position:relative;
}
.main .sidebar ul li a{
    display:block;
    padding:6px 10px;
	color: var(--txt-color);
	text-decoration:none;
	border-bottom: 1px solid #eee;
}
.main .sidebar ul li>a{
    border-bottom:1px solid #eee;
	padding-left:20px;
}
.main .sidebar ul li.close dl{
    display:none;
}
.main .sidebar ul li dl dd a{
    padding-left:40px;
}
.main .sidebar ul li.active a,
.main .sidebar ul li a:hover,
.main .sidebar ul li dl dd a:hover,
.main .sidebar ul li dl dd.active a{
    background-color:#31bdec9b;
    color:#fff;
}
.main .sidebar ul li .layui-icon{
    position:absolute;
    top:8px;
    right:10px;
    cursor: pointer;
    opacity: 0.6;
}
.main .sidebar ul li .layui-icon:hover{
    opacity: 1;
}
.main .sidebar p{
    width:100%;
    height:32px;
    line-height:32px;
    text-align:center;
    font-size:0.7em;
    border-top: 1px solid #b3b3b329;
    background-color:#eee;
}
.main .sidebar .sidebar-more{
	display:none;
	position: absolute;
    width: 30px;
    height: 30px;
    right: -30px;
    top: 5px;
	background-color: #fff;
    border: 1px solid #eee;
	cursor: pointer;
	opacity:0.5;
}
.main .sidebar .sidebar-more:hover{
	opacity:1;
}

.right-content{
    flex: 1;
    overflow-y: auto;
}

.book-lists{
    display:flex;
    flex-wrap: wrap;
}
.book-lists .book{
    flex:0 0 200px;
    padding: 10px;
    text-align:center;
	box-sizing: border-box;
}
.book-lists .book img{
    max-width: 150px;
    height:150px;
}
.book-lists .book h3{
    margin-top: 6px;
    font-size:1em;
}
.book-lists .book div span{
    display:inline-block;
    margin-right:4px;
    font-size:0.8em;
    color:#999;
}
.book-lists .book div>span:last-child{
    margin-left:10px;
}
.book-lists .book p{
    font-size:0.8em;
    color:#666;
    display: -webkit-box;       /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 必须结合的属性，设置伸缩盒对象的子元素排列方式为垂直排列 */
    -webkit-line-clamp: 3;      /* 显示的行数 */
    overflow: hidden;           /* 超出容器的部分隐藏 */
    text-overflow: ellipsis;    /* 文字溢出时用省略号显示 */
    max-height: 4.6em;          /* 可选：根据字体大小设置最大高度，防止布局抖动 */
    line-height: 1.5em;         /* 可选：根据实际行高调整 */
}
.book-lists .book>.layui-icon-close{
	display:none;
	position:absolute;
	top:5px;
	right:2px;
}
.book-lists .book:hover>.layui-icon-close{
	display:block;
	padding:2px;
	background-color: #eee;
    border-radius: 10px;
	color:#999;
	line-height: 1em;
	cursor: pointer;
}
.paginate{
    flex-basis: 100%;
}
.paginate ul{
    display:flex;
    justify-content: center;
    margin:50px auto;
}
.paginate ul li span,
.paginate ul li a{
    margin-right:10px;
    padding:4px 15px;
    text-align:center;
    border:1px solid #ccc;
    border-radius:4px;
	color: var(--txt-color);
	text-decoration:none;
}
.paginate ul li.active span,
.paginate ul li:hover a{
    border:1px solid var(--a-color);
    background-color:var(--a-color);
    color:#fff;
}
.paginate ul li.disabled span{
    color: #d2d2d2 !important;
    cursor: not-allowed !important;
}

.book-detail{
    padding:15px;
}
.book-detail>div:nth-child(1){
    display:flex;
}
.book-detail .book-cover{
    flex:0 0 200px;
}
.book-detail .book-cover img{
    max-width:200px;
}
.book-detail .book-info{
    flex:1;
}
.book-detail .book-info .meta a{
    display:inline-block;
    padding:10px 10px 10px 0px;
    color: #999;
}
.book-detail .book-info .meta a span{
    padding-left:6px;
}
.book-detail .book-info .meta span,
.book-detail .book-info ul.hits li{
    display:inline-block;
    color: #999;
}
.book-detail .book-info .desc{
    margin:10px 0px;
    line-height:1.8em;
}
.book-detail .book-dir a{
    display:inline-block;
    padding:4px;
    line-height:1.8em;
}

/*阅读器*/
.reader{
    display: flex;
    flex-direction: column;
    position: relative;
    width:100%;
	background-color:#eeeef4;
	font-size:18px;
}
.reader .reader-inner{
    position:relative;
    margin:0px auto;
    max-width:1024px;
    min-height:100vh;
	background-color: #fff;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
    box-sizing: border-box;
}
.reader .reader-percent{
	position: fixed;
    width: 100%;
    max-width:1024px;
    z-index:2;
}
.reader .reader-percent>div{
    width: 0%;
    height: 4px;
    background-image: linear-gradient(to right, lightgreen, #31bdec, gold, orange, orangered);
}
.reader .reader-header{
    padding:20px 30px 0px 30px;
}
.reader .reader-header h1{
	font-size:1.2em;
}
.reader .reader-header p{
	margin:10px 0px;
	color: #c2c2c2;
	font-size:0.8em;
}
.reader .reader-header p span{
	padding-right: 15px;
}
.reader .reader-content{
	margin-top:15px;
	padding:15px 30px 30px 30px;
	border-top:1px solid #b3b3b329;
	line-height:1.8em;
}
.reader .reader-content p{
	margin-bottom: 15px;
	text-indent:2em;
}
.reader .reader-footer{
	margin:80px 0px 30px 0px;
    text-align:center;
}
.reader .reader-footer a{
	position: relative;
    margin-right:15px;
	padding:10px 50px;
    color: #000000b3;
    border:1px solid #b3b3b399;
    border-radius: 44px;
	cursor: pointer;
	opacity: 0.3;
}
.reader .reader-footer a:hover{
	opacity: 1;
}
.reader ul.reader-toolbar{
	position: fixed;
    width: 56px;
    top: calc(50vh - 172px);
	margin-left: -62px;
    font-size:16px;
}
.reader ul.reader-toolbar li{
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
	margin-bottom:10px;
	padding: 5px 10px;
    box-sizing: border-box;
    background: #f2f2f2;
    border-radius: 8px;
	font-size:0.8em;
	cursor: pointer;
	opacity:0.6;
}
.reader ul.reader-toolbar li.night{
	display:none;
}
.reader ul.reader-toolbar li.mobile>div{
    display:none;
    position: absolute;
    width: 128px;
    height: 138px;
    right: -135px;
    top: 0px;
    padding: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #b3b3b329;
}
.reader ul.reader-toolbar li svg{
	width:20px;
	height:20px;
}
.reader ul.reader-toolbar li:hover{
	opacity:1;
	background: #fff;
}
.reader ul.reader-toolbar li.mobile:hover>div{
    display:block;
}

.reader[lay-skin=night]{
	background-color:#000;
}
.reader[lay-skin=night] .reader-inner{
	background-color:#262626;
	color: #b3b3b3;
}
.reader[lay-skin=night] .reader-header p{
	color:#b3b3b366;
}
.reader[lay-skin=night] ul.reader-toolbar li.day{
	display:none;
}
.reader[lay-skin=night] ul.reader-toolbar li.night{
	display:flex;
}
.reader[lay-skin=kraft]{
	background-color:#f7eed6;
}
.reader[lay-skin=kraft] .reader-inner{
	background-color:#fbf7eb;
}
.reader[lay-skin=green]{
	background-color:#ebf5eb;
}
.reader[lay-skin=green] .reader-inner{
	background-color:#f5faf5;
}
.reader[lay-skin=blue]{
	background-color:#e9f4f7;
}
.reader[lay-skin=blue] .reader-inner{
	background-color:#f4fafb;
}
.reader[lay-skin=pink]{
	background-color:#f7e9e9;
}
.reader[lay-skin=pink] .reader-inner{
	background-color:#fbf4f4;
}
ul.reader-dir{
    padding:10px 0px;
}
ul.reader-dir li a{
    display:block;
    padding: 8px 20px;
	text-decoration: none;
	color:#333;
}
ul.reader-dir li.active a,
ul.reader-dir li a:hover{
    background-color:#eee;
}
ul.reader-set{
    padding:20px 40px;
}
ul.reader-set li{
    display:flex;
    margin-bottom:10px;
    height: 32px;
    line-height: 32px;
}
ul.reader-set li span{
    flex:0 0 50px;
}
ul.reader-set li dl{
    flex:1;
    display:flex;
}
ul.reader-set li dl dd{
    margin-right:10px;
    width: 60px;
    border:1px solid #eeeef4;
    border-radius: 4px;
    background-color:#eeeef4;
    text-align:center;
    cursor: pointer;
}
ul.reader-set li:nth-child(1) dl dd{
    margin-right:15px;
    padding:0px;
    width:32px;
    border-radius: 50%;
}
ul.reader-set li dl dd.active{
    border:1px solid #06a7ff;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(1){
    background-color:#eeeef4!important;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(2){
    background-color:#f7eed6!important;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(3){
    background-color:#ebf5eb!important;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(4){
    background-color:#f4fafb!important;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(5){
    background-color:#f7e9e9!important;
}
ul.reader-set li:nth-child(1) dl dd:nth-child(6){
    background-color:#000!important;
}
ul.reader-set li:nth-child(4) dl dd:nth-child(2){
    font-size:1.5em;
}
ul.reader-set li:nth-child(4) dl dd:nth-child(3){
    font-size:2em;
}
ul.reader-set li:nth-child(4) dl dd:nth-child(4){
    font-size:2.5em;
}
.reader .vditor-ir pre.vditor-reset{
	background:none!important;
	font-size:1em!important;
}
.reader-set-btn{
	display:none;
	margin-left: 5px;
	position: fixed;
    bottom: 5px;
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: #eee;
    border-radius: 50%;
    color: #999;
    opacity: 0.3;
	cursor: pointer;
}
.reader-set-btn:hover{
	opacity: 1;
}
.reader ul.reader-toolbar.reset{
	margin-left: 0px;
}
@media (max-width: 768px){
	.reader .reader-inner{
		padding:0;
	}
	.reader .reader-header{
		padding: 20px 10px 0px 10px;
	}
	.reader .reader-header p{
		margin:5px 0px;
	}
	.reader .reader-content{
		padding: 15px 10px 30px 10px;
	}
	.reader .reader-footer a{
		padding: 10px 30px;
	}
	.reader-set-btn{
		display:block;
	}
}
/*--end--*/
.flex-lists{
    overflow-y:auto;
    background-color:#fff;
}
.flex-item{
    display:flex;
	align-items: center;
    padding:0px 8px;
    background-color:#fff;
    border-bottom: 1px solid #eee;
}
.flex-item.flex-nav{
    line-height: 26px;
    background-color: #f7f7f7;
}
.flex-item>div{
    flex:0 0 100px;
	position:relative;
	padding:6px;
	line-height:1.5em;
}
.flex-item>div:nth-child(1){
    flex:0 0 70px;
}
.flex-item>div:nth-child(5){
    flex:0 0 150px;
}
.flex-item>div:last-child {
    flex:1!important;
}
.flex-nav-filter{
	cursor: pointer;
}
.flex-nav-filter i>svg{
	width:12px;
	height:12px;
	opacity:0.2;
}
.flex-nav-filter>div{
	display:none;
	position:absolute;
	top:36px;
	left:0px;
	background-color: #fff;
	border: 1px solid #eee;
	padding: 6px;
	text-align:center;
	z-index:2;
}
.flex-nav-filter>div>dl{
	display: flex;
    width: 150px;
    flex-flow: wrap;
	margin-bottom:6px;
	padding-left:8px;
	text-align:left;
}
.flex-nav-filter>div>dl dd{
	flex:0 0 50%;
}
.flex-nav-filter>div .layui-btn{
	padding:0px 10px;
}
.flex-nav-filter:hover i>svg{
	opacity:1;
}
.flex-nav-filter:hover>div{
	display:block;
}
.faofang-list .flex-item>div{
	flex:0 0 150px;
}
.faofang-list .flex-item>div:nth-child(1){
	flex:0 0 70px;
}

.yaowu-detail{
    padding: 15px;
    line-height:1.8em;
	background-color: #fff;
}
.yaowu-detail .yaowu-info h1{
    margin-bottom:15px;
}
.yaowu-detail .yaowu-info h1 span{
    padding-left:10px;
    font-size:0.6em;
    color:#999;
}
.yaowu-detail .yaowu-info p span{
    display:inline-block;
    width: 60px;
    color:#999;
}
.yaowu-detail p{
	white-space: pre-wrap;
}
.yaowu-detail h4{
    margin-top:15px;
}
.yaowu-detail img{
    margin:5px 2px;
	padding:2px;
    max-width:200px;
	border:1px solid #eee;
	border-radius:4px;
}

.yaofang-detail .yaofang-info{
	padding:10px;
	background-color:#fff;
}
.yaofang-detail .yaofang-info h1{
	margin-bottom:15px;
}
.yaofang-detail .yaofang-info h1 span{
    padding-left:10px;
	font-size:0.6em;
    color:#999;
}
.yaofang-detail .yaofang-info>p{
	display:flex;
	margin-bottom:10px;
	line-height:1.33em;
	white-space: pre-wrap;
}
.yaofang-detail .yaofang-info>p span{
	flex:0 0 60px;
	color:#999;
	margin-bottom:10px;
}

.article-item{
	display:flex;
	padding:10px;
	border-bottom:1px solid #eee;
}
.article-item p{
	font-size:0.9em;
}
.article-item .article-cover{
	flex:0 0 200px;
	display:flex;
	align-items:center;
	margin-right:15px;
	border:1px solid #f3f3f3;
	border-radius:4px;
	overflow:hidden;
}
.article-item .article-cover:hover{
	border:1px solid var(--grey-color);
}
.article-item .article-cover img{
	max-width:100%;
	max-height:100%;
}
.article-item a{
	text-decoration: none;
	color: var(--txt-color);
}
.article-item a:hover{
	color: var(--active-color);
}
.article-item .meta{
	margin:5px 0px;
	color: var(--grey-color);
}
.article-item .meta span{
	display:inline-block;
	padding-left:5px;
}
.article{
	padding: 10px;
	line-height:1.8em;
	background-color: #fff;
}
.article .meta{
	margin-bottom:15px;
	color:#999;
}
.article .meta .layui-icon{
	padding:0px 5px;
}
.article h1{
	margin:15px 0px;
	font-size: 1.5em;
}
.article h2,.article h3,.article h4{
	margin:20px 0px 10px 0px;
	font-size: 1em;
}
.article h2{
	font-size: 1.33em;
}
.article h3{
	font-size: 1.15em;
}
.article p{
	margin-bottom:10px;
	text-indent: 2em;
}

@media screen and (max-width: 767.98px) {
    .header .menu-more,
	.main .sidebar .sidebar-more{
		display:block;
	}
	.main .sidebar {
        flex:0 0 0px;
    }
	.main .sidebar>form,
	.main .sidebar>ul{
        display:none;
    }
	.main .sidebar.revert {
        flex:0 0 160px;
    }
	.main .sidebar.revert>form,
	.main .sidebar.revert>ul {
        display:block;
    }
	.book-lists .book{
		flex:0 0 25%;
	}
}