.app-application{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;background-color:var(--color-primary);background-image:url(/images/background-mask.jpg);background-size:cover;background-position:50% 50%;background-blend-mode:multiply;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:999}.app-application>.header{position:relative;z-index:3}.app-application>.header>.logo{height:4rem}.app-application>.header>.info{cursor:pointer}.app-application>.systems{margin:0 10vw}.app-application>.systems>.item{width:25vh;height:25vh;position:relative;border:var(--color-primary-light-3) solid 3px;background-color:var(--color-primary);background-position:50%;background-size:cover;cursor:pointer;transition:all .5s;transform:rotate(45deg);box-shadow:0 0 20px rgba(0,0,0,.6);margin:0 -2.5vh}.app-application>.systems>.item>.title{padding:1rem 0;margin:-25%;text-align:center;background-color:rgba(var(--color-black-rgb),.6);color:#fff;white-space:nowrap;transform:rotate(-45deg);transition:all .5s}.app-application>.systems>.item>.title>.cn{font-size:24px;font-weight:700}.app-application>.systems>.item>.title>.en{font-size:16px;opacity:.6;font-weight:700;text-transform:uppercase}.app-application>.systems>.item>.abb{position:absolute;left:0;right:0;top:0;bottom:0;text-align:center;font-family:impact;font-size:36px;text-transform:uppercase;margin-bottom:10px;text-decoration:underline;transform:rotate(-45deg);color:var(--color-white);text-shadow:0 0 5px rgba(0,0,0,.8)}.app-application>.systems>.item:nth-child(odd){margin-top:-19.5vh}.app-application>.systems>.item:nth-child(2n){margin-bottom:-19.5vh}.app-application>.systems>.item:hover{transform:rotate(45deg) scale(1.25);box-shadow:0 0 40px rgba(0,0,0,.6);z-index:2;border-color:var(--color-white)}.app-application>.systems>.item:hover>.title{padding:16vh 0}