.case-area[data-v-4d1593f2]{width:100vw;height:calc(100vh - 54px);padding-bottom:128px;background:transparent;position:relative;z-index:10}.case-area .case-bg[data-v-4d1593f2]{width:100%;height:100%;position:absolute;z-index:-1;top:0;left:0;background-image:url(../img/bg-02.97dbb999.jpeg)}.case-area .case-bg[data-v-4d1593f2]:before{content:"";width:100%;height:100%;position:relative;z-index:10;background:transparent;background-image:linear-gradient(180deg,transparent 10%,rgba(10,15,20,.9));backdrop-filter:blur(24px);display:block}.case-area .case-content[data-v-4d1593f2]{width:100%;height:calc(100vh - 240px);float:left}.project-content[data-v-4d1593f2]{width:20%;float:left;padding:16px}.project-content .project-add[data-v-4d1593f2],.project-content .project[data-v-4d1593f2]{width:100%;float:left;border:1px solid hsla(0,0%,100%,.2);background:hsla(0,0%,100%,.04);overflow:hidden;cursor:pointer;transition:all .1s linear;border-radius:8px;position:relative}.project-content .project-add[data-v-4d1593f2]:hover,.project-content .project[data-v-4d1593f2]:hover{border-color:rgba(30,170,255,.8);box-shadow:0 0 20px rgba(30,170,255,.4)}.project-content .project-add:hover span[data-v-4d1593f2],.project-content .project:hover span[data-v-4d1593f2]{color:#1eaaff}.project-content .project-add:hover .project-shadow[data-v-4d1593f2],.project-content .project:hover .project-shadow[data-v-4d1593f2]{opacity:1}.project-content .project-add .project-img[data-v-4d1593f2],.project-content .project .project-img[data-v-4d1593f2]{width:100%;float:left;padding-bottom:56.25%;position:relative}.project-content .project-add .project-img .project-img-frame[data-v-4d1593f2],.project-content .project .project-img .project-img-frame[data-v-4d1593f2]{width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);overflow:hidden}.project-content .project-add .project-img img[data-v-4d1593f2],.project-content .project .project-img img[data-v-4d1593f2]{max-width:100%;max-height:100%;transition:all .1s linear}.project-content .project-add span[data-v-4d1593f2],.project-content .project span[data-v-4d1593f2]{width:100%;height:40px;line-height:40px;float:left;text-align:center;font-size:14px;color:hsla(0,0%,100%,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding:0 16px;transition:all .1s linear}.project-content .project-add .project-shadow[data-v-4d1593f2],.project-content .project .project-shadow[data-v-4d1593f2]{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .1s linear}.project-content .project[data-v-4d1593f2]{background:#23415f;border:0}.project-content .project[data-v-4d1593f2]:hover{box-shadow:none}.project-content .project:hover .project-img img[data-v-4d1593f2]{transform:scale(1.1)}.project-content .project-add[data-v-4d1593f2]{flex-direction:row;display:flex;align-items:center;justify-content:center;font-size:18px;padding:16px;color:hsla(0,0%,100%,.8)}.project-content .project-add[data-v-4d1593f2]:hover{color:#1eaaff}.project-content .project-add:hover img[data-v-4d1593f2]{opacity:1}.project-content .project-add img[data-v-4d1593f2]{width:36px;height:36px;margin-right:24px;opacity:.8;transition:all .1s linear}@media(max-width:1400px){.project-content[data-v-4d1593f2]{width:25%}}@media(max-width:960px){.project-content[data-v-4d1593f2]{width:33.3333333333%}}