@import url(reset.css);

/* 어드민 공통 */
body {
  background: #fafafa;
}

/* 헤더 */
#header {
  border-bottom: 1px solid #E0E0E0;
}
#header .center {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 40px;
  background: #fafafa;
}
#header h1 {
  margin-right: 30px;
}
#header h1 img {
  height: 32px;
}
#header h2 {
  font-size: 20px;
  line-height: 29px;
  font-weight: 700;
  color: #333;
}

.center {
  width: 1280px;
  margin: 0 auto;
  background: #fff;
}

#main {
  padding: 0 40px 100px;
}

#main h3 {
  padding: 30px 0;
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  color: #333;
}

/* 테이블 */
#main table {
  width: 100%;
  border-top: 1px solid #e0e0e0;
  border-bottom: none;
}
#main table tr th,
#main table tr td {
  height: 50px;
  color: #333;
}
#main table tr th:not(:last-child),
#main table tr td:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}
#main table tr th {
  background: #f9f9f9;
  border-bottom: none;
}
#main table tr th.sort {
  background: #f9f9f9 url(../images/ico_sort.png) no-repeat right 10px center;
  cursor: pointer;
}
#main table tr td {
  padding: 0 20px 0 10px;
  border-bottom: 1px solid #e0e0e0;
}
#main table tbody tr th {
  padding-left: 20px;
  border-bottom: none;
  text-align: left;
}

/*checkbox*/
.checks {
  position: relative;
}
.checks input[type="checkbox"] {
  position: absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.checks input[type="checkbox"] + label {
  display:inline-block;
  position:relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="checkbox"] + label::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  /* line-height:18px; */
  margin-top: -2px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
}
.checks input[type="checkbox"]:checked + label:before {
  background: #EE7800 url(../images/ico_checked.png) no-repeat center;
  border: 1px solid #EE7800;
}

/* input 박스 */
input, .selectBox {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  color: #333;
}
input::placeholder {
  color: #888;
}
input[type="text"] {
  width: 100%;
}

.date input[type="text"] {
  display: inline-block;
  width: 200px;
  padding-left: 42px;
  background: url(../images/ico_calendar.png) no-repeat left 12px center;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-title select {
  width: 65px !important;
  margin: 0 5px;
}

/* select박스 */
.selectBoxWrap {
  display: flex;
  justify-content: space-between;
  width: 800px;
}
.selectBox {
  position: relative;
  width: 260px;
  padding: 0;
  background: url(../images/select_open.png) no-repeat right 17px center;
  transition: .3s;
}
.selectBox.active {
  border-radius: 2px 2px 0 0;
  border-bottom: 1px solid #fff;
  background: url(../images/select_close.png) no-repeat right 17px center;
}
/* .selectBox .label {
  color: #333;
} */
.selectBox .label {
  display: flex;
  padding: 0 12px;
  align-items: center;
  width: inherit;
  height: inherit;
  color: #888;
  cursor: pointer;
}
.selectBox ul {
  display: none;
  position: absolute;
  width: 260px;
  top: 32px;
  left: -1px;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  z-index: 99;
}
.selectBox.active ul {
  display: block;
}
.selectBox ul li {
  padding: 8px 12px;
  line-height: 20px;
  cursor: pointer;
}
.selectBox ul li:hover {
  background: #F9F9F9;
}

/* 버튼 */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  box-sizing: border-box;
  text-align: center;
}
.small_btn {
  padding: 7px 20px;
  border: 1px solid #e0e0e0;
  line-height: 20px;
  color: #333;
}
.small_btn:hover {
  background: rgba(200,200,200,0.05);
}
.small_btn_b {
  padding: 7px 20px;
  border: 1px solid #EE7800;
  line-height: 20px;
  color: #EE7800;
  font-weight: 500;
}
.small_btn_b:hover {
  background: #FDF2E6;
}
.gray_btn {
  padding: 0 16px;
  background: #fafafa;
  border: 1px solid #ddd;
  line-height: 28px;
  color: #333;
}
.gray_btn:hover {
  background: rgba(253,253,253);
}

.color_btn {
  background: #EE7800;
  color: #fff;
  font-weight: 500;
}
.basic_btn {
  border: 1px solid #DDDDDD;
  color: #333;
}
.border_btn {
  border: 1px solid #EE7800;
  color: #EE7800;
  font-weight: 500;
}

/* 메인페이지 */
.filter_wrap {
  margin-bottom: 60px;
}
.filter_wrap .search_word {
  display: inline-block;
  margin-right: 6px;
  width: 880px;
}
.filter_wrap .search_btn {
  display: inline-block;
  width: 140px;
  padding: 6px 0;
  border: 1px solid #EE7800;
  color: #EE7800;
  font-weight: 500;
  line-height: 20px;
}

#main .qr_list .button_wrap {
  display: flex;
  margin-bottom: 20px;
}

#main .qr_list .button_wrap .left_area {
  display: flex;
}

#main .qr_list .button_wrap .left_area button:last-child {
  position: relative;
  margin-left: 32px;
}

#main .qr_list .button_wrap .left_area button:last-child::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  height: 100%;
  width: 1px;
  background: #e0e0e0;
}

#main .qr_list .button_wrap .left_area button:first-child {
  margin-right: 10px;
}

#main .qr_list .button_wrap .right_area {
  display: flex;
  margin-left: auto;
}
#main .qr_list .button_wrap .right_area button:last-child {
  margin-left: 10px;
}

#main .qr_list .reg_btn {
  padding: 8px 20px;
  background: #ee7800;
  color: #fff;
  font-weight: 500;
  line-height: 20px;
}
#main .qr_list .reg_btn:hover {
  background: #ff9e3c;
}
#main .qr_list table tbody tr:hover {
  background: #FFFAF5;
}
#main .qr_list table tbody tr td {
  padding: 0 10px;
  text-align: center;
}
#main .qr_list table tbody tr td a{
  max-height: 14px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  margin: 0 10px;
}

