.subtitle{color:#888;font-size:14px;font-weight:normal;margin-left:15px;margin-top:10px;}
.nav-bar{margin-bottom:20px;background:#f8f8f8;padding:15px 20px;border-radius:5px;border:1px solid #e8e8e8;}
.nav-bar a{display:inline-block;margin:0 3.75px 8px;border:1px solid #ddd;text-decoration:none;color:#333;background:#fff;border-radius:3px;font-size:14px;    width: 34px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.nav-bar a.active{border:1px solid #c00;background:#c00;color:#fff;}
.nav-bar a:hover{background:#c00;color:#fff;border-color:#c00;}
.nav-bar a.disabled{color:#ccc;cursor:default;background:#f5f5f5;border-color:#e8e8e8;display:none;}
.nav-bar a.disabled:hover{background:#f5f5f5;color:#ccc;border-color:#e8e8e8;}
.nav-bar span{margin-bottom:20px;}
.letter-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:0;margin-bottom:20px;}
.letter-item{background:#fafafa;padding:12px 18px;border-radius:5px;border:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.letter-item:hover{background:#f0f7ff;border-color:#c00;}
.letter-item .lt{font-weight:bold;font-size:18px;color:#c00;}
.letter-item .count{color:#999;font-size:13px;}
.letter-item .count strong{color:#333;}
.letter-item a{color:#06c;text-decoration:none;font-size:13px;padding:3px 10px;border:1px solid #06c;border-radius:3px;}
.letter-item a:hover{background:#06c;color:#fff;}
.bet{margin: 20px 0;font-size: 18px;
    font-weight: 700;}


.letter-block{margin:20px 0;}
.letter-title{font-size:22px;font-weight:bold;color:#c00;margin:15px 0 10px 0;padding:8px 15px;background:#f5f5f5;border-left:5px solid #c00;border-radius:3px;}
.letter-title span{    margin-top: 10px;}
.letter-block ul{list-style:none;padding:0;margin:0;width:100%;overflow:hidden;}
.letter-block li {
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    background-color: #F0EFE2;
    border-radius: 5px;
    float: left;
    margin-right: 15px;
    width: 208.5px;
    height: 100px;
    line-height: 30px;
}
.letter-block li:nth-child(4n){margin-right:0;}
.letter-block li a h2 {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #555;
}

.letter-block li a p {
    overflow: hidden;
    font-size: 13px;
    margin-top: 6px;
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 60px;
    -webkit-line-clamp: 2;
    color: #888;
}
.paging{margin:5px 0;padding: 0;width:100%;}
.paging a {
    display: inline-block;
    margin: 4px;
    border: 1px solid #ddd;
    background: #fff;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    font-size: 13px;
    height: 26px;
    width: 30px;
    line-height: 26px;
    text-align: center;
}
.paging a.cur{background:#c00;color:#fff;border-color:#c00;font-weight:bold;}
.paging a:hover{background:#c00;color:#fff;border-color:#c00;}
.none-data{color:#999;padding:8px 0;font-style:italic;}

@media screen and (max-width: 839px){
    
 .indexlet{width:96%;}   
 .nav-bar a{    margin: 0 1.2% 8px;}   

.letter-block li{
    padding: 3%;
    margin-bottom: 0;
    margin: 2%;
    width: 40%;
}  
    
    
}
}