@import url("public.css");

.bbk{background-color: var(--color-toolbar);border-radius: 6px;box-shadow: var(--shadow-slight);}
.main{background-color: var(--color-toolbar);border-radius: 6px;box-shadow: var(--shadow-slight);}
.main .sec{margin-bottom: 16px;}
.main .bbk>.head{padding: 10px;border-bottom: 1px solid var(--color-line-light);}
.main .bbk>.con{padding: 16px;}
.pagecon{padding: 16px;width: 100%;max-width: 1200px;margin: 0 auto;}
.pagecon .main{display: inline-block;vertical-align: top;width: calc(100% - 300px);}
.pagecon .sidebar{display: inline-block;vertical-align: top;width: 284px;position: sticky;top: 0;margin-left: 16px;}
.container nav{padding: 20px;padding-bottom: 16px;border-bottom: 1px solid var(--color-line);user-select: none;}
.container nav span{display:inline-block;margin-right: 14px;padding-bottom: 4px;color: var(--color-slight);cursor: pointer;}
.container nav .curt{border-bottom: 3px solid #3385ff;color: var(--color-normal)}
.mainlist .item {display: inline-block;width: 100%;padding: 20px;border-bottom: 1px solid var(--color-line);}
.mainlist .item .left{display: inline-block;vertical-align: top;width: 180px;height: 130px;}
.mainlist .item .cover{width: 100%;height:100%;object-fit: cover;border-radius: 4px;cursor: pointer;}
.mainlist .item .right{display: inline-block;vertical-align: top;width: calc(100% - 180px);padding-left: 20px;}
.mainlist .item .title{display: -webkit-box;font-family: "IBM Plex Sans SC";line-height: 28px;font-size: 22px;margin-bottom: 8px;-webkit-line-clamp: 1;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow: hidden;}
.mainlist .item .txtpreview{margin-bottom: 24px;font-size: 16px;font-weight: 300;line-height: 1.5;color: var(--color-pale);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow : hidden;}
.mainlist .item .info{color: var(--color-slight);font-size: 14px;}
.mainlist .item .rfloat span{margin: 0 6px;}
.mainlist .item .icon{margin-right: 4px;}
.main .end{display: flex;margin: 16px auto;justify-content: center;}
.main .end .loadmore{display: flex;align-items: center;font-size: 15px;padding: 7px 16px;border-radius: 5px;color: var(--color-tint);background-color: var(--color-btnbg);user-select: none;cursor: pointer;}
.main .end .loadmore:hover{background-color: var(--color-btnbg-hover);}
.main .end .nomore{color: var(--color-slight)}
.sidebar .sec{margin-bottom: 16px;}
.sidebar .bbk{padding: 12px;}
.sidebar .imgAd{width: 100%;}
.sidebar .imgAd img{width: 100%;border-radius: 3px;margin-bottom: 4px;}

@media only screen and (max-width: 900px) {
	.pagecon{padding: 0}
    .pagecon .main{width: 100%;}
    .pagecon .sidebar{display: none;}
	.mainlist .item .left{width: 140px;height: 110px}
	.mainlist .item .right{width: calc(100% - 140px);padding-left: 10px;}
	.mainlist .item .title{font-size: 20px;margin-bottom: 4px;}
	.mainlist .item .txtpreview{margin-bottom: 12px;}
}

@media only screen and (max-width: 600px) {
	.container nav{padding: 14px}
	.container nav span{padding: 4px 0;margin-right: 10px;}
	.mainlist .item{padding: 14px}
	.mainlist .item .left{width: 110px;height: 86px}
	.mainlist .item .right{width: calc(100% - 110px);}
	.mainlist .item .title{-webkit-line-clamp: 2;font-size: 18px;margin-bottom: 8px}
	.mainlist .item .txtpreview{display: none;}
}