* { margin: 0; padding: 0; } body, html { /*background: #fff7f8;*/ } .home_title { font-size: 14px; box-sizing: border-box; padding: 10px 20px; } .home_title_inner { width: 100%; height: 100%; border-left: 4px solid #eb4a57; box-sizing: border-box; padding-left: 10px; } .home_content { box-sizing: border-box; padding: 20px 3vw; display: flex; flex-wrap: wrap; } .hc_inner { width: 20vw; height: 10vw; border: 1px solid #cccccc; margin-left: 2vw; margin-bottom: 2vw; box-sizing: border-box; padding: 1vw 2vw; background: white; } .hc_inner:hover { box-shadow: 0 0 5px #EB4A57; border: 1px solid transparent; } .hc_inner_sort { font-size: 1vw; margin-bottom: 1vw; } .hc_inner_percent { display: flex; align-items: center; justify-content: space-between; } .hip_line { width: 2px; height: 2.5vw; background: linear-gradient(#e69a5e, #d64b4b); } .hip_num{ width: 8vw; font-size: 1.2vw; } .hip_percent{ width: 5vw; height: 5vw; text-align: center; line-height: 5vw; font-size: 0.5vw; background: white; } .home_quant{ box-sizing: border-box; padding: 20px 3vw; display: flex; flex-wrap: wrap; } .hq_inner{ width: 28vw; background: white; border-radius: 4px; margin-left: 2vw; margin-bottom: 2vw; box-sizing: border-box; padding: 2vw; display: flex; } .hq_inner:nth-child(1):hover { box-shadow: 0 0 5px #fe755f; } .hq_inner:nth-child(2):hover { box-shadow: 0 0 5px #f0c550; } .hq_inner:nth-child(3):hover { box-shadow: 0 0 5px #85cc32; } .hq_inner_left{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5vw; } .hq_inner_left>img{ display: block; width: 4vw; height: 4vw; margin-bottom: 1vw; } .hq_inner_left>span{ font-size: 1.2vw; } .hq_inner_right{ font-size: 1vw; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding-left: 2vw; }