.main { height: 80.8vh; // background-color: red; .one { width: 100%; } .two { display: flex; flex-direction: row; justify-content: space-around; width: 96vw; background-color: #ffffff; margin-bottom: 1px; padding: 10px 0; text { font-size: 14px; } } .thr { width: 96vw; flex-grow: 1; position: relative; background-color: #ffffff; .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; .list-scroll-view { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; .list { display: flex; width: 96vw; margin: 10px 0; border-bottom: 0.1px solid #D1CFCF; .image { display: flex; justify-content: center; align-items: center; width: 30vw; image { width: 20vw; height: 20vw; border-radius: 5px; } } .content { padding: 5px; .name { font-size: 14px; font-weight: bold; padding: 2px 0; .color { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #b3ab3c; padding: 0 5px; margin-right: 2px; } .color0 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #da2525; padding: 0 5px; margin-right: 2px; } .color1 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #3c87b3; padding: 0 5px; margin-right: 2px; } .color2 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #b33c6e; padding: 0 5px; margin-right: 2px; } .color3 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #3cb3b3; padding: 0 5px; margin-right: 2px; } .color4 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #3CB371; padding: 0 5px; margin-right: 2px; } .color5 { font-size: 11px; color: #FFFFFF; border-radius: 2px; background-color: #DA70D6; padding: 0 5px; margin-right: 2px; } } .title { font-size: 12px; color: #666; padding: 2px 0; } } } } } } }