.ProjectListPage{overflow:overlay;overflow-x:hidden;height:var(--main-height);position:relative}.ProjectListPage>div{padding:5rem 0}.ProjectListPage .titleBlock{position:sticky;top:0;height:80px;z-index:10;background-color:#fff}.ProjectListPage .titleBlock .Container{position:relative}.ProjectListPage .titleBlock .titleFrame{position:absolute;width:100%;transition:.3s ease-in-out}.ProjectListPage .titleBlock .characterBlock{position:absolute;top:0;left:0;width:100%;height:100%}.ProjectListPage .titleBlock .characterBlock img{position:absolute;right:3%;top:-10%}.ProjectListPage ul.list{padding-top:3rem;display:grid;gap:1rem;justify-content:center;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}.ProjectListPage ul.list img{display:none}.ProjectListPage ul.list li{cursor:pointer}.ProjectListPage ul.list li>div{width:100%;height:100%;transition:.3s;transform:scale(1);background-size:cover;background-position:center;background-repeat:no-repeat}.ProjectListPage ul.list li:hover>div{transform:scale(1.02)}@media screen and (max-width: 750px){.ProjectListPage ul.list img{display:block;width:80%;margin:auto}.ProjectListPage ul.list{grid:1fr / auto}.ProjectListPage ul.list li{grid-column:auto!important;grid-row:auto!important}.ProjectListPage ul.list li>div{background-image:none!important}.ProjectListPage>div{padding:0 0 5rem}}@media screen and (max-width: 500px){.ProjectListPage .titleBlock .titleFrame{top:30px}.ProjectListPage .titleBlock .titleFrame img.frame{width:100%}.ProjectListPage .titleBlock .characterBlock img{width:17%}}
