* { margin: 0; padding: 0; box-sizing: border-box; } .content .flexflex { display: flex; } .content .flexcenter { display: flex; justify-content: center; align-items: center; } .content .flexjcenter { display: flex; justify-content: center; } .content .flexacenter { display: flex; align-items: center; } .content .flex1 { flex: 1; } .content .flexcolumn { display: flex; flex-direction: column; } .content .mar1200 { width: 1200px; margin: 0 auto; } .content .introduce { width: 100%; } .content .introduce::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 830px; background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%); z-index: -1; } .content .introduce .head { height: 116px; border-bottom: 1px solid rgba(255, 255, 255, 0.101961); } .content .introduce .head .logo .icon { width: 139px; height: 28px; } .content .introduce .box { justify-content: space-between; height: 685px; } .content .introduce .box .info { padding-top: 60px; } .content .introduce .box .info .brand { margin-bottom: 175px; } .content .introduce .box .info .brand .fill { width: 16px; height: 33px; background-color: #f3974b; margin-right: 8px; } .content .introduce .box .info .brand .text { font-family: "ArialMT", "Arial", sans-serif; font-size: 14px; color: #ffffff; flex-direction: column; justify-content: space-between; height: 33px; } .content .introduce .box .info .award { flex-direction: column; } .content .introduce .box .info .award .title { width: 101px; height: 24px; margin-bottom: 25px; } .content .introduce .box .info .award .name { width: min-content; height: 65px; margin-bottom: 30px; } .content .introduce .box .info .award .explain { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #ffffff; line-height: 24px; } .content .introduce .box .album { width: 800px; height: 448px; margin-top: 60px; margin-right: 50px; position: relative; z-index: 1; } .content .introduce .box .album .bj { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .content .introduce .box .album .bj.bj1 { width: 750px; height: 750px; z-index: -2; } .content .introduce .box .album .bj.bj2 { width: 720px; height: 720px; z-index: -1; } .content .introduce .box .album .bj.bj3 { width: 100%; height: 100%; z-index: 1; } .content .introduce .box .album .bj.bj4 { width: 68px; height: 68px; z-index: 2; } .content .introduce .box .album .bj.bj5 { width: 236px; height: 340px; z-index: 3; top: 0; left: 318px; transform: translate(0); } .content .introduce .box .album .img { width: 100%; height: 100%; } .content .introduce .box .album .play { width: 26px; height: 26px; position: absolute; left: 30px; bottom: 30px; z-index: 1; } .content .introduce .trait { background-color: #ffffff; height: 420px; } .content .introduce .trait .item { padding-top: 98px; flex-direction: column; align-items: center; } .content .introduce .trait .item .icon { width: 48px; margin: 0 auto 22px; } .content .introduce .trait .item .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 18px; color: #000000; text-align: center; margin-bottom: 42px; } .content .introduce .trait .item .text { width: 266px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; line-height: 26px; } .content .works { background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%); flex-direction: column; position: relative; } .content .works .bj1 { width: 1200px; height: 196px; margin: 0 auto; } .content .works .name-box { position: absolute; top: 83px; left: 50%; transform: translateX(-50%); width: 402px; height: 64px; z-index: 1; } .content .works .name-box .bj { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .content .works .name-box .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 208px; height: 49px; } .content .works .name-box .line { position: absolute; height: 3px; } .content .works .name-box .line.line-1 { width: 51px; left: 35px; top: 20px; } .content .works .name-box .line.line-2 { width: 41px; left: 45px; top: 29px; } .content .works .name-box .line.line-3 { width: 31px; left: 55px; top: 38px; } .content .works .name-box .line.line-4 { width: 51px; left: 314px; top: 20px; } .content .works .name-box .line.line-5 { width: 41px; left: 314px; top: 29px; } .content .works .name-box .line.line-6 { width: 31px; left: 314px; top: 38px; } .content .works .mv-box { display: grid; grid-template-columns: repeat(3, 1fr); background-color: #ffffff; border-radius: 20px; } .content .works .mv-box .item { height: 500px; flex-direction: column; padding-top: 29px; } .content .works .mv-box .item .serial { height: 44px; font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif; font-weight: 700; font-style: normal; color: #000000; font-size: 32px; margin-left: 40px; margin-bottom: 18px; } .content .works .mv-box .item .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 20px; color: #000000; margin-left: 40px; margin-bottom: 18px; } .content .works .mv-box .item .text { height: 96px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; line-height: 24px; margin-bottom: 10px; } .content .works .mv-box .item .time { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; } .content .works .bj2 { width: 1200px; height: 196px; margin: 0 auto; }