*{ font-family: 'Noto Sans KR', sans-serif; } body{ font-family: 'Noto Sans KR', sans-serif; } .enroll_person_popup{ width: 678px; height: 360px; border: 1px solid #ccc; box-shadow: 1px 2px 6px rgba(8,26,49,0.42); padding: 25px 35px 20px 35px; border-radius: 5px; } .person_info_wrap,.person_list{ display: inline-block; vertical-align: top } .person_info_wrap{ border-right: 1px solid #ccc; padding-right: 20px; } .person_info_title{ font-size: 20px; margin-bottom: 20px; } .person_info_title img{ margin-right: 10px; } .person_info_text{ margin-bottom: 7px; font-weight: 500; } .person_input ul li{ margin-bottom: 10px; } .person_input ul li input{ width: 242px; height: 28px; border: 1px solid #aaa; border-radius: 5px; font-size: 14px; padding-left: 18px; } .person_input ul li input:focus{ border: 1px solid #0388d2; color: #0388d2; } .person_input ul li:last-child .person_info_text img{ /* margin-left: 180px; */ } .person_list{ margin-left: 20px; width: 302px; height: 338px; border: 1px solid #aaa; border-radius: 5px; overflow-y: scroll; overflow-x: hidden } .person_list table{ width: 302px; text-align: center; table-layout:fixed; overflow: hidden; } .person_list table tr{ width:360px; display:flex; } .person_list table tr td{ text-overflow:ellipsis; white-space: nowrap; padding: 10px; text-align: center; font-size: 14px; position: relative; text-align: left; width:auto; flex-glow: 1; } .person_list table tr td::after{ position: absolute; top:12px; width:1px; height:10px; margin-left: 10px; content:" "; background-color: #aaa } .person_list table tr:hover{ background-color: #0388d2; box-shadow: 0 0px 6px rgba(16,74,107,0.72); color: #fff; } .person_list table tr:hover td{ color:#fff; } .person_list table tr:hover td::after{ background-color: #fff; color: #fff; } /* .person_list table tr td:first-child{ width: 82px; padding-left: 15px; } .person_list table tr td.ManTel{ width: 110px; text-align: left; } .person_list table tr td:last-child{ text-align: left; border: none; } */ .person_info_btns{ text-align: center; } .person_info_btns input[type="button"]{ border: 1px solid #777; font-size: 15px; width: 70px; height: 38px; border-radius: 5px; box-shadow: 0px 0px 6px rgba(16,74,107,0.42); font-family: 'Noto Sans KR', sans-serif; font-weight: 700; background-color: #fff; margin-right: 10px } .person_info_btns input[id="item_insert_btn"]{ border: 1px solid #0388d2; color: #0388d2; } .person_info_btns input[id="item_update_btn"]{ border: 1px solid #0388d2; color: #0388d2; } .person_info_btns input[id="item_delete_btn"]{ border: 1px solid #f44336; color: #f44336; } .person_info_btns input[id="item_cancel_btn"]{ margin-right: 0; } /* .person_info_btns input[type="button"]:first-child{ border: 1px solid #0388d2; color: #0388d2; } .person_info_btns input[type="button"]:nth-child(2){ border: 1px solid #f44336; color: #f44336; } .person_info_btns input[type="button"]:last-child{ margin-right: 0; } */