@charset "UTF-8";
body{background: #f1f1f1;}
.content1-wrapper{padding:10px;box-sizing: border-box;}
.case-filter-grid{display: grid;float: left;width:100%;grid-template-columns: repeat(3,calc((100% - 10px) / 3));gap: 5px;}
.case-cate-item{display: block;float: left;width: calc(100% - 2px);height: 36px;text-align: center;line-height: 36px;border:1px solid #d0d0d0;position: relative;overflow: hidden;transition: 0.2s ease-in-out 0s;}
.case-cate-name{position: absolute;top: 0;left: 0;z-index: 100;width:100%;height: 36px;text-align: center;line-height: 36px;transition: 0.2s ease-in-out 0s;}
.case-cate-rec{position: absolute;z-index: 98;width:0;height: 36px;left:50%;top: 0;background: var(--theme-bg-color--);transition: 0.2s ease-in-out 0s;}
.case-cate-item:hover > .case-cate-rec{width:100%;left:0;}
.case-cate-item:hover > .case-cate-name{color:#fff;}
.case-cate-item:hover{border:1px solid var(--theme-bg-color--);}
.case-cate-item-active > .case-cate-rec{width:100%;left:0;}
.case-cate-item-active > .case-cate-name{color:#fff;}
.case-cate-item-active{border:1px solid var(--theme-bg-color--);}
.content2-wrapper{padding:10px;box-sizing: border-box;}
.cnt2-wrapper,.article-elems{float: left;width:100%;}
.cnt2-grid-box{display: grid;float: left;width:100%;grid-template-columns: 100%;gap: 10px;}
.article-elems{padding:10px;box-sizing: border-box;background: #fff;border:1px solid #fff;transition: 0.2s ease-in-out 0s;}
.art-img-view{width:100%;aspect-ratio: 5 / 3;overflow: hidden;position: relative;}
.art-thumb-img{width:100%;aspect-ratio: 5 / 3;position: absolute;top: 0;left: 0;z-index: 50;transition: 0.4s ease-in-out 0s;}
.art-theme-layer{position: absolute;z-index: 60;top: 0;left: 0;width:100%;height: 100%;background: rgba(17,100,244,0.6);transition: 0.15s ease-in-out 0s;opacity: 0;}
.art-theme-preve{position: absolute;width:80px;height: 80px;top:calc(50% - 40px);left:calc(50% - 40px);text-align: center;line-height: 80px;color:#fff;font-size: 50px;transform: scale(0);transition: 0.3s ease-in-out 0s;}
.art-info-box{padding:10px 0 0 0;box-sizing: border-box;}
.art-simple-infoBox{height: 68px;}
.art-date-box{width:64px;height: 64px;position: relative;padding:2px;}
.art-date-box::before{display: block;float: left;content: "";width:66px;height: 66px;border:1px solid #afafaf;position: absolute;z-index: 50;top: 0;left: 0;transition: 0.2s ease-in-out 0s;}
.art-view-date{background: #afafaf;color: #fff;font-family: Impact;text-align: center;transition: 0.2s ease-in-out 0s;}
.art-view-date-d{height: 36px;line-height: 36px;font-size: 28px;}
.art-view-date-y{height: 28px;line-height: 28px;font-size: 16px;}
.art-titles-box{width:calc(100% - 78px);height: 68px;}
.art-title{height: 24px;line-height: 24px;font-size: 16px;font-weight: bold;transition: 0.2s ease-in-out 0s;} /* 68 - 24 = 44 */
.art-thumb-text{height: 40px;margin-top:4px;font-size: 13px;line-height: 19px;color: #8c8c8c;}
.art-cate-tags{height: 20px;margin-top:8px;}
.art-cate-tags > span{display: block;float: left;height: 20px;line-height: 20px;color: #7a7a7a;font-size: 14px;}
.art-cate-tags > span:first-child{font-size: 17px;margin-right: 4px;}
.art-cate-tags > span:last-child{float: right;display: none;}
.article-elems:hover{border:1px solid var(--theme-bg-color--);}
.article-elems:hover > .art-img-view > .art-thumb-img{transform: scale(1.1);}
.article-elems:hover > .art-img-view > .art-theme-layer{opacity: 1;}
.article-elems:hover > .art-img-view > .art-theme-layer > .art-theme-preve{transform: scale(1);}
.article-elems:hover > .art-info-box > .art-simple-infoBox > .art-date-box::before{border:1px solid var(--theme-bg-color--);}
.article-elems:hover > .art-info-box > .art-simple-infoBox > .art-date-box > .art-view-date{background: var(--theme-bg-color--);}
.article-elems:hover > .art-info-box > .art-simple-infoBox > .art-titles-box > .art-title{color: var(--theme-bg-color--);}
.cnt2-bm-box{display: none;}
@media (min-width: 640px){
    .case-filter-grid{grid-template-columns: repeat(4,calc((100% - 15px) / 4));gap: 5px;margin:10px 0;}
    .article-elems{flex-direction: row;justify-content: space-between;}
    .art-img-view{width:220px;aspect-ratio: 5 / 3;}
    .art-info-box{width:calc(100% - 240px);padding:0;}
    .art-simple-infoBox{height: 105px;}
    .art-date-box{display: none;}
    .art-titles-box{float: left;width:100%;}
    .art-thumb-text{height: 80px;line-height: 20px;}
    .text-2ell{display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
    .art-cate-tags > span:last-child{display: block;margin-right: 4px;}
    .cnt2-grid-box{gap: 20px;}
}
@media (min-width: 768px){
    .case-filter-grid{grid-template-columns: repeat(5,calc((100% - 20px) / 5));gap: 5px;margin:15px 0;}
    .cnt2-grid-box{gap: 30px;}
    .art-img-view{width:280px;aspect-ratio: 5 / 3;}
    .art-info-box{width:calc(100% - 300px);}
    .art-simple-infoBox{height: 140px;}
    .art-title{height: 28px;line-height: 28px;font-size: 18px;}
    .art-thumb-text{height: 100px;line-height: 24px;font-size: 15px;margin-top:10px;}
    .text-2ell{display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
    .art-cate-tags > span:last-child{display: block;margin-right: 4px;}
    .cnt2-grid-box{gap: 20px;}
}
@media (min-width: 992px){
    .case-filter-grid{display: block;float: left;width:100%;margin:20px 0;}
    .case-cate-item{display: block;float: left;width:140px;margin-right: 5px;margin-bottom: 5px;}
    .case-cate-item:last-child{margin-right: 0;}
    .cnt2-grid-box,.case-filter-grid{width:920px;margin-left: calc(50% - 460px);}
}
@media (min-width: 1200px){
    .case-grid-panel{grid-template-columns: repeat(3,calc((100% - 40px) / 3));gap: 20px;}
    .case-filter-grid,.case-grid-panel,.cnt2-wrapper{width:1160px;margin-left: calc(50% - 580px);}
    .cnt2-wrapper{flex-direction: row;justify-content: space-between;}
    .cnt2-grid-box{width:810px;margin-left: 0;height: fit-content;}
    .cnt2-bm-box{display: block;}
    .cnt2-bm-box{display: flex;}
    .cnt2-bm-box{width:calc(100% - 830px);}
}
@media (min-width: 1440px){
    .case-grid-panel{grid-template-columns: repeat(3,calc((100% - 60px) / 3));gap: 30px;}
    .case-filter-grid,.case-grid-panel,.cnt2-wrapper{width:1380px;margin-left: calc(50% - 690px);}
    .cnt2-grid-box{width:1000px;margin-left: 0;}
    .cnt2-bm-box{width:calc(100% - 1030px);}
}
@media (min-width: 1560px){
    .case-filter-grid,.case-grid-panel,.cnt2-wrapper{width:1480px;margin-left: calc(50% - 740px);}
    .cnt2-grid-box{width:1080px;margin-left: 0;}
    .cnt2-bm-box{width:calc(100% - 1110px);}
}