body{background-color:#f0f0f0;justify-content:center;align-items:center;height:100vh;min-height:844px;display:flex}.wrapper{background-color:#fff;border-radius:20px;width:90%;max-width:1400px;height:auto;padding:30px 100px 10px;box-shadow:0 10px 20px #0000001a}header .page-title .title{font-size:2.5rem;font-weight:700}main{width:100%;height:100%}.staff-control-wrap{flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:100%;margin-top:50px;margin-bottom:30px;display:flex}.staff-control-wrap .staff-enroll{cursor:pointer;background-color:#7b9acc;width:200px;height:60px;margin-right:10px;font-weight:700;position:relative}.staff-control-wrap .staff-enroll:hover{background-color:#fcf6f5;background-image:none}.staff-control-wrap .staff-enroll a{color:#fcf6f5;justify-content:center;align-items:center;width:100%;height:100%;text-decoration:none;display:flex}.staff-control-wrap .staff-enroll:hover a{color:#7b9acc}.staff-enroll:before,.staff-enroll:after{content:"";background-color:#7b9acc;transition:all .3s;position:absolute;top:0;left:0}.staff-enroll:before{width:0%;height:2px}.staff-enroll:hover:before{width:100%}.staff-enroll:after{width:2px;height:0%}.staff-enroll:hover:after{height:100%}.staff-enroll a:before,.staff-enroll a:after{content:"";background-color:#7b9acc;transition:all .3s;position:absolute;bottom:0;right:0}.staff-enroll a:before{width:0%;height:2px}.staff-enroll a:after{width:2px;height:0%}.staff-enroll:hover a:before{width:100%}.staff-enroll:hover a:after{height:100%}.search-input{border:2px solid #767676;outline:none;font-size:1rem}.search-input:hover{box-shadow:0 1px 5px #ccc}.staff-list-wrap{width:100%;height:600px;font-size:.875rem;overflow-x:hidden;overflow-y:auto}.staff-list-wrap::-webkit-scrollbar{width:8px}.staff-list-wrap::-webkit-scrollbar-thumb{background:#6bb7f5;border-radius:10px;height:30%}.staff-list-wrap::-webkit-scrollbar-track{background:#217af41a;border-radius:10px}table{text-align:center;border-collapse:collapse;width:100%}table thead tr th{padding:20px 0}table tbody tr{cursor:pointer;border-top:1px solid #ccc;width:100%;position:relative}table tbody tr:hover:after{content:"";background-color:#cccccc26;width:100%;height:100%;position:absolute;top:0;left:0}table tbody tr td{padding:10px}table tbody tr td:first-child{width:18%;height:190px}table tbody tr td:nth-child(2){width:15%}table tbody tr td img{border-radius:8px;max-width:100%;max-height:100%;box-shadow:0 2px 4px #0000001a}.modal{z-index:10;background-color:#00000050;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-content{background-color:#fefefe;border-radius:6px;flex-direction:column;justify-content:space-around;align-items:center;width:500px;height:300px;animation:.3s forwards modal-active;display:none}.modal-cancel{cursor:pointer;margin-top:-5%;margin-left:90%}.modal-cancel:hover{color:red;animation:.5s infinite alternate modal-cancel}.modal-content h1{font-size:1.25rem;font-weight:700}.modal-btns{text-align:center;justify-content:space-around;align-items:center;width:100%;display:flex}.modal-btns div{color:#fff;cursor:pointer;border-radius:8px;width:40%;padding:20px}.left-btn{background-color:#4f4f4f;transition:all .5s ease-in-out}.left-btn:hover{background-color:#3a3a3a;animation:.5s forwards modal-btn}.right-btn{background-color:#dc3c50;transition:all .5s ease-in-out}.right-btn:hover{background-color:#c93647;animation:.5s forwards modal-btn}.success-img{margin-bottom:-150px}.success-img i{color:green;font-size:3.125rem}.active{display:flex}@keyframes modal-cancel{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes modal-active{0%{transform:scale3d(0,0,0)}50%{transform:scale(.8)}80%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes modal-btn{50%{transform:scale(.8)}80%{transform:scale(1.1)}to{transform:scale(1)}}@media screen and (width<=1024px){.wrapper{max-width:90%;padding:30px}header .page-title .title{font-size:2rem}.staff-control-wrap{margin:30px auto}.staff-control-wrap .staff-enroll{width:120px}.staff-list-wrap{font-size:.69rem}table thead tr th{padding:15px 0}table tbody tr{padding:10px}table tbody tr td:first-child{height:120px}.modal-content{width:400px;height:250px}}@media screen and (width<=768px){.staff-control-wrap{flex-direction:column;align-items:flex-start}.staff-control-wrap .staff-enroll{height:50px;margin-bottom:10px}.staff-control-wrap .staff-enroll a{font-size:.825rem}table thead{display:none}table tbody tr{width:100%;padding:0}table tbody tr td{padding:5px}table tbody tr td:first-child{width:35%}table tbody tr td:nth-child(2),table tbody tr td:nth-child(3),table tbody tr td:nth-child(4),table tbody tr td:nth-child(5){text-align:left;border-bottom:1px dotted #ccc;width:auto;height:100%;margin:10px;display:block}.modal-content h1{font-size:1rem}.modal-cancel{margin-top:-3%;font-size:1rem}.modal-btns{flex-direction:column}.modal-btns div{margin:5px 0;padding:10px;font-size:.9rem}}@media screen and (width<=550px){table tbody tr td:first-child{width:40%}table tbody tr td:nth-child(2),table tbody tr td:nth-child(3),table tbody tr td:nth-child(4),table tbody tr td:nth-child(5){margin:5px}.modal-content{width:300px;height:200px}.modal-cancel{margin-top:-2.5%;font-size:.75rem}.success-img{margin-bottom:-90px}.success-img i{color:green;font-size:2.5rem}}@media screen and (width<=440px){.staff-control-wrap div.staff-enroll{width:100px;height:40px}.staff-list-wrap{font-size:.5rem}table tbody tr td{padding:5px}.modal-btns div{width:60%;font-size:.625rem}}@media screen and (width<=350px){.modal-content{width:200px;height:150px}.modal-content h1{font-size:.75rem}.modal-cancel{margin-top:-1%;margin-right:4px;font-size:.5rem}.success-img{margin-bottom:-60px}.success-img i{color:green;font-size:30px}}