.wrap{ position: absolute; width: 100%; height: 100%; color: #fff; background: url('assets/bg.jpg') no-repeat top; background-size: 100% 100%; } .wrap .bg-left{ position: absolute; pointer-events: auto; left: 10px; top: 16px; width: 12px; height: 96%; } .wrap .bg-top{ position: absolute; width: 97%; margin: 0 auto; height: 100.64px; left: 1.5%; top: 0; z-index: 9; } .wrap .bg-top .animation{ position: absolute; top: -1px; left: 14%; width: 72%; height: 162px; } // .wrap .bg-top .animation video{ // width: 1346px; // height: 162px; // object-fit: fill; // mix-blend-mode: screen; // filter: saturate(200%); // } .wrap .bg-top .bg-title{ position: absolute; left: 33%; top: 1px; width: 34%; height: 66px; line-height: 60px; font-size: 50px; color: #fff; text-align: center; overflow: hidden; cursor: pointer; pointer-events: auto; transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px); text-shadow: #0075ff 0px 0px 8px; } @media (max-width: 1500px){ .wrap .bg-top .bg-title{ font-size: 38px; } } .wrap .bg-right{ position: absolute; pointer-events: auto; right: 10px; top: 16px; width: 12px; height: 96%; } .wrap .bg-bottom{ position: absolute; pointer-events: auto; left: 34px; top: 96%; width: 96%; height: 13px; } .wrap .pic{ width: 100%; height: 100%; } .content{ position: absolute; top: 9%; left: 2%; width: 96%; height: 87%; } .box-top{ width:100%; height: 10px; background: url('assets/box-top.png') no-repeat center; background-size: 100% 100%; text-align: center; } .box-top span{ display: inline-block; position: relative; top: -10px; z-index: 999; text-shadow: rgb(0, 117, 255) 0px 0px 8px; font-family: SourceHanSansCN-Bold; font-size: 1.2rem; font-weight: bold; text-align: center; letter-spacing: 0px; } .box-bottom{ width:100%; background: url('assets/box-bottom.png') repeat fixed top; } .s-pic{ width:191.85px; height: 107.85px; position: absolute; top: 10px; left: 10px; border-radius: 6px; overflow: hidden; }