html, body, div, img { padding: 0; margin: 0; box-sizing: border-box; overflow: auto; font-family: "Apple SD Gothic Neo", "Malgun Gothic", arial, sans-serif; } html, body { height: 100%; width: 100%; } .body_wrap { width: 100%; height: 100%; overflow: auto; max-width: 600px; margin: 0 auto; padding: 20px 0; } .info_wrap { width: 100%; height: 20px; text-align: right; padding: 0 20px; } .info_wrap .info_text { height: 20px; line-height: 20px; color: #cdcdcd; font-size: 9pt; } .search_wrap { width: 100%; height: 110px; } .search_wrap .input_wrap { height: 40px; width: 100%; } .search_wrap .input_wrap .input_search_key { width: calc(100% - 80px); height: 40px; padding: 0 20px; box-sizing: border-box; border: 1px solid #D7D6D6; font-size: 12pt; margin-left: 10px; margin-right: 10px; float: left; } .search_wrap .input_wrap .btn_input_clear { width: 50px; float: left; height: 40px; margin-right: 10px; line-height: 40px; color: #666; background-color: #d7d6d6; font-size: 11pt; text-align: center; } .search_wrap .btn_wrap { margin: 0 auto; height: 40px; padding: 0; margin: 10px 10px 0 10px; color: #fff; } .search_wrap .btn_wrap .btn_search { float: left; line-height: 40px; width: calc(70% - 10px); text-align: center; cursor: pointer; margin-left: 20px; background-color: #ff6700; } .search_wrap .btn_wrap .btn_reload { float: left; line-height: 40px; width: calc(30% - 10px); text-align: center; cursor: pointer; background-color: #cdcdcd; } .content { width: 100%; height: calc(100% - 130px); padding: 0 10px; margin-top: 20px; overflow-y: scroll; } .content .list_wrap { width: 100%; height: auto; overflow: auto; } .content .list_wrap .hint_card { width: 100%; height: auto; overflow: auto; border: 1px solid #d7d6d6; margin-bottom: 10px; } .content .list_wrap .hint_card .address_wrap { background-color: #cdcdcd; color: #333; padding: 10px; } .content .list_wrap .hint_card .hint_list { width: 100%; height: auto; overflow: auto; padding-top: 10px; } .content .list_wrap .hint_card .hint_list .hint_wrap { width: 100%; height: auto; overflow: auto; padding-bottom: 5px; margin-bottom: 10px; } .content .list_wrap .hint_card .hint_list .hint_wrap.with_order { border: 1px solid red; } .content .list_wrap .hint_card .hint_list .hint_wrap .order_number { color: #fff; font-weight: bold; padding: 5px 10px; background-color: red; margin-bottom: 5px; } .content .list_wrap .hint_card .hint_list .hint_wrap .address_detail_wrap { padding: 5px 10px; } .content .list_wrap .hint_card .hint_list .hint_wrap .address_detail { float: left; } .content .list_wrap .hint_card .hint_list .hint_wrap .last_updated_at { float: right; font-size: 12px; color: #CDCDCD; } .content .list_wrap .hint_card .hint_list .hint_wrap .hint { color: #555; padding: 0 10px; } .content .list_wrap .not_found { width: 100%; height: 50px; line-height: 50px; border: 1px solid #d7d6d6; margin-bottom: 10px; text-align: center; overflow: hidden }