css,js,image 변경

src/main/webapp/ux/css/admin.ui.css

@@ -1,4 +1,6 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); html,body {position:relative; height:100%;}
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");
+html,body {position:relative; height:100%;}
 html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
 body {overflow-x:hidden; font-family:"open sans", "Roboto", "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; background-color:#f3f3f4;}
 h1, h2, h3, h4, h5, h6 {display:inline-block;}
@@ -16,7 +18,7 @@ input.btn-sm {padding:1px 6px;}
 input[type=text] {width:100%;}
 input[type=text], input[type=file], input[type=date], [type=password], textarea {padding:4px 3px 4px 5px; color:inherit; border-radius:1px; vertical-align:middle; margin:1px 3px 2px 0;}
 input[type=date],input[type=time],input[type=datetime-local],input[type=month] {-webkit-appearance:listbox;}
-input[readonly="readonly"], input[disabled="disabled"], input[readonly="readonly"]:before, input[disabled="disabled"]:before, select[readonly="readonly"], select[disabled="disabled"],textarea[readonly="readonly"] ,textarea[disabled="disabled"] {background-color:#eee !important;}
+input[readonly="readonly"], input[disabled="disabled"], select[readonly="readonly"], select[disabled="disabled"],textarea[readonly="readonly"] ,textarea[disabled="disabled"] {background-color:#eee !important;}
 button, select {text-transform:none;}
 button,[type=button],[type=reset],[type=submit] {margin:0; -webkit-appearance:button; border-radius:0; cursor:pointer; background-color:transparent; border-color:transparent;}
 button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding:0; border-style:none;}
@@ -80,11 +82,11 @@ html,body,#wrapper,#container {min-height:100%; height:100%;}
 
 /* 로그인 :alert */
 .alertBox {position:relative; padding:10px 40px 10px 10px; margin-bottom:10px; border:1px solid; border-radius:.25rem; line-height:22px;}
-.alertBox .alertClose {position:absolute; top:0; right:5px; padding:0 10px; height:40px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
-.alertBox .alertClose:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.alertBox .alertClose {position:absolute; top:0; right:5px; width:30px; height:40px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%;}
+.alertBox .alertClose:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
 .alert-success {color:#155724; background-color:#d4edda; border-color:#c3e6cb;}
 .alert-info {color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb;}
-.alert-warning {color:#856404; background-color:#fff3cd; border-color:#ffeeba;}
+.alert-warning {color:#856404; background-color:#fff3cd; border-color:#f8e7b4;}
 .alert-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}
 
 /* header--------------- */
@@ -118,12 +120,13 @@ header a, header button {color:#fff;}
 #lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s; background-color:#2f4050;}
 #lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%;}
 #lnb-wrapper.on {left:0;}
-#lnb {margin-bottom:100px; width:260px;}
+#lnb {margin-bottom:100px;}
 #lnb a {display:block; color:#a7b1c2;}
+#lnb a::selection {background:none;}
 #lnb a:hover {color:#fff;}
 #lnb a.on {color:#fff;}
-#lnb .dep2 {padding:14px 20px 14px 35px; background:url('../../image/icon_dep2.png') 10px 50% no-repeat, url('../../image/icon_depArr2.png') 222px 50% no-repeat; background-color:#233646; cursor:pointer;}
-#lnb .dep2.on {display:block; background:url('../../image/icon_dep2On.png') 10px 50% no-repeat, url('../../image/icon_depArr2On.png') 222px 50% no-repeat; background-color:#233646;}
+#lnb .dep2 {padding:14px 20px 14px 35px; background:url('/image/icon_dep2.png') 10px 50% no-repeat, url('/image/icon_depArr2.png') right 15px top 50% no-repeat; background-color:#233646; cursor:pointer;}
+#lnb .dep2.on {display:block; background:url('/image/icon_dep2On.png') 10px 50% no-repeat, url('/image/icon_depArr2On.png') right 15px top 50% no-repeat; background-color:#233646;}
 #lnb .dep3 {padding:5px 0 10px 10px; border-left:4px solid #8597eb; cursor:pointer;}
 #lnb .dep3 a {padding:10px; cursor:pointer;}
 #lnb .dep4 {padding:5px 0 10px 20px; cursor:pointer;}
@@ -153,7 +156,7 @@ header a, header button {color:#fff;}
 .panelStyle h2 {margin-right:10px; font-size:14px; font-weight:bold;}
 .panelStyle h3 {margin-right:10px; font-size:12px; font-weight:normal; line-height:25px;}
 .panelStyle h3 i {padding-right:5px}
-.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('../../image/icon_h4.png') no-repeat 3px 50%; color:#666;}
+.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('/image/icon_h4.png') no-repeat 3px 50%; color:#666;}
 .panelStyle .panelBar {display:table; width:100%; padding-bottom:10px;}
 .panelStyle .panelBar h4 {margin-bottom:0;}
 .panelStyle .panelBar > li {display:table-cell;}
@@ -198,7 +201,7 @@ header a, header button {color:#fff;}
 .tabsNav .ui-tabs-active a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
 .tab-del {position:absolute; top:1px; right:1px; padding:4px 6px; color:gray; cursor:pointer; border-top-right-radius:.25rem;}
 .tab-del:hover {color:#f40552;}
-a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !important;}
+a, button, .ui-state-active, .ui-state-focus, .ui-state-hover, input[type=range] {outline:0 !important;}
 .tabsNav .ui-corner-top a {padding:0 35px 0 20px}
 
 /* tabsJr 영역 --------------- */
@@ -215,7 +218,7 @@ a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !import
 .tabJr.on {display:block;}
 .tabJrContArea {vertical-align:middle;}
 
-/* modal, modeless popup --------------- */
+/* MODAL, MODELESS POPUP --------------- */
 .modalPopup{display:none; position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
 .modalPopup > .panelStyle{position:absolute; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
 .modalPopup > .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
@@ -238,12 +241,10 @@ a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !import
 .videoPopup .close {position:absolute; top:-20px; right:-20px; z-index:1; width:40px; height:40px; line-height:20px; font-size:20px; border:1px solid #666; border-radius:50px; background-color:#fff;}
 .videoPopup iframe{width:100%; height:100%}
 
-
 #btnTop {display:none; position:fixed; right:0; bottom:50px; width:40px; line-height:10px; font-size:10px; background:#fff; border:1px solid #ddd; border-right:none; padding:3px 0 5px 0; box-shadow:5px 5px 5px -4px rgba(0, 0, 0, 0.07); color:#1c84c6;}
 #btnTop i {width:100%; font-size:12px;}
 #btnTop:hover {padding-right:30px; width:70px; font-weight:bold;}
 
-
 /* 컨텐트 스크롤--------------- */
 .xScroll {overflow-x:auto;}
 .yScroll {overflow-y:auto;}
@@ -256,22 +257,21 @@ a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !import
 .frmStyle th {padding:0 15px; height:36px; line-height:24px; white-space:nowrap; text-align:center; background:#e9ecfb;}
 .frmStyle td {padding:0 10px 0 10px; line-height:36px; position:relative; border-top:1px solid #eee; border-right:1px solid #eee;}
 
-/* 체크박스&라디오박스 공통--------------- */
-input[type=radio] {position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
+/* 체크박스 & 라디오버튼 : 공통--------------- */
 label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
-/* 체크박스 :전체선택 버튼--------------- */
-input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0;}
-input[type=button].chkBox {margin-left:-2px; padding-left:24px; height:22px; vertical-align:middle; background:url('../../image/icon_checkN.png') no-repeat 0 50%;}
-
-/* 체크박스--------------- */
-label.chkBox::before {position:absolute; top:2px; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; background:#fff;}
-label.chkBox.checked::after {position:absolute; top:6px; left:3px; content:''; width:8px; height:4px; border-bottom:3px solid #676a6c; border-left:3px solid #676a6c; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
-label.chkBox .formControl::before {background:#eee;}
-
-/* 라디오버튼--------------- */
-input[type=radio]::before {position:absolute; top:0; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; border-radius:50%; background:#fff;}
-input[type=radio]:checked::after {position:absolute; top:5px; left:5px; content:''; width:8px; height:8px; border-radius:50%; background:#676a6c;}
-input[type=radio].formControl::before {background:#eee;}
+label.chkBox input, label.rdoBtn input{position:absolute; top:2px; left:0; width:0; height:0; border:none;}
+/* 체크박스 */
+label.chkBox::after {content:''; position:absolute;top:0; left:0;width:22px; height:22px;}
+label.chkBox input::after{content:''; position:absolute; top:0; left:0; width:18px; height:18px;background:url('/image/icon_checkN.png') no-repeat 0 0;}
+label.chkBox input:checked::after{background:url('/image/icon_checkY.png') no-repeat 0 0;}
+label.chkBox input[disabled='disabled']::after, label.chkBox input[readonly='readonly']::after{background:url('/image/icon_checkND.png') no-repeat 0 0;}
+label.chkBox input[disabled='disabled']:checked::after, label.chkBox input[readonly='readonly']:checked::after{background:url('/image/icon_checkYD.png') no-repeat 0 0;}
+/* 라디오버튼 */
+label.rdoBtn::after {content:''; position:absolute;top:0; left:0;width:22px; height:22px;}
+label.rdoBtn input::after{content:''; position:absolute; top:0; left:0; width:18px; height:18px;background:url('/image/icon_radioN.png') no-repeat 0 0;}
+label.rdoBtn input:checked::after{background:url('/image/icon_radioY.png') no-repeat 0 0;}
+label.rdoBtn input[disabled='disabled']::after, label.rdoBtn input[readonly='readonly']::after{background:url('/image/icon_radioND.png') no-repeat 0 0;}
+label.rdoBtn input[disabled='disabled']:checked::after, label.rdoBtn input[readonly='readonly']:checked::after{background:url('/image/icon_radioYD.png') no-repeat 0 0;}
 
 /* 토글 스위치--------------- */
 .switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
@@ -384,8 +384,8 @@ td[rowspan] {border-bottom:1px solid #eee;}
 .mSelected li {float:left; margin:2px 5px 3px; line-height:24px; padding:0 7px; background:#dbedf9; -ms-user-select:none; -moz-user-select:-moz-none; -webkit-user-select:none; user-select:none;}
 .mSelected li.srchFld {margin:0; padding:0; background:none;}
 .mSelected .srchFld input {width:25px; margin:0; padding:0; border:none; outline:none;}
-.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 100% 50%;}
-.mSelected a:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 100% 50%;}
+.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 100% 50%;}
+.mSelected a:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 100% 50%;}
 .mSelecting {display:none; overflow-y:auto; overflow-x:hidden; position:absolute; top:100%; left:-1px; z-index:1; width:100%; max-height:156px; line-height:30px; border:1px solid #e5e6e7; background:#fff;}
 .mSelecting li {margin:0 10px; cursor:pointer;}
 
@@ -401,7 +401,7 @@ td[rowspan] {border-bottom:1px solid #eee;}
 .lrStyle .uFile {margin-top:2px;}
 .uFileInput {position:absolute; top:0; width:100%; margin:0 !important; padding:0 !important; line-height:28px; border:none !important;}
 .uFileLabel {position:absolute; top:0; right:0; left:0; z-index:1; margin:0; padding:0 7px; width:cals(100% - 7px); line-height:28px; height:28px; background-color:#fff; border-radius:1px; overflow:hidden; white-space:nowrap;}
-.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('../../image/icon_upload.png') no-repeat 50% 50%;}
+.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('/image/icon_upload.png') no-repeat 50% 50%;}
 
 /* badge --------------- */
 .badge {float:right; margin-top:2px; padding:0 5px; min-width:9px; line-height:18px; color:#fff; font-size:12px; font-weight:600; border-radius:3px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.5px;}
@@ -411,7 +411,7 @@ td[rowspan] {border-bottom:1px solid #eee;}
 .badge-success {background-color:#2fa4e7;}
 .badge-info {background-color:#23c6c8;}
 .badge.circle {border-radius:50px;}
-.dep3 .badge {position:relative; top:-28px; right:20px;}
+.dep3 .badge {position:relative; top:-28px; right:15px;}
 
 /* badge-등급 ------------*/
 .badgeLevel{overflow:hidden;display:inline-block;margin:5px 0 0;padding:0;width:50px;height:50px;line-height:46px;font-size:30px;font-weight:bold;border-radius:100%;text-align:center;vertical-align:top;box-sizing:border-box;}
@@ -422,7 +422,7 @@ td[rowspan] {border-bottom:1px solid #eee;}
 .badgeLevel.black{background-color:#333;border:1px solid #333;color:#fff;}
 
 /* tag */
-.tagNum {display:inline-block; margin-left:5px; padding:0 3px 0 2px; min-width:13px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
+.tagNum {display:inline-block; margin-left:5px; padding:0 3px; min-width:16px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
 
 /* footer --------------- */
 footer {position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#fff; border-top:1px solid #e7eaec; line-height:39px; font-size:13px;}
@@ -445,8 +445,8 @@ footer .f-right {float:right; padding-right:20px; line-height:38px;}
 .imgCard img {margin-right:15px;}
 .imgCard li:nth-of-type(2) {padding-top:20px; max-width:150px; line-height:24px}
 .imgCard p {font-size:12px;}
-.imgCard .cardClose {position:absolute; top:0; right:0; width:24px; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
-.imgCard .cardClose:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.imgCard .cardClose {position:absolute; top:0; right:0; width:24px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
+.imgCard .cardClose:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
 .verticalTop {vertical-align:top;}
 
 /* 조회용 이미지 카드 */
@@ -454,14 +454,14 @@ footer .f-right {float:right; padding-right:20px; line-height:38px;}
 .cardArea2 ul, .cardArea2 .box {vertical-align:top; position:relative; display:inline-block; margin:10px; border:1px solid #dbdbdb; max-width:300px;}
 .cardArea2 li {display:table-cell; line-height:26px; vertical-align:middle;}
 .cardArea2 li:nth-of-type(2) {padding:0 10px;}
-.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
-.cardArea2 .cardDel:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
+.cardArea2 .cardDel:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
 
 /* 테이블 외부 안내문구 */
 .panelStyle > .notice {margin:0 0 15px ;}
 .panelContent > .notice {margin:15px 0;}
 .notice em {color:red;}
-.notice li, p.dot {padding-left:20px; background:url('../../image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
+.notice li, p.dot {padding-left:20px; background:url('/image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
 p.dot .btn {margin-left:10px !important;}
 p.dot em {color:red;}
 
@@ -485,14 +485,14 @@ p.dot em {color:red;}
 
 /* 유의사항 안내 */
 .infoBox {margin:0 20px 20px; padding:7px 10px; border-top:2px solid #dfe2e3; border-bottom:2px solid #dfe2e3; background:#fff}
-.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('../../image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
+.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('/image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
 
 /* 검색결과 안내문 */
 .srchNotice {padding-bottom:7px; font-weight:normal; font-size:14px;}
 .srchNotice em {color:red;}
 
 /* 필수입력항목 */
-.required {display:inline-block; position:relative; top:-3px; width:12px; height:7px; background:url('../../image/icon_required.png') no-repeat 0 50%;}
+.required {display:inline-block; position:relative; top:0; width:12px; height:7px; background:url('/image/icon_required.png') no-repeat 0 50%;}
 
 
 /* COLOR DESIGN -------------------------------------*/
@@ -648,8 +648,8 @@ hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
 /*-- 회원추가 --------------*/
 .memAddWrap {line-height:26px; padding:3px 0;}
 .memAdd {margin-right:15px; padding:2px 27px 2px 0; position:relative; line-height:24px; height:24px; white-space:nowrap;}
-.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
-.memAdd button:hover {background:#eee url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('/image/btn_sltClose.png') no-repeat 50% 50%;}
+.memAdd button:hover {background:#eee url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
 
 /*-- Date Picker --------------*/ /* 20200521 수정 */
 table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
@@ -659,8 +659,8 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 .ui-datepicker .ui-datepicker-today,
 .ui-datepicker .ui-state-highlight {background:#fff7cf !important;}
 .ui-datepicker .ui-state-active {border:1px solid red !important;}
-.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_prev.png') no-repeat 50% 50%;}
-.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_next.png') no-repeat 50% 50%;}
+.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_prev.png') no-repeat 50% 50%;}
+.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_next.png') no-repeat 50% 50%;}
 .ui-datepicker .ui-datepicker-calendar {padding:5px; border:1px solid #ddd; border-top:none; text-align:center;}
 .ui-datepicker .ui-datepicker-calendar th{padding:5px 0}
 .ui-datepicker-week-end {text-align:center;}
@@ -816,12 +816,12 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 /* 카테고리 Sort */
 .categoryOrder {margin-bottom:15px; background:#fcfcfc;}
 .categoryOrder li {clear:both; padding-left:15px; line-height:40px; cursor:move; border-top:1px dashed red; }
-.categoryOrder li button.on {background-image:url(../../image/icon_cate_minus.png);}
-/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(../../image/line_cate.png)} */
+.categoryOrder li button.on {background-image:url(/image/icon_cate_minus.png);}
+/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(/image/line_cate.png)} */
 .categoryOrder li:before{position:relative; content:''; width:1px; height:100%; background:#ddd;}
 .categoryOrder li ol{display:none}
 /* .categoryOrder ol:last-child li {background-image:none !important} */
-.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(../../image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
+.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(/image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
 
 /* 메인 공지팝업 */
 .noticeWrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:800px;background-color:#fff;}

src/main/webapp/ux/css/dropzone.css

@@ -0,0 +1,397 @@
+/*
+ * The MIT License
+ * Copyright (c) 2012 Matias Meno <m@tias.me>
+ */
+@-webkit-keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30%, 70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+@-moz-keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30%, 70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+@keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30%, 70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+@-webkit-keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); } }
+@-moz-keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); } }
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px); }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px); } }
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); } }
+@-moz-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); } }
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); } }
+.dropzone, .dropzone * {
+  box-sizing: border-box; }
+
+.dropzoneWrap{margin:7px 0} /*추가*/
+.dropzone {
+  min-height: 150px;
+  border: 1px dashed #bbbbbb;
+  background: white;
+  /*padding: 10px;*/ }
+  .dropzone.dz-clickable {
+    cursor: pointer; }
+    .dropzone.dz-clickable * {
+      cursor: default; }
+    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
+      cursor: pointer; }
+  .dropzone.dz-started .dz-message {
+    display: none; }
+  .dropzone.dz-drag-hover {
+    border-style: solid; }
+    .dropzone.dz-drag-hover .dz-message {
+      opacity: 0.5; }
+  .dropzone .dz-message {
+    text-align: center;
+    line-height:150px;}
+    .dropzone .dz-message .dz-button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit; }
+  .dropzone .dz-preview {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    margin: 16px;
+    min-height: 100px; }
+    .dropzone .dz-preview:hover {
+      z-index: 1000; }
+      .dropzone .dz-preview:hover .dz-details {
+        opacity: 1; }
+    .dropzone .dz-preview.dz-file-preview .dz-image {
+      border-radius: 20px;
+      background: #999;
+      background: linear-gradient(to bottom, #eee, #ddd); }
+    .dropzone .dz-preview.dz-file-preview .dz-details {
+      opacity: 1; }
+    .dropzone .dz-preview.dz-image-preview {
+      background: white; }
+      .dropzone .dz-preview.dz-image-preview .dz-details {
+        -webkit-transition: opacity 0.2s linear;
+        -moz-transition: opacity 0.2s linear;
+        -ms-transition: opacity 0.2s linear;
+        -o-transition: opacity 0.2s linear;
+        transition: opacity 0.2s linear; }
+    .dropzone .dz-preview .dz-remove {
+      font-size: 14px;
+      text-align: center;
+      display: block;
+      cursor: pointer;
+      border: none; }
+      .dropzone .dz-preview .dz-remove:hover {
+        text-decoration: underline; }
+    .dropzone .dz-preview:hover .dz-details {
+      opacity: 1; }
+    .dropzone .dz-preview .dz-details {
+      z-index: 20;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      font-size: 13px;
+      min-width: 100%;
+      max-width: 100%;
+      padding: 2em 1em;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.9);
+      line-height: 150%; }
+      .dropzone .dz-preview .dz-details .dz-size {
+        margin-bottom: 1em;
+        font-size: 16px; }
+      .dropzone .dz-preview .dz-details .dz-filename {
+        white-space: nowrap; }
+        .dropzone .dz-preview .dz-details .dz-filename:hover span {
+          border: 1px solid rgba(200, 200, 200, 0.8);
+          background-color: rgba(255, 255, 255, 0.8); }
+        .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+          overflow: hidden;
+          text-overflow: ellipsis; }
+          .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+            border: 1px solid transparent; }
+      .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
+        background-color: rgba(255, 255, 255, 0.4);
+        padding: 0 0.4em;
+        border-radius: 3px; }
+    .dropzone .dz-preview:hover .dz-image img {
+      -webkit-transform: scale(1.05, 1.05);
+      -moz-transform: scale(1.05, 1.05);
+      -ms-transform: scale(1.05, 1.05);
+      -o-transform: scale(1.05, 1.05);
+      transform: scale(1.05, 1.05);
+      -webkit-filter: blur(8px);
+      filter: blur(8px); }
+    .dropzone .dz-preview .dz-image {
+      border-radius: 20px;
+      overflow: hidden;
+      width: 120px;
+      height: 120px;
+      position: relative;
+      display: block;
+      z-index: 10; }
+      .dropzone .dz-preview .dz-image img {
+        display: block; }
+    .dropzone .dz-preview.dz-success .dz-success-mark {
+      -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
+    .dropzone .dz-preview.dz-error .dz-error-mark {
+      opacity: 1;
+      -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+      -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
+    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
+      pointer-events: none;
+      opacity: 0;
+      z-index: 500;
+      position: absolute;
+      display: block;
+      top: 50%;
+      left: 50%;
+      margin-left: -27px;
+      margin-top: -27px; }
+      .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
+        display: block;
+        width: 54px;
+        height: 54px; }
+    .dropzone .dz-preview.dz-processing .dz-progress {
+      opacity: 1;
+      -webkit-transition: all 0.2s linear;
+      -moz-transition: all 0.2s linear;
+      -ms-transition: all 0.2s linear;
+      -o-transition: all 0.2s linear;
+      transition: all 0.2s linear; }
+    .dropzone .dz-preview.dz-complete .dz-progress {
+      opacity: 0;
+      -webkit-transition: opacity 0.4s ease-in;
+      -moz-transition: opacity 0.4s ease-in;
+      -ms-transition: opacity 0.4s ease-in;
+      -o-transition: opacity 0.4s ease-in;
+      transition: opacity 0.4s ease-in; }
+    .dropzone .dz-preview:not(.dz-processing) .dz-progress {
+      -webkit-animation: pulse 6s ease infinite;
+      -moz-animation: pulse 6s ease infinite;
+      -ms-animation: pulse 6s ease infinite;
+      -o-animation: pulse 6s ease infinite;
+      animation: pulse 6s ease infinite; }
+    .dropzone .dz-preview .dz-progress {
+      opacity: 1;
+      z-index: 1000;
+      pointer-events: none;
+      position: absolute;
+      height: 16px;
+      left: 50%;
+      top: 50%;
+      margin-top: -8px;
+      width: 80px;
+      margin-left: -40px;
+      background: rgba(255, 255, 255, 0.9);
+      -webkit-transform: scale(1);
+      border-radius: 8px;
+      overflow: hidden; }
+      .dropzone .dz-preview .dz-progress .dz-upload {
+        background: #333;
+        background: linear-gradient(to bottom, #666, #444);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 0;
+        -webkit-transition: width 300ms ease-in-out;
+        -moz-transition: width 300ms ease-in-out;
+        -ms-transition: width 300ms ease-in-out;
+        -o-transition: width 300ms ease-in-out;
+        transition: width 300ms ease-in-out; }
+    .dropzone .dz-preview.dz-error .dz-error-message {
+      display: block; }
+    .dropzone .dz-preview.dz-error:hover .dz-error-message {
+      opacity: 1;
+      pointer-events: auto; }
+    .dropzone .dz-preview .dz-error-message {
+      pointer-events: none;
+      z-index: 1000;
+      position: absolute;
+      display: block;
+      display: none;
+      opacity: 0;
+      -webkit-transition: opacity 0.3s ease;
+      -moz-transition: opacity 0.3s ease;
+      -ms-transition: opacity 0.3s ease;
+      -o-transition: opacity 0.3s ease;
+      transition: opacity 0.3s ease;
+      border-radius: 8px;
+      font-size: 13px;
+      top: 130px;
+      left: -10px;
+      width: 140px;
+      background: #be2626;
+      background: linear-gradient(to bottom, #be2626, #a92222);
+      padding: 0.5em 1.2em;
+      color: white; }
+      .dropzone .dz-preview .dz-error-message:after {
+        content: '';
+        position: absolute;
+        top: -6px;
+        left: 64px;
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid #be2626; }

src/main/webapp/ux/js/admin.ui.js

@@ -174,60 +174,55 @@ $(document).ready(function(){
 	});
 
 	$(document).on("click", ".chkBox", function(e){
-		let cntId = $(this).parent().parent("ul").attr("data-count-id");
-		let cntLen;
-
-		if ( $(this).find("input").is('[id]') ){ // ---------------전체선택ID
-			let $id = $(this).find("input").attr("id");
-			if ( $(this).hasClass("checked") ) { //체크된 경우
-				$("input[id="+$id+"]").parent("label").removeClass("checked");
-				$("input[id="+$id+"]").prop("checked", false);
-				$("input[name="+$id+"]").parent("label").removeClass("checked");
-				$("input[name="+$id+"]").prop("checked", false);
-			} else {
-				$("input[id="+$id+"]").parent("label").addClass("checked");
-				$("input[id="+$id+"]").prop("checked", true);
-				$("input[name="+$id+"]").parent("label").addClass("checked");
-				$("input[name="+$id+"]").prop("checked", true);
-			};
-			//선택된 개수 출력 (checkBoxList)
-			if (cntId != undefined ) {
-				cntLen =  $("input[name="+$id+"]:checked").length; //체크된 개수
-				$("#"+cntId).text(cntLen);
-			};
-			return false;
+		if (  !$(this).children("input").is("[disabled]")  && !$(this).children("input").is("[readonly]") ) {
 
-		} else {	// ---------------개별선택
-			let $name = $(this).find("input").attr("name");
-			let totLen = $("input[name="+$name+"]").length; //전체 개수
-			if ( $(this).hasClass("checked")) {
-				$(this).removeClass("checked");
-				$(this).find("input").prop("checked", false);
-				$("input[id="+$name+"]").prop("checked", false);
-				$("input[id="+$name+"]").parent("label").removeClass("checked");
-			} else {
-				$(this).addClass("checked");
-				$(this).find("input").prop("checked", true);
-				cntLen =  $("input[name="+$name+"]:checked").length; //체크된 개수
-				if (totLen == cntLen ){
-					$("input[id="+$name+"]").prop("checked", true);
-					$("input[id="+$name+"]").parent("label").addClass("checked");
-				}
-			};
-			//선택된 개수 출력 (checkBoxList)
-			if (cntId != undefined ) {
-				cntLen =  $("input[name="+$name+"]:checked").length; //체크된 개수
-				if (totLen > cntLen ) {
+			let cntId = $(this).parent().parent("ul").attr("data-count-id");
+			let cntLen;
+
+			if ( $(this).children("input").is('[id]') ){ // ---------------전체선택ID
+				let $id = $(this).children("input").attr("id");
+				if ( $(this).children("input").is(":checked") ) { //체크된 경우
+					$("input[id="+$id+"]").prop("checked", false);
+					$("input[name="+$id+"]").prop("checked", false);
+				} else {
+					$("input[id="+$id+"]").prop("checked", true);
+					$("input[name="+$id+"]").prop("checked", true);
+				};
+				//선택된 개수 출력 (checkBoxList)
+				if (cntId != undefined ) {
+					cntLen =  $("input[name="+$id+"]:checked").length; //체크된 개수
 					$("#"+cntId).text(cntLen);
-				} else if  (totLen == cntLen ) {
-					$("#"+cntId).text(totLen);
 				};
+				return false;
+
+			} else {	// ---------------개별선택
+				let $name = $(this).find("input").attr("name");
+				let totLen = $("input[name="+$name+"]").length; //전체 개수
+				if ( $(this).children("input").is(":checked") ) {
+					$(this).find("input").prop("checked", false);
+					$("input[id="+$name+"]").prop("checked", false); //전체선택 체크 해제
+				} else {
+					//$(this).addClass("checked");
+					$(this).find("input").prop("checked", true);
+					cntLen =  $("input[name="+$name+"]:checked").length; //체크된 개수
+					if (totLen == cntLen ){
+						$("input[id="+$name+"]").prop("checked", true); //전체선택 체크
+					}
+				};
+				//선택된 개수 출력 (checkBoxList)
+				if (cntId != undefined ) {
+					cntLen =  $("input[name="+$name+"]:checked").length; //체크된 개수
+					if (totLen > cntLen ) {
+						$("#"+cntId).text(cntLen);
+					} else if  (totLen == cntLen ) {
+						$("#"+cntId).text(totLen);
+					};
+				};
+				return false;
 			};
-			return false;
-		};
+		}
 	});
 
-
 	/* CheckBox List : More(+) 버튼 */
 	$(document).on("click", ".checkBoxList .more", function(){
 		var thisI = $(this).find("i");