.wrap{ position: absolute; width: 100%; height: 100%; // color: #fff; // background: url('assets/bg.jpg') no-repeat top; background: #000A3B; 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: 30px; color: #01F3FF; 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: #0196BD 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: 70%; } .content{ position: absolute; top: 12%; left: 2%; width: 96%; height: 87%; } .box-top{ width:100%; height: 10px; background: url('~assets/bg-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; }