body,html{ background: #EFEEF4; } .nav{ width: 100%; height: 100px; background: white; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .nav_inner{ width: 50%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } .nav_inner:nth-child(2){ border-left: 1px solid gainsboro; } .nav_inner span:nth-child(1){ font-size: 14px; color: #8a8a8a; } .nav_inner span:nth-child(2){ font-weight: bold; font-size: 14px; } .content{ box-sizing: border-box; margin: auto; margin-top: 10px; padding: 0 10px; width: calc(100% - 20px); height: auto; overflow: hidden; background: white; } .content_title{ box-sizing: border-box; padding: 5px 10px; font-size: 13px; color: #686868; font-weight: bold; display: flex; justify-content: space-between; } .content_inner{ display: flex; width: 100%; justify-content: space-between; box-sizing: border-box; padding: 5px 10px; border-top: 1px solid #EFEEF4; font-size: 13px; } .content_inner_right{ display: flex; align-items: flex-end; flex-direction: column; box-sizing: border-box; } .content_inner_right span:nth-child(1){ color: #46B26C; font-size: 4vw; font-weight: bold; } .content_inner_right span:nth-child(2){ margin-top: 5px; font-size: 13px; white-space: nowrap; color: #8a8a8a; } .card_logo{ margin-top: 30px; width: 100%; height: 40px; margin-bottom: 20px; } .card_logo>img{ margin: 0 auto; display: block; width: 30%; height: auto; }