@charset "utf-8";

::-webkit-scrollbar { width:8px; height:8px; } 
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.1); }

.treeview li{ padding: 5px 0pt 5px 16px; line-height:100%; }
.treeview li a{ word-break:keep-all; white-space:nowrap; }
.treeview li div, .treeview li a, .treeview li span{ line-height:100%; }
.treeview li a.act{ color:#F0F; }

.caleft{ width:350px; float:left; overflow-y:auto; border-right:1px solid #CCC; }
.caleft h2{ display:none; font-size:18px; padding:0.5rem; margin:0; }
.camain{ padding-top:0.5rem; padding-left:360px; }
.pickBtn { display:none; position:fixed; top:1rem;left:0; padding:0.4rem 12px; z-index:2100; border-radius:1rem; border-top-left-radius:0; border-bottom-left-radius:0; outline:none; } /* 默认隐藏 */
.pickMask{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1800; }
#caleftNav{ overflow-y:auto; }

.caitem{ display: block; padding:0.5rem; margin:0.5rem; border:1px solid #DDD; border-radius:0.5rem; }
.caitem:hover{ background:#FFE; border:1px solid #FCC; border-radius:0.5rem; }
.caitem:hover a{ color:#F00; }
.caitem .btn{ padding:2px 5px; }

.caitem .capic{ width:150px; display:inline-block; vertical-align:top; text-align:center; }
.caitem .catxt{ width:calc(100% - 160px); display:inline-block; vertical-align:top; }

.caitem .capic img{ width:96%;max-width:120px; padding:0.8rem 0 0.5rem 0;margin:auto; }
.caitem .catxt h2{ font-size:18px; padding:0.5rem; margin:0; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; max-width: 100%; }
.caitem .catxt .tags{ text-align:right; margin:-0.8rem 0 0.5rem 0; }
.caitem .catxt .note{ height:40px; text-align:left; color:#888; margin:auto; overflow: hidden; 
  display: -webkit-box; -webkit-box-orient: vertical; line-clamp:2;-webkit-line-clamp:2; text-overflow:ellipsis; }

.caitem p{ text-align:left; font-size:small; margin:0.5rem 0 0 0; }
.caitem i.tag1{ color:#999;background:#FEF;font-size:small;font-style:normal;display:inline-block; padding:0 8px; border-radius:3px; }
.caitem i.tag1 b{ color:#F00; font-size:large; }

@media only screen and (max-width:750px){
  .caleft{ position:fixed; width:95%;max-width:450px;height:calc(100% - 0.5rem); background:#FFF; left:0; top:1px; bottom:0; 
    z-index:2000; transform: translateX(-100%); transition: transform 0.3s ease; border-top-right-radius:1rem; border-bottom-right-radius:1rem; /* 默认隐藏 */ }
  .pickBtn { display: block; } /* 在小屏幕上显示 */
  .caleft.show { transform: translateX(0); } /* 显示时滑入 */ 
  .caleft h2{ display:block; }
  .camain{ padding-left:0; }
}

@media only screen and (max-width:550px){
  .caitem i.tag1 span{ display:none; }
}