.bod_box { width: 100%; } .bod_box video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; } .cen_box { width: 100%; height: 100vh; display: grid; grid-template-rows: 100px 1fr; box-sizing: border-box; } .head { position: relative; } .head1_1 { text-align: center; position: absolute; left: 0; right: 0; top: 16px; margin: auto; font-weight: bold; font-size: 26px; letter-spacing: 4px; color: transparent; background: linear-gradient(to bottom, #98F5FF, #0EC0FF); -webkit-background-clip: text; background-clip: text; overflow: hidden; white-space: nowrap; animation: move 5s steps(60) forwards; } @keyframes move { from { width: 0; } to { width: 100%; } } .head2 { position: absolute; display: flex; right: 10%; top: 35px; bottom: 0; font-weight: bold; color: #fff; } .head2 div:nth-child(1) { font-size: 26px; } .head2 div:nth-child(2) { margin: 0 20px; margin-top: 14px; } .head2 div:nth-child(3) { margin-top: 14px; } .head img { width: 100%; background-size: 100% 100%; } .matter { width: 100%; top: 0; bottom: 0; margin: auto; } .lunType { width: 100%; } .lunType1_1 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 100px; justify-items: center; } .lunType2 { width: 20vw; height: 15vw; background-image: url('./img/233.png'); background-size: 100% 100%; color: #fff; font-size: 26px; } .lunType2 div { text-align: center; margin: 30px 0 20px; font-family: '思源宋体 Light' !important; } .lunType2 img { width: 110px; height: 132px; margin: 0 auto; } .lunType2:hover { color: #00f8b0; background-image: url('./img/11.png'); }