.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .main { background-color: var(--rgb000); display: flex; flex-direction: column; width: 100vw; height: 92vh; overflow-y: auto; } .main .one { display: flex; padding: 2vw; margin: 0 0 10px 0; } .main .one .one_1 { width: 80px; height: 80px; overflow: hidden; margin: 0 2vw 0 0; } .main .one .one_1 .image { width: 100%; height: 80px; overflow: hidden; border-radius: 90%; } .main .one .one_2 { flex-grow: 1; color: var(--rgbfff); font-size: 16px; font-weight: bold; padding: 2vw 0; overflow: hidden; } .main .one .one_2 .name { font-size: 18px; margin: 0 0 1vw 0; background: linear-gradient(to bottom right, var(--rgbfa4), var(--rgbfff)); color: transparent; background-clip: text; -webkit-background-clip: text; } .main .one .one_3 { padding: 4vw 0; overflow: hidden; } .main .one .one_3 button { background-color: var(--rgbfa4); color: var(--rgbfff); } .main .two { display: flex; flex-wrap: wrap; padding: 0 2vw; } .main .two .list { width: 22%; height: 74px; margin: 0 10px 10px 0; text-align: center; background: linear-gradient(to bottom right, var(--rgb000), var(--rgbfa4)); border: 1px solid var(--rgb111); border-radius: 5px; } .main .two .list .image { width: 20px; height: 20px; margin: 3vw 0 2vw 0; } .main .two .list .name { color: var(--rgbfff); font-size: 14px; } .main .two .list:nth-child(4n) { margin: 0 0 10px 0; }