@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;}
.case-grid-panel{display: grid;float: left;width:100%;grid-template-columns: 100%;gap: 10px;}
.case-image-view{aspect-ratio: 5 / 3;position: relative;overflow: hidden;}
.case-thumb-img{aspect-ratio: 5 / 3;position: absolute;top: 0;left: 0;z-index: 100;}
.case-thumb-logo{position: absolute;top: 10px;left: 10px;z-index: 110;width:40%;}
.case-layer-gradient{position: absolute;top: 0;left: 0;width:100%;height: 100%;z-index: 106;background-image: linear-gradient(to top,rgba(17,100,244,1),rgba(17,100,244,0));}
.case-thumb-tags{position: absolute;z-index: 108;left: 10px;height: 30px;width:calc(100% - 20px);bottom:10px;}
.case-thumb-tags > span{display: block;float: left;width: fit-content;height: 28px;color: #f6f6f6;border:1px solid #f6f6f6;padding:0 10px;line-height: 28px;margin-right: 4px;font-size: 12px;font-family: NSimsun;transition: 0.2s ease-in-out 0s;}
.case-thumb-tags > span:last-child{margin-right: 0;}
.case-layer-blur{position: absolute;left: 0;top: 0;width:100%;height: 100%;background: rgba(17,100,244,0.5);backdrop-filter: blur(8px);z-index: 104;transition: 0.3s ease-in-out 0s;opacity: 0;}
.case-look-tag{width:98px;height: 28px;border:1px solid #fff;color:#fff;font-size: 14px;line-height: 28px;text-align: center;position: absolute;z-index: 109;left:calc(50% - 50px);top:calc(50% - 15px);transition: 0.3s ease-in-out 0s;opacity: 0;}
.case-info-box{padding:10px;box-sizing: border-box;border:1px solid #d0d0d0;border-top:none;background: #fff;transition: 0.2s ease-in-out 0s;position: relative;}
.case-info-box::before{display: block;float: left;content: "";width:0;height: 2px;background: var(--theme-bg-color--);position: absolute;z-index: 200;bottom: 0;left:0;transition: 0.2s ease-in-out 0s;}
.case-name{height: 24px;line-height: 24px;font-size: 15px;color: #363636;transition: 0.2s ease-in-out 0s;}
.case-category-tag{height: 24px;line-height: 24px;margin-bottom: -2px;}
.case-category-tag >span{display: block;float: left;width: auto;height: 24px;line-height: 24px;color: #858585;font-size: 13px;}
.case-category-tag >span:first-child{font-size: 16px;margin-right: 3px;}
.case-elems:hover > .case-image-view > .case-layer-blur{opacity: 1;}
.case-elems:hover > .case-image-view > .case-thumb-tags > span{background:#fff;border:1px solid #fff;color:var(--theme-bg-color--);}
.case-elems:hover > .case-image-view > .case-look-tag{opacity: 1;}
.case-elems:hover > .case-info-box::before{width: 100%;}
.case-elems:hover > .case-info-box > .case-name{color:var(--theme-bg-color--);}
@media (min-width: 640px){
    .case-filter-grid{grid-template-columns: repeat(4,calc((100% - 15px) / 4));gap: 5px;margin:10px 0;}
    .case-grid-panel{grid-template-columns: repeat(2,calc(50% - 3px));gap: 6px;}
}
@media (min-width: 768px){
    .case-filter-grid{grid-template-columns: repeat(5,calc((100% - 20px) / 5));gap: 5px;margin:15px 0;}
    .case-grid-panel{grid-template-columns: repeat(2,calc(50% - 5px));gap: 10px;}
}
@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;}
    .case-grid-panel{grid-template-columns: repeat(3,calc((100% - 20px) / 3));gap: 10px;}
}
@media (min-width: 1200px){
    .case-grid-panel{grid-template-columns: repeat(3,calc((100% - 40px) / 3));gap: 20px;}
    .case-filter-grid,.case-grid-panel{width:1160px;margin-left: calc(50% - 580px);}
}
@media (min-width: 1440px){
    .case-grid-panel{grid-template-columns: repeat(3,calc((100% - 60px) / 3));gap: 30px;}
    .case-filter-grid,.case-grid-panel{width:1380px;margin-left: calc(50% - 690px);}
}
@media (min-width: 1560px){
    .case-filter-grid,.case-grid-panel{width:1480px;margin-left: calc(50% - 740px);}
}