.dataTables_paginate,
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
.dataTables_paginate button,
.pagination button {
  margin: 0 5px;
}
.dataTables_paginate button img,
.pagination button img {
  vertical-align: middle;
  margin-top: 2px;
}
.dataTables_paginate .page_num,
.pagination .page_num {
  margin: 0 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page_num a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #888;
  background: none;
}
.dataTables_paginate .current a:hover,
.pagination .page_num a:hover {
  color: #333;
}
a.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.pagination .page_num a.current {
  color: #333;
  font-weight: 700;
}

/* 신규등록, 수정 페이지 */
.regqr .qr_title {
  width: 800px;
}
.file_edit_btn {
  display: flex;
}
.file_edit_btn button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 20px;
  padding-bottom: 2px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  background: #fff;
  color: #666;
  font-size: 18px;
}
.file_edit_btn button:first-child {
  margin-right: 8px;
}

#main table tr td.reg_file_wrap {
  padding: 0;
}

.reg_file_wrap .reg_title {
  display: flex;
  background: #F9F9F9;
  border-bottom: 1px solid #E0E0E0;
}
.reg_file_wrap .reg_title span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
}
.reg_file_wrap .reg_title span:first-child {
  flex-basis: 380px;
  border-right: 1px solid #E0E0E0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.reg_cont .filebox {
  display: flex;
  flex-basis: 1060px;
}
.reg_cont .filebox:not(:last-child) {
  border-bottom: 1px solid #E0E0E0;
}
.reg_cont .filebox > div {
  display: inline-flex;
  align-items: center;
  height: 48px;
  width: 100%;
}
.reg_cont .filebox > div:first-child {
  flex-basis: 380px;
  border-right: 1px solid #E0E0E0;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 20px;
}

.regqrMulti .reg_cont .filebox > div:first-child {
  padding: 0 10px;
}
.reg_cont .filebox > div:last-child {
  flex-basis: 680px;
  padding: 0 20px;
}

.reg_cont .filebox > div div {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.reg_cont .filebox > div .drag_btn {
  margin-right: 5px;
  cursor: pointer;
}

.reg_cont .filebox > div button {
  margin-left: auto;
}

input[type="file"] {
  display: none;
}
.input_file_btn {
  width: 90px;
  padding: 0;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
.regqrMulti .input_file_btn {
  margin-left: 25px;
}
.upload_complete .upload_desc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 90px;
  border-radius: 2px;
  background: #FFF5EB;
  color: #EE7800;
  font-weight: 500;
}
.file_name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 205px;
  max-height: 19px;
  margin-left: 10px;
  font-size: 13px;
  color: #888;
  line-height: 19px;
}

.delFilebox {
  display: none;
}

.regqr .button_wrap {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.regqr .button_wrap button {
  width: 120px;
  height: 42px;
  margin: 0 6px;
  font-size: 15px;
}

/* 분류값 지정 */
.category_wrap {
  display: flex;
}
.category_wrap > div {
  width: 380px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
}
.category_wrap > div:not(:first-child) {
  display: none;
  margin-left: 30px;
}
.category_wrap > div .title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.category_wrap > div .category_list {
  position: relative;
  overflow-y: hidden;
  height: 550px;
  padding: 20px;
}

.category_wrap > div .category_list ul {
  max-height: 402px;
  overflow-y: auto;
}

.custom_scroll::-webkit-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  border-radius: 15px;
}
.custom_scroll::-webkit-scrollbar-thumb {
  background-color: #888B9D;
}
.custom_scroll::-webkit-scrollbar-track {
  background-color: #DDDDDD;
}

.category_wrap > div ul li:not(:first-child) {
  margin-top: 10px;
}
.category_wrap > div ul li div {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 10px;
}
.category_wrap > div ul li.active div {
  background: #ee7800;
  border: 1px solid #ee7800;
}
.category_wrap > div ul li div span {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-top: 2px;
  background: url(../images/ico_drag.png) no-repeat center;
  text-indent: -9999px;
}
.category_wrap > div ul li.active span {
  background: url(../images/ico_drag_w.png) no-repeat center;
}
.category_wrap > div ul li div p {
  width: 260px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.category_wrap > div ul li.active p {
  color: #fff;
  font-weight: 700;
}
.category_wrap > div ul li div button {
  display: inline-block;
  content:"";
  width: 20px;
  height: 20px;
  margin-left: auto;
  background: url(../images/ico_x.png) no-repeat center;
  text-indent: -9999px;
}
.category_wrap > div ul li.active button {
  background: url(../images/ico_x_w.png) no-repeat center;
}
.category_wrap > div ul li input {
  width: 260px;
  padding: 0;
  font-size: 14px;
  color: #333;
  border: none;
  outline: none;
}

.category_wrap > div .add_cate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 40px;
  border: 1px dashed #ddd;
  text-align: center;
}
.category_wrap > div .add_cate:hover {
  border: 1px dashed #ccc;
  color: #EE7800;
}
.category_wrap > div .add_cate img {
  margin-right: 4px;
  margin-top: 1px;
}

.category_wrap > div .save_cate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 340px;
  height: 42px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
}
.category_wrap > div .save_cate:hover {
  background: #FDF2E6;
}

.itemBoxHighlight{
  height: 40px;
  width: 100%;
  border: 1px dashed #ee7800;
  background: #FFF5EB;
}

/* 업로드 프로그레스바 */
.darkLayer {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 999;
}
#spinner {
  display: block;
  width: 120px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}