.case-item{width:100%;position:relative;overflow:hidden;border-radius:24px}.case-item>.img-addon{height:320px;display:block}.case-item>.img-addon img{width:100%;height:100%;object-fit:cover}.case-item:before{background:linear-gradient(180deg,transparent,rgba(0,0,0,.48));content:""}.case-item .mask,.case-item:before{position:absolute;top:0;left:0;bottom:0;right:0}.case-item .mask{background:rgba(0,0,0,.3);transition:background .3s ease}.case-item .mask .logo{transition:all .3s ease;mix-blend-mode:lighten;width:100px;height:auto}.case-item .mask .logo img{object-fit:contain}.case-item .mask .df-info{position:absolute;left:24px;right:24px;bottom:24px;height:40px;font-size:var(--text-s-2xl);line-height:var(--leading-s-2xl);font-weight:var(--font-weight-medium);color:var(--color-white);transition:all .2s ease;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.case-item .mask .case-datas{display:flex;align-items:flex-start;justify-content:center;margin-top:40px;margin-bottom:40px;color:#fff;opacity:0}.case-item .mask .case-datas .dataitem{width:300px;display:flex;align-items:center;justify-content:center}.case-item .mask .case-datas .dataitem+.dataitem{position:relative}.case-item .mask .case-datas .dataitem+.dataitem:before{content:"";position:absolute;left:0;top:10px;width:2px;height:72px;background-color:var(--color-gray4)}.case-item .mask .case-datas .item-data{font-size:var(--text-s-base);line-height:var(--leading-s-base);height:60px;display:flex;align-items:flex-end;white-space:nowrap;justify-content:center;line-height:1}.case-item .mask .case-datas .item-data .num{font-size:var(--text-s-sm);line-height:var(--leading-s-sm);font-weight:var(--font-weight-bold)}.case-item .mask .case-datas .item-data .unit{margin-left:4px}.case-item .mask .case-datas .item-tit{font-size:var(--text-s-xs);line-height:var(--leading-s-xs);text-align:center}.case-item .mask .case-link{opacity:0}@media screen and (min-width:790px){.case-item>.img-addon{height:360px}.case-item .mask .logo{width:160px;height:114px}.case-item .mask .df-info{left:30px;right:30px;bottom:36px;font-size:20px;line-height:30px;height:60px}.case-item .mask .case-datas{margin:18px auto 42px}.case-item .mask .case-datas .dataitem{width:150px}.case-item .mask .case-datas .dataitem+.dataitem:before{top:14px;width:1px;height:36px}.case-item .mask .case-datas .item-data{font-size:20px;line-height:24px;height:40px}.case-item .mask .case-datas .item-data .num{font-size:40px;line-height:56px}.case-item .mask .case-datas .item-tit{font-size:16px;line-height:20px;margin-top:2px;padding-left:4px;padding-inline:12px}.case-item .mask .case-link{opacity:0}.case-item:hover .mask{background-color:var(--color-c-brand)}.case-item:hover .mask .logo{width:112px;height:80px;margin:56px auto 0}.case-item:hover .mask .df-info{opacity:0;transform:translateY(100%)}.case-item:hover .mask .case-datas,.case-item:hover .mask .case-link{opacity:1}}