@charset "UTF-8";

@media all and (max-width:480px){
    
    .life-area{width: 98%; margin: 30px auto 0 auto;min-width: 280px}
    .life-area .life-list ul li{width: 100%;margin: 0 0 20px 0}
    
    .life-area .life-list ul li .card-news figure{max-height: 278.84px}
    
}
@media all and (min-width:481px) and (max-width:767px){
    
    .life-area{width: 480px;margin: 30px auto 0 auto}
    .life-area .life-list{overflow: hidden;padding: 5px 0 10px 0}
    .life-area .life-list ul li{float: left;margin: 0 5px 10px 5px;width: 47.7%}
    .life-area .life-list ul li .card-news figure{height: 147px}
}
@media all and (min-width:768px) and (max-width:1024px){
    
    .life-area{width: 767px; margin: 30px auto 0 auto}
    .life-area .life-list{overflow: hidden;padding: 5px 0 10px 0}
    .life-area .life-list ul li{float: left;margin: 0 5px 10px 5px;width: 32%}
    
    .life-area .life-list ul li .card-news figure{height: 158px}
}
@media all and (min-width:1025px) and (max-width:1200px){
    
    .life-area{width: 1024px; margin: 30px auto 0 auto}
    .life-area .life-list{overflow: hidden;padding: 5px 0 10px 0}
    .life-area .life-list ul li{float: left;margin: 0 5px 10px 5px;width: 24%}
    
    .life-area .life-list ul li .card-news figure{height: 158px}
}
@media all and (min-width:1200px){
    
    .life-area{width: 1190px; margin: 30px auto 0 auto}
    .life-area .life-list{overflow: hidden;padding: 5px 0 10px 0}
    .life-area .life-list ul li{float: left;margin: 0 5px 10px 5px;width: 24%}
    
    .life-area .life-list ul li .card-news figure{height: 183px}
}

.life{width: 100%;background: #f1f3f5;padding: 30px 0 35px 0}
.life-area{}

.life-area .life-title{overflow: hidden;margin: 0 0 30px 0}
.life-area .life-title h2{float: left}
.life-area .life-title .more-btn{float: left;line-height: 35px}
.life-area .life-title .more-btn span{margin: 0 0 0 10px;display: inline-block}

.life-area h2 em{font-size: 14px;padding: 10px 10px;margin: 0 10px 0 0}


.life-area .life-list ul li:hover{cursor: pointer}
.life-area .life-list ul li .card-news{padding: 25px 0 30px 0;display: inline-block}

.life-area .life-list ul li .category{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.025em;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;
    height: 49px;
}
.life-area .life-list ul li .category span{
    float: left;
    letter-spacing: -.065em;
}
.life-area .life-list ul li .category .more{
    float: right;
    font-size: 12px;
    color: #555;
    font-weight: 600;
    letter-spacing: -.025em;
}
.life-area .life-list ul li .headline{
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -.025em;
    display: inline-block;
    line-height: 24px;
    max-height: 50px;
    height: 50px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -.065em;
    width: 90%;
    margin: 8px auto 10px auto;
}
.life-area .life-list ul li .description{
    font-size: 14px;
    letter-spacing: -.065em;
    line-height: 22px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 90%;
    margin: 0 auto;
    min-height: 44px;
}
.life-area .life-list ul li .card-news{background: #fff;overflow: hidden;border-radius: 10px;box-shadow: 1px 1px 5.09px 0.91px rgb(0 0 0 / 15%)}
.life-area .life-list ul li .card-news figure{
    overflow: hidden;
    margin: 0 0 10px 0;
}
.life-area .life-list ul li .card-news figcaption{position: fixed;left: -9999px;top:-9999px}