/*首页*/
.list-wrapper{}
.list-wrapper .list{  width: 48%; margin: 0px 2% 2% 0px;  height: 180px;  display: block; float: left; position: relative; }
.list-wrapper .list .thumb{float: left;width: 35%;  background-color: #ccc; box-shadow: 0 0 50px rgb(209, 195, 195); border-radius: 3px;}
.list-wrapper .list .thumb .inner{position: relative;width: 100%; padding-bottom:60%; overflow: hidden; display: block; }
.list-wrapper .list .thumb img{width: 100%;display: block; position: absolute; top: 0px;}
.list-wrapper .list .info{float: right; width:60% }
.list-wrapper .list .info .firstRow{line-height: 30px; font-size: 18px; font-weight: bold; max-height: 60px; overflow: hidden;}
.list-wrapper .list .info .secondRow{margin-top: 10px; line-height: 24px; font-size: 14px;height: 70px; overflow: hidden; }

/*主题页样式*/
.subject-template{}
.subject-template .wrapper{display: grid;grid-template-columns: repeat(3, 32.5%);grid-gap: 15px;grid-auto-flow: row dense;}
.subject-template .item{display:flex; background-color: #fff;  position: relative;box-shadow: 0 0 5px rgb(0 0 0 / 10%);transition:all 0.3s linear 0s;border-radius: 5px; }
.subject-template .item:hover{box-shadow: 0 10px 30px #ccc;transform:scale(0.95); transition:all 0.3s linear 0s;}

.subject-template .item .thumb-wrapper{ border-radius: 3px;background-color:#eee }
.subject-template .item .thumb-wrapper .thumb{position: relative;height: 140px;width: 140px; overflow: hidden; display: block; background-size: auto 100%;background-repeat: no-repeat; background-position: 50% 50%;background-image: url(../images/cover.jpg); }

.subject-template .item .text-wrapper{ padding: 3%; }
.subject-template .item .text-wrapper .title{height: 20px; font-size: 14px; font-weight: bold; max-height: 60px; overflow: hidden;}
.subject-template .item .text-wrapper .info{margin-top: 5px; line-height: 24px; font-size: 13px;height: 70px; overflow: hidden;color:#666; }


/* 文章列表模版 */
.list-template{background-color: #fff;}
.list-template .wrapper{padding: 5px;}
.list-template .inner{}
.list-template .item{padding: 4%;display: flex;border-bottom: 1px dotted #eee;}
.list-template .item:last-child{border-bottom: 0px dotted #eee;}
.list-template .thumb-wrapper .thumb:hover{box-shadow: 0 10px 30px #ccc;transform:scale(1.1); transition:all 0.3s linear 0s;}
.list-template .item .thumb-wrapper{width:200px ;margin-right: 5%;  background-color: #eee; box-shadow: 0 0 50px #eee; border-radius: 3px;transform:scale(1); transition:all 0.3s linear 0s;}
.list-template .item .thumb-wrapper .thumb{position: relative; display: block;width: 100%; padding-bottom:60%; overflow: hidden; background-size: auto 100%;background-position: 50% 50%;border-radius:5px ;background-repeat: no-repeat; transform:scale(1); transition:all 0.3s linear 0s;}
.list-template .item .text-wrapper{width:80px ;flex-grow:1;  overflow: hidden;}
.list-template .item .text-wrapper .title{text-align: left;height: 24px;font-size:  16px;line-height: 24px; }
.list-template .item .text-wrapper .info{margin-top: 5px; text-align: left;height: 50px;font-size:  13px;line-height: 24px;color: #999;}
.list-template .item .text-wrapper .tips{height:24px;font-size: 12px;margin-top: 10px;color: #999; overflow: hidden;}
.list-template .item .text-wrapper .tips .tip{display: inline-block; font-size: 12px;color: #999;margin-right: 15px;line-height: 12px;}
.list-template .item .text-wrapper .tips .tip i{margin-right: 5px;}
.list-template .item .text-wrapper .tips .tip.tag{display: inline-block; font-size: 12px; padding: 5px 15px; border-radius: 3px;  margin:0px 10px 0px 0px; border: 1px solid #eee;margin-bottom: 5px;}
.list-template .item .text-wrapper .tips .tip.tag:hover{background-color: #f9f9f9}


/*主题筛选*/
.filter-wrapper{margin: 20px 0px;box-shadow:1px 1px 4px rgb(0 0 0 / 8%); padding: 8px;background-color: #fff;}
.filter-wrapper a{display: inline-block;padding: 5px 15px; cursor: pointer;font-size: 13px}
.filter-wrapper .title{width: 80px;}
.filter-wrapper .active{background-color: #ccc;color: #fff;border-radius: 3px;}
.split-line{margin: 8px;border-bottom: 1px dotted #eee;}


@media screen and (max-width: 900px) { /*当屏幕尺寸小于900px时，应用下面的CSS样式*/


.subject-template .wrapper{grid-template-columns: repeat(2, 49%);grid-gap: 15px;}
/* 文章列表模版 */
.list-template .item .thumb-wrapper{ width: 30%;height: 100px;position: inherit }
.list-template .item .thumb-wrapper .thumb{padding-bottom: 0%;height: 120px;}
.list-template .item .text-wrapper{ margin-left: 0px; height: 120px;}
.list-template .item .text-wrapper .title{margin-top: 0px;line-height: 30px; font-size: 16px;  height: 30px; overflow: hidden;}
}