@import url("public.css");

.bbk{background-color: var(--color-toolbar);border-radius: 6px;box-shadow: var(--shadow-slight);}
.pagecon{padding: 16px 46px}
.pagecon .head{padding: 18px 14px;margin-bottom: 10px;font-size: 15px;}
.pagecon .head>div{display: flex;align-items: center;margin-bottom: 10px}
.pagecon .head>div:last-child{margin-bottom: 0;}
.pagecon .head span{padding: 4px 8px;margin-right: 10px;color: var(--color-slight);white-space: nowrap;}
.pagecon .head nav a{display:inline-block;vertical-align: top;padding: 4px 8px;margin-right: 10px;color: var(--color-slight);cursor: pointer;}
.pagecon .head .curt{color: var(--color-theme);background-color: var(--color-hoverbg);border-radius: 3px;}
.main{min-height: 600px;padding: 16px;}
.main .wsitem{display: inline-block;width: 16.5%;padding: 14px 16px;min-height: 54px;border-radius: 4px;cursor: pointer;-webkit-transition: 0s;-o-transition: 0s;transition: 0s;}
.main .wsitem img{display: inline-block;vertical-align: top;border-radius: 4px;object-fit: contain;}
.main .wsitem .info{display: inline-block;vertical-align: top;margin-left: 6px;width: calc(100% - 36px);}
.main .wsitem .name{display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-family: "未来圆SC";}
.main .wsitem .des{color: var(--color-slight);font-size: 14px;font-weight: 200;margin-top: 2px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow : hidden;}
.main .wsitem:hover{background-color: var(--color-hoverbg);-webkit-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;}
.main .end{text-align: center;}
.main .end span{display: block;margin: 36px auto;color: var(--color-slight)}
#urldlg{width: 100%;;max-width: 450px;color: var(--color-pale);}
#urldlg .con{width: 100%;min-height: 165px;max-height: 265px;padding: 32px;background-color: var(--color-toolbar);overflow-y: auto}
#urldlg .title{display: flex;align-items: center;}
#urldlg .name{margin-left: 8px;}
#urldlg .link{display: block;padding: 8px;background-color: var(--color-hoverbg);margin: 16px 0;}
#urldlg .opt{display: flex;align-items: center;padding: 14px 16px;}
#urldlg .opt a.btn{margin-left: auto;padding: 6px;font-size: 14px;background-color: var(--color-card2-bg);color: var(--color-card2-txt);border-radius: 5px;padding: 8px 16px;}
#urldlg::backdrop{background-color: var(--backdrop-color)}


@media only screen and (max-width: 1200px) {
    .pagecon {padding: 16px;}
}

@media only screen and (max-width: 900px) {
    .pagecon {padding: 0px;}
    .container .wsitem {width: 25%;}
}

@media only screen and (max-width: 768px) {
    .main {padding: 16px 8px}
    .container .wsitem {width: 50%;}
}