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

@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;}
ul, ol {list-style:none;}
ul::after, ol::after {display:block; clear:both; content:'';}
img {vertical-align:middle; border-style:none;}
a {text-decoration:none;}
em, i {font-style:normal;}
table {border-collapse:collapse;}
th {text-align:inherit;}
label {position:relative; margin-right:20px; display:inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
label:last-child {margin-right:0 !important;}
input,button,select,textarea {font-family:inherit; font-size:inherit;}
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"] {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;}
textarea {overflow:auto; resize:vertical; width:100%; margin:4px 0; vertical-align:middle; line-height:22px; height:32px;}
.textareaR2 {min-height:60px; line-height:26px;}
.textareaR3 {min-height:96px; line-height:26px;}
.textareaR4 {min-height:134px; line-height:26px;}
.byteChk {line-height:20px; padding-left:20px; display:inline-block; vertical-align:middle;}
select {margin:0 3px 1px 0; padding:3px 10px 3px 3px; color:inherit; border-radius:1px; vertical-align:middle;}
select, input[type=text], input[type=file], input[type=date], input[type=password], textarea {border:1px solid #dbdbdb;}
select:focus, input:focus, textarea:focus, button:focus, .outline {outline:2px auto #4D90FE;}
.formControl {background:#eee;}
.off {display:none !important;}
.scrollOff {overflow:hidden;}
.f25 {font-size:25px;}

html,body,#wrapper,#container {min-height:100%; height:100%;}
#wrapper {position:relative; min-width:1240px;}

/* 로그인 --------------- */
.loginBg {background:#f3f3f4;}
.loginWrap {width:500px; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);}
.loginWrap .loginBox input[type=text],
.loginWrap .loginBox input[type=password]{padding:10px; width:100%; border:1px solid #ced4da; border-radius:.25rem;}
.loginWrap .loginBox li:nth-of-type(2), .loginBox li:nth-of-type(3) {padding-bottom:10px;}
.loginWrap .loginBox li:nth-of-type(4) {padding:10px 0 50px 0; line-height:30px; text-align:left;}
.loginWrap .loginBox li:nth-of-type(5) {margin-bottom:30px; text-align:center;}
.loginWrap .loginBox a {display:inline-block; padding:10px;}
.loginWrap .loginBox .dot {color:#ccc;}
.loginWrap .btn-black {background-color:#555; color:#fff; font-weight:bold; float:right; margin:0 !important;}
.loginWrap .btn-black:hover{background-color:#000; box-shadow:none;}
.loginWrap .btn-purple {background-color:#667eea; color:#fff; font-weight:bold; float:right; margin:0 !important;}
.loginWrap .btn-purple:hover{background-color:#2e38cb; box-shadow:none;}
.loginWrap .loginInfo {color:#888; line-height:23px; text-align:left;}
.loginWrap .loginInfo em i {margin-right:7px;}
.loginWrap .loginInfo p:first-child{margin-bottom:15px;}
.loginWrap .loginInfo p span {display:inline-block; margin-bottom:15px; line-height:40px; font-size:16px; font-weight:bold; border-bottom:1px solid #000;}

/* 로그인 style :black */
.login_black {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); background:#fff;}
.login_black .logo { padding:25px 0; text-align:center; background:#000;}
.login_black .loginInfo em {color:#555; font-weight:bold;}
.login_black .loginCont > ul {padding:60px 60px 70px;}
.login_black .loginBox li:nth-of-type(5) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.login_black .loginBox a {color:#555}

/* 보안 인증 */
.loginWrap .certiFrm {padding:40px 60px 70px;}
.loginWrap .certiFrm h2{margin:10px 0 30px;}
.loginWrap .certiFrm h2 i{margin-right:10px;}
.loginWrap .certiFrm .alertBox{margin-bottom:15px}
.loginWrap .certiFrm .input{height:45px; position:relative;}
.loginWrap .certiFrm .input input[type=text]{position:relative; padding:10px; width:45px; height:45px; line-height:45px; font-size:16px; border:1px solid #ced4da; border-radius:.25rem; text-align:center;}
.loginWrap .certiFrm .input input[type=text]:focus{color:#4D90FE;font-weight:bold;}
.loginWrap .certiFrm .input .countdown{display:inline-block; position:relative; padding-left:20px; line-height:45px; height:45px;color:red; text-align:center;vertical-align:top; font-size:14px}
.loginWrap .certiFrm .info{margin-top:20px; line-height:22px; color:#555;}
.loginWrap .certiFrm .button{margin:25px 0 50px;}
.loginWrap .certiFrm .button button{margin:0 5px !important; padding:5px 20px; height:32px; float:right}
.loginWrap .certiFrm .button button:focus{outline:2px auto #4D90FE !important; }
.loginWrap .certiFrm .button .btn-black{width:100px !important;}

/* 로그인 :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%;}
.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-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}

/* header--------------- */
header {position:fixed; top:0; left:0; right:0; z-index:10; min-width:1240px; width:100%; height:60px; line-height:60px; color:#fff; background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
header a, header button {color:#fff;}
.header-logo {float:left; width:260px; line-height:60px; background:rgba(250, 251, 252, 0.1); overflow:hidden;}
.header-logo a {display:inline-block; margin:0 10px 0 20px; width:184px; height:60px;}
.header-logo .lnbClose {width:30px; line-height:30px; display:inline-block !important;}
.header-logo .lnbClose:hover {color:rgba(255, 255, 255, 0.8);}
.header-menu {position:absolute; left:260px; padding:0 0 0 30px; font-weight:bold;}
.header-menu .menu {display:inline-block; -ms-user-select:none; -webkit-user-select:none; user-select:none;}
.header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
.header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
.header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
.header-info {display:inline-block; float:right; margin-right:20px;}
.header-info a {color:rgba(255, 255, 255, 0.8);}
.header-info a:hover {color:#fff;}
.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
.header-info-sm {display:none; float:right; margin-right:20px;}
.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
.header-info-sm a:hover {color:#fff;}

/* GNB:툴팁--------------- */
.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
.tooltip .tooltiptext.logout::after {right:10px;}
.tooltip:hover .tooltiptext {visibility:visible;}

/* LNB--------------- */
#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 a {display:block; color:#a7b1c2;}
#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 .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;}
#lnb .dep4 a {padding:10px; cursor:pointer;}

/* main--------------- */
#main-wrapper {position:relative; left:0; top:0; margin-left:0; min-height:100%; padding-bottom:60px; vertical-align:top; color:#222; transition:margin-left .3s; -webkit-transition:margin-left .3s;}
#main-wrapper.on {margin-left:260px;}
#main {padding-top:60px; position:relative;}
#main .main-title {height:60px; margin-left:20px; margin-right:20px;}
#main .main-title h1 {padding-top:15px; font-size:20px; color:#333; font-weight:700;}
#main .main-title ol {margin-top:25px; float:right; color:#666;}
#main .main-title li {float:left;}
#main .main-title li::before {padding:0 5px; content:"/"; color:#999;}
#main .main-title li:nth-of-type(1)::before {content:none !important;}
#main .main-title i {padding-right:3px; color:#999;}
#main .sub-title {margin:0 20px 10px; font-size:14px; color:#6c7dda; font-weight:bold;}
#main .sub-title i {margin-right:10px;}

/* 패널영역 스타일--------------- */
.panelStyle {position:relative; margin:0 20px 30px 20px; padding:15px 15px 0; background-color:#fff; border-top:2px solid #dfe2e3; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.04);}
.panelStyle::after, .frmStyle::after{position:relative; bottom:-5px; content:''; display:block; border:1px solid rgba(255,255,255,0);}
.panelStyle .panelTitle {margin:-15px -15px 0; padding:0 20px; line-height:40px; border-bottom:1px solid #e7eaec;}
.panelStyle .panelControl {position:absolute; top:0; right:15px; color:#c4c4c4;}
.panelStyle .panelControl i {padding:10px 10px; cursor:pointer;}
.panelStyle .panelContent {margin-top:10px;}
.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 .panelBar {display:table; width:100%; padding-bottom:10px;}
.panelStyle .panelBar h4 {margin-bottom:0;}
.panelStyle .panelBar > li {display:table-cell;}
.panelStyle .panelBar > .center {text-align:center;}
.panelStyle .panelBar > .right {text-align:right;}

/* 패널 내부 테이블 여러개 배치 */
.panelStyle .division + .panelBar {padding-bottom:15px;}
.panelStyle .division {display:table; width:100%;}
.panelStyle .division > li, .panelStyle .division > div {display:table-cell; padding-right:40px;}
.panelStyle .division > li:last-child, .panelStyle .division > div:last-child {padding-right:0;}
/* table, grid, button 상하 여백 */
.ag-theme-balham{margin-bottom:15px !important;}
.frmStyle + .panelBar {padding-bottom:15px;}
.ag-theme-balham {margin:10px 0 15px;}
.ag-theme-balham + .panelBar{padding-bottom:15px;}
.panelBar + .ag-theme-balham {margin:0 0 15px;}
.panelBar + .frmStyle {margin-top:0;}

/* TABS 영역 --------------- */
.tabs {position:relative; margin-bottom:30px; margin-left:20px; margin-right:20px;}
.tabs h2 {position:absolute; top:0; z-index:2; margin-left:10px; font-size:14px; line-height:34px;}
.tabs h2 i {margin-right:12px;}
.tabsNav {overflow:hidden; position:relative; top:0; z-index:2; padding:0 30px 0 20px; height:35px;}
.tabsNav ul {display:inline-block;}
.tabsNav li {float:left; position:relative;}
.tabsNav li a {padding:0 20px; line-height:35px; height:35px; display:block; color:#888; font-weight:bold; background-color:#f9f9f9; border:1px solid #dfe2e3; border-bottom:2px solid #dfe2e3; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
.tabsNav li.on a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
.tabsCont {position:relative; top:-2px; z-index:1;}
.tabsCont::after {display:block}
.tab {display:none;}
.tab > .panelStyle{margin:0;}
.tab.on {display:block;}
.popupTabs {padding-top:10px;}
.tabContArea {overflow-x:hidden; overflow-y:auto;}
.tabBtnArea {padding:15px 0 20px 0;}
.popup .tabsCont {box-shadow:none;}
.popup .tabs {margin-bottom:0;}

/* Add TABS 영역 --------------- */
.btn-add-tab {position:absolute; top:5px; right:0; z-index:2; padding:0 10px;}
.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;}
.tabsNav .ui-corner-top a {padding:0 35px 0 20px}

/* tabsJr 영역 --------------- */
.tabsJr {position:relative;}
.tabsJrNav {overflow:hidden; position:relative; top:0; z-index:2; height:31px; margin:0 30px 0 20px;}
.tabsJrNav > ul {display:inline-block;}
.tabsJrNav li {float:left;}
.tabsJrNav li a {padding:0 20px; line-height:30px; height:30px; display:block; color:#888; /*font-weight:bold; */ background-color:#f9f9f9; border:1px solid #ccc; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
.tabsJrNav li.on a {padding-bottom:2px; font-weight:bold; color:#555; background-color:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}
.tabsJrCont {position:relative; top:-2px; z-index:1;}
.tabsJrCont::after {display:block}
.tabJr {display:none;}
.tabJr .panelStyle{margin:0; border-top:1px solid #ddd; min-height:20px; padding:20px 15px 0; box-shadow:0 -5px 7px -5px rgba(0, 0, 0, 0.05);}
.tabJr.on {display:block;}
.tabJrContArea {vertical-align:middle;}

/* 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;}
.modalPopup .tabs{ margin:0;}
.modalPopup .tabs .panelStyle{box-shadow:none}
.modalPopup .tab > .panelStyle{overflow-y:auto;}

/*MODELESS POPUP --------------- */
.modelessPopup{display:none; position:absolute; z-index:11; top:50%; left:50%;}
.modelessPopup.draggable {cursor:move;}
.modelessPopup .panelStyle{margin:0; border:1px solid #ccc; border-radius:3px;}
.modelessPopup .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
.modelessPopup .tabs{ margin:0;}
.modelessPopup .tabs .panelStyle{box-shadow:none}
.modelessPopup .tab > .panelStyle{overflow-y:auto;}

/*VIDEO POPUP --------------- */
.videoPopup {display:none; position:fixed; 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::before{position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.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;}

/* 폼테이블 스타일 --------------- */
.frmStyle {width:100%; margin-bottom:15px;}
.frmStyle th {border-top:1px solid #dae0fd;}
.frmStyle tr:last-child th {border-bottom:1px solid #dae0fd;}
.frmStyle tr:last-child td {border-bottom:1px solid #eee;}
.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;}

/* 토글 스위치--------------- */
.switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
.switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
.switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
.switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
.switchBox label:before{left:0;content:'ON';}
.switchBox label:after{right:0;content:'OFF';}
.switchBox input:checked + label span{transform:translate(31px, -50%);}
.switchBox input:checked::before, .switchBox input:checked::after{border:none}
.switch-base input:checked + label{color:#fff; background-color:#8597eb;}
.switch-primary input:checked + label{color:#fff; background-color:#1ab394;}
.switch-success input:checked + label{color:#fff; background-color:#1c84c6;}
.switch-info input:checked + label{color:#fff; background-color:#23c6c8; }
.switch-warning input:checked + label{color:#fff; background-color:#f8ac59;}
.switch-danger input:checked + label{color:#fff; background-color:#ed5565;}
.switch-black input:checked + label{color:#fff; background-color:#222;}
.switchBox + .switchBox {margin-left:6px;}

/* 테이블 스타일--------------- */
.tableStyle {width:100%; max-width:100%; margin-bottom:15px;}
.tableStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
.tableStyle th:last-child {border-right:none;}
.tableStyle td {position:relative; padding:7px 0; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:center;}
.tableStyle td:last-child {border-right:none;}
.tableStyle tbody tr:nth-of-type(2n) {background-color:rgba(0, 0, 0, 0.02);}
.tableStyle tbody tr:hover {background-color:rgba(224,243,255,0.6);}
.tableStyle + .panelBar {padding-bottom:15px;}
/* 스캔 */
.scanTbl th {font-size:25px; line-height:80px;}
.scanTbl td {line-height:80px;}
.scanTbl input[type=text] {line-height:50px; font-size:32px;}
.scanTbl .btn {overflow-y:hidden; margin-bottom:1px; padding:12px 30px; font-size:25px;}
table.noPad tr > td, td.noPad {padding:0 !important;}
th[rowspan] {border-bottom:1px solid #dae0fd;}
td[rowspan] {border-bottom:1px solid #eee;}
.nowrap {white-space:nowrap;}
.solidR {border-right:1px solid #eee; vertical-align:middle;}
.solidL {border-left:1px solid #eee; vertical-align:middle;}
.solidT {border-top:1px solid #eee;}
.solidB {border-bottom:1px solid #eee;}
.dashR {border-right:1px solid #dae0fd;}
.dashL {border-left:1px solid #dae0fd;}
.noPad table.frmStyle > tr:first-child th {border-top:0 !important;}
.noPad table.frmStyle > tr:first-child td {border-top:0 !important;}
.noPad table.frmStyle > tr:last-child th {border-bottom:0 !important;}
.noPad table.frmStyle > tr:last-child td {border-bottom:0 !important;}


/* Q&A 스타일--------------- */
.qnaStyle {width:100%; max-width:100%;}
.qnaStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
.qnaStyle th:last-child {border-right:none;}
.qnaStyle td {position:relative; padding:7px 0; text-align:center;}
.qnaStyle tr td {border-bottom:1px solid #ecf5f7;}
.qnaStyle tbody tr:nth-of-type(3n+1) td {background-color:rgba(224,243,255,0.6);}
.qnaStyle tbody tr:nth-of-type(3n) td {border-bottom:1px solid #ddd;}
.qnaClaim { text-align:left !important; padding-left:10px !important;}
.qnaClaim .goods {font-weight:bold; line-height:26px;}
.qnaClaim .cont {line-height:22px; padding:10px 0; color:#1d3e9d;}
.qnaClaim .email {line-height:26px;}
.qnaClaim .email em {border-bottom:1px solid #aaa;}
.lineRound {border:2px solid #ccc; border-radius:15px; padding:4px 14px; font-weight:bold;}

/* 내부 테이블 디자인 */
.subTable {display:table; width:100%;}
.subTable dl {display:table; width:100%;}
.subTable dt, .subTable dd {display:table-cell;}
.subTable dt {vertical-align:middle; white-space:nowrap; width:8%; padding:0 15px; background:#e9ecfb; text-align:center; border-bottom:1px solid #dae0fd;}
.subTable dl:last-child dt {border-bottom:none;}
.subTable dd {border-bottom:1px solid #eee; padding:3px 20px 3px 10px;}
.subTable dl:last-child dd {border-bottom:none;}

/* button --------------- */
.btn {border-radius:3px; vertical-align:middle; white-space:nowrap;font-size:12px;user-select:none;}
.btn-lg {padding:4px 20px 5px; height:28px; overflow-y:hidden;}
.btn-sm {margin-top:-2px; line-height:100%; height:28px; overflow-y:hidden;}
.btn-ssm {margin-top:-2px; line-height:100%; height:22px; overflow-y:hidden;}
.btn + .btn {margin-left:6px;}
.btn:first-child {margin-left:0;}

/* 버튼 색상 */
.btn-white {color:#555 !important; background-color:#fff !important; border:1px solid #ccc !important;}
.btn-default {color:#555; background-color:#eee; border:1px solid #dcdcdc;}
.btn-gray {color:#fff; background-color:#aaa; border:1px solid #aaa;}
.btn-base {color:#fff; background-color:#8597eb; border:1px solid #8597eb;}
.btn-primary {color:#fff; background-color:#1ab394; border:1px solid #1ab394;}
.btn-success {color:#fff; background-color:#1c84c6; border:1px solid #1c84c6;}
.btn-info {color:#fff; background-color:#23c6c8; border:1px solid #23c6c8;}
.btn-pink {color:#fff; background-color:#feada6; border:1px solid #feada6;}
.btn-warning {color:#fff; background-color:#f8ac59; border:1px solid #f8ac59;}
.btn-danger {color:#fff; background-color:#ed5565; border:1px solid #ed5565;}
.btn-dark {color:#fff; background-color:#6c757d; border:1px solid #6c757d;}
.btn.icn {line-height:28px; height:28px; padding:0 8px; background-color:#eee; border:1px solid #dbdbdb;}
.btn.icn i {padding-top:6px; width:12px; vertical-align:top; font-size:14px; text-align:center;}

/* 페이징 --------------- */
.tablePaging {position:relative; 	display:inline-block; vertical-align:middle;}
.tablePaging a {display:inline-block; float:left; margin:0 5px; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ccc; border-radius:50px; cursor:pointer;}
.tablePaging a.arrow {background-color:rgba(0, 0, 0, 0.03); 	border-color:#ebebeb;}
.tablePaging .num.on {background:#8597eb; color:#fff; border-color:#8597eb;}

/* 다중 Select Box */
.mSelectWrap select {display:none;}
.mSelectBox {display:inline-block; position:relative; top:-1px; margin:2px 0 2px 0; padding:0 7px 0 0; width:100%; height:auto !important; min-height:29px; border:1px solid #e5e6e7; vertical-align:middle;}
.mSelected {overflow:auto;}
.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%;}
.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;}

/* 멀티 Select Box */
.mSelWrap {display:inline-block;}
.mSelWrap select {height:100px; padding:7px 0;}
.mSelWrap .mSelBtn {margin:0 0 0 5px; float:right; width:33px; vertical-align:top;}
.mSelWrap .mSelBtn .btn {margin:0; vertical-align:top;}
.mSelWrap option {padding:4px 100px 4px 10px;}

/* 파일첨부 --------------- */
.uFile {overflow:hidden; position:relative; display:inline-block; margin:-2px 5px 0 0; width:80%; height:28px; vertical-align:middle; border:1px solid #dbdbdb;}
.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%;}

/* 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;}
.badge-warning {background-color:#ed7908;}
.badge-primary {background-color:#1ab394;}
.badge-danger {background-color:#ed5565;}
.badge-success {background-color:#2fa4e7;}
.badge-info {background-color:#23c6c8;}
.badge.circle {border-radius:50px;}
.dep3 .badge {position:relative; top:-28px; right:20px;}

/* 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;}

/* 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;}
footer .f-left {float:left; padding-left:20px; line-height:38px;}
footer .f-right {float:right; padding-right:20px; line-height:38px;}

/* 이미지 카드 */
.dexterArea {min-width:350px; min-height:180px; padding:0 !important; vertical-align:top; background:#f1f1f1; vertical-align:top;}
.dexterTable {display:table; width:100%; overflow-y:auto;}
.dexterTable > li {display:table-cell; vertical-align:top; line-height:23px;}
.dexterNo div {padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
.dexterNo div:first-child {margin-top:36px;}
.dexterNo div:last-child {border-bottom:1px solid #ddd;}

/* 수정용 이미지 카드 */
.cardArea {width:100%; padding:0 0 20px; overflow-y:auto;}
.imgCard {vertical-align:top; position:relative; display:inline-block; margin:20px 20px 0 0; padding:10px 10px 0 10px; border:1px solid #dbdbdb;}
.imgCard ul {display:table;}
.imgCard li {display:table-cell;}
.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%;}
.verticalTop {vertical-align:top;}

/* 조회용 이미지 카드 */
.cardArea2 {padding:10px 0;}
.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%;}

/* 테이블 외부 안내문구 */
.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;}
p.dot .btn {margin-left:10px !important;}
p.dot em {color:red;}

/* 정렬 */
.txt {line-height:36px;}
.aC {text-align:center !important;}
.aR {text-align:right !important;}
.aL {text-align:left !important;}
.vaT {vertical-align:top !important;}
.vaM {vertical-align:middle !important;}
.vaB {vertical-align:bottom !important;}

/* 테이블 내부 안내문구 */
.infoTxt {line-height:26px; padding:5px 0;}
.infoTxt i {margin-right:7px;}
.infoTxt em {color:red;}
.infoTxtTh {display:inline-block; text-align:left; font-weight:normal; font-size:12px;}
.infoTxtTh li {padding-top:3px;}
.infoTxtTh i {padding-right:5px;}
.srchOption {overflow:auto; padding:10px 0; line-height:36px;}

/* 유의사항 안내 */
.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;}

/* 검색결과 안내문 */
.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%;}


/* COLOR DESIGN -------------------------------------*/
/*Color :Base ---*/
.color-mPurple header,span.color-mPurple {background:linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;}
.color-purple header,span.color-purple {background:#667eea !important;}

/*Color :Gray ---*/
.color-mGray header,span.color-mGray {background:linear-gradient(to right,#6c757d 0%,#555 100%) !important;}
.color-gray header,span.color-gray {background:#666 !important;}
.color-mGray .frmStyle th,.color-mGray .tableStyle th,.color-gray .frmStyle th,.color-gray .tableStyle th {background:#eee !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
.color-mGray .tablePaging .num.on,.color-gray .tablePaging .num.on {background:#888 !important; 	border-color:#888 !important;}
.color-mGray #lnb .dep3,.color-gray #lnb .dep3 {border-color:#777 !important;}
.color-mGray .tabsJrNav li.on a,.color-gray .tabsJrNav li.on a {color:#333;}

/*Color :Blue ---*/
.color-mBlue header,span.color-mBlue {background:linear-gradient(to right,#4481eb 0%,#04befe 100%) !important;}
.color-blue header,span.color-blue {background:#0042a5 !important;}
.color-mBlue .frmStyle th,.color-mBlue .tableStyle th,.color-blue .frmStyle th,.color-blue .tableStyle th {background:#d8eafc !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
.color-mBlue .tablePaging .num.on,.color-blue .tablePaging .num.on {background:#3e91de !important; 	border-color:#3e91de !important;}
.color-mBlue #lnb .dep3,.color-blue #lnb .dep3 {border-color:#3e91de !important;}
.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {background:#d8eafc;}
.color-mBlue .tabJr.on,.color-blue .tabJr.on {border-top:4px solid #d8eafc;}
.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {color:#333;}

/*Color :Green ---*/
.color-mGreen header,span.color-mGreen {background:linear-gradient(135deg,#00b09b 0,#96c93d 100%) !important;}
.color-green header,span.color-green {background:#00b09b !important;}
.color-mGreen .frmStyle th,.color-mGreen .tableStyle th,.color-green .frmStyle th,.color-green .tableStyle th {background:#e5f7f5 !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
.color-mGreen .tablePaging .num.on,.color-green .tablePaging .num.on {background:rgba(0,176,155,0.8); 	border-color:rgba(0,176,155,0.8) !important;}
.color-mGreen #lnb .dep3,.color-green #lnb .dep3 {border-color:#00b09b !important;}
.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {background:#e5f7f5;}
.color-mGreen .tabJr.on,.color-green .tabJr.on {border-top:4px solid #e5f7f5;}
.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {color:#333;}

/*Color :Pink ---*/
.color-mPink header,span.color-mPink {background:linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)) !important;}
.color-pink header,span.color-pink {background:#feada6 !important;}
.color-mPink .frmStyle th,.color-mPink .tableStyle th,.color-pink .frmStyle th,.color-pink .tableStyle th {background:#fff7f6 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.color-mPink .tablePaging .num.on,.color-pink .tablePaging .num.on {background:#feada6; 	border-color:#feada6 !important;}
.color-mPink #lnb .dep3,.color-pink #lnb .dep3 {border-color:#feada6 !important;}
.color-mPink .tabsJrNav li.on a,.color-pink .tabsJrNav li.on a {background:#fff7f6;}
.color-mPink .tabJr.on,.color-pink .tabJr.on {border-top:4px solid #fff7f6;}
.color-mPink .tabsJrNav li.on a,
.color-pink .tabsJrNav li.on a {color:#333;}

/*Color :black ---*/
.color-black header, span.color-black{background:#3E3E3E !important;}
.color-black .header-logo{background:#000 !important;}
.color-black .header-menu .menu a{background:#000 !important;}
.color-black .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
.color-black #lnb-wrapper{background-color:#b2b2b2 !important;}
.color-black #lnb .dep2{background-color:#545454 !important;}
.color-black #lnb .dep3{border-color:#000 !important;}
.color-black #lnb .dep3{background:#fdfdfd !important;  }
.color-black #lnb .dep3 a{color:#111111 !important;}
.color-black #lnb a{color:#fff !important;}
.color-black .frmStyle th, .color-black .tableStyle th, .color-black .frmStyle th, .color-black .tableStyle th{background:#eee !important; 	border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.color-black .tablePaging .num.on, .color-black .tablePaging .num.on{background:#888 !important; 	border-color:#888 !important;}
.color-black .tabsJrNav li.on a, .color-black .tabsJrNav li.on a{color:#333; background:#eee !important}
.color-black .tabJr.on, .color-black .tabJr.on { border-top:4px solid #eee;}

/* 폰트 컬러, 폰트 두께 */
.cBlue {color:#127fdc !important;}
.cGray {color:#666 !important;}
.cRed {color:red !important;}
.bold {font-weight:bold !important;}

/* 배경 투명도 */
.bgOp6 {opacity:0.6; color:#000 !important;}

/* 여백 지정 */
hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
.pad10 {padding:10px 0 !important;}
.pad15 {padding:15px 0 !important;}
.pad20 {padding:20px 0 !important;}
.padT3 {padding-top:3px !important;}
.padT5 {padding-top:5px !important;}
.padT10 {padding-top:10px !important;}
.padT15 {padding-top:15px !important;}
.padT20 {padding-top:20px !important;}
.padT30 {padding-top:30px !important;}
.padT40 {padding-top:40px !important;}
.padR20 {padding-right:20px !important;}
.padL10 {padding-left:10px !important;}
.padB5 {padding-bottom:5px !important;}
.padB10 {padding-bottom:10px !important;}
.padB15 {padding-bottom:15px !important;}
.padB20 {padding-bottom:20px !important;}
.padB30 {padding-bottom:30px !important;}
.padB40 {padding-bottom:40px !important;}
.marT5 {margin-top:5px !important;}
.marT10 {margin-top:10px !important;}
.marT15 {margin-top:15px !important;}
.marT20 {margin-top:20px !important;}
.marR3 {margin-right:3px !important;}
.marL5 {margin-left:5px !important;}
.marL10 {margin-left:10px !important;}
.marL20 {margin-left:20px !important;}
.marR10 {margin-right:10px !important;}
.marR20 {margin-right:20px !important;}

/* 넓이 지정 --------------- */
.w20 {width:20px !important;}
.w50 {width:50px !important;}
.w60 {width:60px !important;}
.w70 {width:60px !important;}
.w80 {width:80px !important;}
.w90 {width:80px !important;}
.w100 {width:100px !important;}
.w130 {width:130px !important;}
.w150 {width:150px !important;}
.w200 {width:200px !important;}
.w300 {width:300px !important;}
.w400 {width:400px !important;}
.w500 {width:500px !important;}
.w600 {width:600px !important;}
.w800 {width:800px !important;}
.w100p {width:100% !important;}
.w90p {width:90% !important;}
.w80p {width:80% !important;}
.w70p {width:70% !important;}
.w60p {width:60% !important;}
.w50p {width:50% !important;}
.w40p {width:40% !important;}
.w30p {width:30% !important;}
.w20p {width:20% !important;}
.h100 {height:100px !important;} /*alert, confirm 컨텐츠 높이에 사용*/


/*-- 캘린더 --------------*/
#calendar {max-width:900px; margin:20px 0 50px 20px;}

/*-- error page --------------*/
#errPage {padding-top:40px; width:650px; background:#fff; position:relative; top:48%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); border-radius:9px; vertical-align:middle; overflow:hidden; box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);}
#errPage .errImg {padding-left:50px; display:table-cell; vertical-align:middle; padding-bottom:30px;}
#errPage .errImg div {border-radius:50%; position:relative; display:inline-block; width:140px; height:140px; color:#fff; background:#d196e4; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2) inset;}
#errPage .fa-television {position:absolute; top:30px; left:28px; font-weight:bold; font-size:80px;}
#errPage .fa-info {position:absolute; top:49px; left:66px; font-size:34px;}
#errPage .errTxt {padding:0 50px; display:table-cell; padding-bottom:40px;}
#errPage .errTxt .ttl {font-size:16px; font-weight:bold; padding-bottom:20px;}
#errPage .errTxt .cont { padding-bottom:20px; line-height:26px;}
#errPage .errTxt .tel {color:#777;}
#errPage .errBtn {width:100%; background:#f9f9fa; line-height:70px; text-align:right;}
#errPage .errBtn .btn {margin-right:30px; border-radius:33px; background:#858b90; color:#fff; padding:5px 30px; line-height:24px; font-weight:bold; -webkit-transition:0.2s; transition:0.2s;}
#errPage .errBtn .btn:hover {background:#555;}

/*-- DEXTER --------------*/
.dexterNo { width:43px;}
.dexterNo div { padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff; text-align:right;}
.dexterNo div:first-child {margin-top:28px;}

/*-- 회원추가 --------------*/
.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%;}

/*-- Date Picker --------------*/ /* 20200521 수정 */
table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
.mtz-monthpicker-month {padding:7px; cursor:pointer;}
.ui-datepicker-trigger {padding:0;}
.ui-datepicker {z-index:800 !important; text-align:center; background:#fff;}
.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-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;}
.ui-datepicker-calendar .ui-state-default {display:inline-block; text-align:center; width:32px; line-height:24px; border:none;}
.ui-datepicker-header {position:relative; background:#d0e9ff; text-align:center; padding:5px; border:1px solid #ddd; border-bottom:none;}
.ui-datepicker-buttonpane button {background-color:#eee; border:1px solid #dcdcdc; line-height:24px; border-radius:3px; margin:0 5px 5px 5px;}
.ui-datepicker-current {float:left;}
.ui-datepicker-close {float:right;}

/* prograss bar */
.prograssWrap {display:flex; flex-direction:row;}
.prograssWrap > li {display:flex; align-items:center;}
.prograssWrap > li:nth-of-type(1) {width:96%}
.prograssWrap > li:nth-of-type(2) {margin-left:1.5rem !important}
.prograss-lg {display:flex; width:100%; height:1rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
.prograss-sm {display:flex; width:100%; height:.5rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
.prograss-bar {display:flex; border-top-right-radius:.65rem; border-bottom-right-radius:.65rem; transition:width .6s ease;}
.prograss-bar.bg-info {background-color:#11c5db;}
.prograss-txt.bg-info {color:#11c5db; font-weight:bold;}
.prograss-bar.bg-success {background-color:#1bc943;}
.prograss-txt.bg-success {color:#1bc943; font-weight:bold;}
.prograss-bar.bg-danger {background-color:#f83245;}
.prograss-txt.bg-danger {color:#f83245; font-weight:bold;}
.prograss-bar.bg-base {background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
.prograss-txt.bg-base {color:#8597eb; font-weight:bold;}

/* Multi CheckBox */
.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
.multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
.multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
.multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
.multiCheckBox li {padding:3px 10px;}
.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
.multiCheckBox label {display:flex;}

/* checkBox More */
.checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
.checkBoxList.on {overflow:visible; height:auto;}
.checkBoxList .more {position:absolute; top:-1px; right:0; width:36px; height:38px; border:1px solid #eee; background:#f7f7f7;}
.checkBoxList ul {display:flex; flex-wrap:wrap;}
.checkBoxList li {justify-content:flex-start; line-height:36px;}
.checkBoxList[data-unit='1'] li {flex-basis:100%;}
.checkBoxList[data-unit='2'] li {flex-basis:50%;}
.checkBoxList[data-unit='3'] li {flex-basis:33%;}
.checkBoxList[data-unit='4'] li {flex-basis:25%;}
.checkBoxList[data-unit='5'] li {flex-basis:20%;}
.checkBoxList[data-unit='6'] li {flex-basis:16.6%;}
.checkBoxList[data-unit='7'] li {flex-basis:14.2%;}
.checkBoxList[data-unit='8'] li {flex-basis:12.5%;}

/* 아이콘 툴팁 버튼 */
.iconTooltip {display:inline-block; position:relative; margin-right:10px;}
.iconTooltip i {position:relative; color:#46a1ff; width:15px; height:15px; line-height:16px; border-radius:50%; border:1px solid #46a1ff; cursor:pointer; text-align:center;}
.iconTooltip:hover i {box-shadow:0px 3px 7px 0px rgba(0,0,0,0.4);}
.iconTooltip span {display:none; position:absolute; top:36px; z-index:5; padding:10px 15px; line-height:24px; color:#fff; background:#6d6d6d; box-shadow:0px 3px 7px 0px rgba(0,0,0,0.2); border-radius:5px;}
.iconTooltip span:after {position:absolute; top:-4px; content:''; background:#6d6d6d; width:8px; height:8px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.iconTooltip span.left {left:-10px}
.iconTooltip span.left:after {left:15px;}
.iconTooltip span.right {right:-10px}
.iconTooltip span.right:after {right:15px;}
.iconTooltip span.center {left:50%;}
.iconTooltip span.center:after {right:5px;}
.iconTooltip:hover span{display:block;}

/* 상품이동 */
.itemMove {display:inline-block; width:800px; border:1px solid #eee;}
.itemMove .item {float:left; display:table; margin:0 10px 20px 0; width:220px; border:1px solid #eee;}
.itemMove .item li {display:table-cell; vertical-align:top;}
.itemMove .item li:nth-of-type(1) {width:80px;}
.itemMove .item li:nth-of-type(1) img {width:80px; height:80px;}
.itemMove .item button {width:16px; height:16px; text-indent:-9999px;}
.itemMove .item input {width:30px; height:14px !important; line-height:14px}
.itemMove .item li:nth-of-type(2) div {line-height:20px}

/* 상품 Dragable :20200129 */
.sortableWrap #sortable { overflow-y:auto }
.sortableWrap {margin:20px 0; width:100%; max-height:675px;}
.sortableWrap .itemWrap {display:inline-block;}
.sortableWrap .item {float:left; margin-right:12px; margin-bottom:12px; padding:5px 8px; line-height:20px; border:1px solid #ddd; vertical-align:top; background:#fff;}
.sortableWrap .item > li {float:left; vertical-align:middle;}
.sortableWrap .item .img {margin-top:3px; margin-right:10px; width:80px;}
.sortableWrap .item .img img {width:80px; height:80px; cursor:move;}
.sortableWrap .btnArea {text-align:center; margin-top:15px; padding:0 10px;}
.sortableWrap button.icnSm {overflow:hidden; position:relative; width:24px; height:20px; background-color:#fff;}
.sortableWrap button.icnSm i {position:absolute; top:-4px; left:-3px; width:24px; line-height:24px; font-size:15px; color:#888;}
.sortableWrap button.icnSm:hover i {color:#111;}
.sortableWrap button.icnSm:last-child {margin-right:0;}
.sortableWrap .item .cont {width:114px;}
.sortableWrap .item .cont li em {margin:0 3px 0 7px;}
.sortableWrap .item .cont .no {font-weight:bold; padding-bottom:3px;}
.sortableWrap .item .cont .title {padding-bottom:3px; border-bottom:1px solid #eee;}
.sortableWrap .item .cont .price {padding-top:3px; padding-bottom:3px;}
.sortableWrap .item .cont input {margin-left:5px; width:37px;}


.ag-theme-balham.lh60 .ag-cell {line-height:60px !important; height:60px;}
.ag-theme-balham.lh70 .ag-cell {line-height:70px !important; height:70px;}
.ag-theme-balham.lh80 .ag-cell {line-height:80px !important; height:80px;}
.ag-theme-balham.lh90 .ag-cell {line-height:90px !important; height:90px;}
.ag-theme-balham.lh100 .ag-cell {line-height:100px !important; height:100px;}
.ag-theme-balham.lh110 .ag-cell {line-height:110px !important; height:110px;}
.ag-theme-balham.lh120 .ag-cell {line-height:120px !important; height:120px;}


/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
.viewImg {position:relative; color:blue; cursor:pointer}
.thumbLayer {display:inline-block; position:absolute; top:0; right:0; z-index:5; border:1px solid #ddd}
.thumbLayer img {width:100%; height:auto;}

/* dashboard */
.flexWrap{display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; color:#676a6c;}
.flexWrap li{padding:0 20px 20px; width:calc(33.3%);}
.flexWrap.unit4 li{width:calc(25%);}
.flexWrap.unit5 li{width:calc(20%);}
.flexWrap.unit6 li{width:calc(16.6%);}
.flexWrap .title{padding:15px; font-weight:600; border:1px solid #e7eaec; border-top:2px solid #e7eaec;}
.flexWrap .title h5{font-size:15px; font-weight:bold;}
.flexWrap .title span{float:right; padding:1px 8px; font-size:10px; border-radius:0.25em;}
.flexWrap .content{padding:15px; border:1px solid #e7eaec; border-top:none;}
.flexWrap .content em{font-size:30px; font-weight:200;}
.statText {margin-top:5px}
.statText::after{display:block; clear:both; content:''}
.statText span:nth-of-type(1){float:left; font-size:11px;}
.statText span:nth-of-type(2){float:right; font-size:13px; font-weight:600;}
.txt-success{color:#1c84c6;}
.txt-info{color:#23c6c8;}
.flexWrap .txt-danger{color:#ed5565;}
.flexWrap .bg-success{background:#1c84c6;}
.flexWrap .bg-info{background:#23c6c8;}
.flexWrap .bg-danger{background:#ed5565;}
.btn.on{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
.dbChart .btn-group{float:right; line-height:37px;}
.dbChart .btn-group button{margin:0; height:23px;}
.dbChart .boxleft{float:left; margin:20px 15px 20px 15px; width:calc(100% - 490px);}
.dbChart .boxRight{float:left; margin:20px 20px 20px 40px; width:400px;}
.dbChart .boxRight em{font-size:24px; font-weight:200;}
.dbChart .boxRight > div{margin-bottom:25px;}
.dbChart .boxRight .statText .c1 {color:#FF7043}
.dbChart .boxRight .progress .c1 {background:#FF7043}
.dbChart .boxRight .statText .c2 {color:#48C9B0}
.dbChart .boxRight .progress .c2 {background:#48C9B0}
.dbChart .boxRight .statText .c3 {color:#ca9900}
.dbChart .boxRight .progress .c3 {background:#FFD54F}
.progress{display:-ms-flexbox; display:flex; margin-top:5px; height:1rem; overflow:hidden; font-size:.75rem; background-color:#e9ecef; border-radius:.25rem;}
.progress-mini{height:5px; margin-bottom:0;}
.progress > div{height:5px; margin-bottom:0; transition:width 0.3s;}


/* 카테고리 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: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;}



/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
@media ( max-width:1370px ) {
 .header-info { display:none;}
 .header-info-sm { display:inline-block;}
}

/* 반응형 :dashboard(20200522) --------------- */
@media ( max-width:1023px ) {
 /* 대시보드 */
 #wrapper.dashboard{width:100%; min-width:100%;}
 .dashboard .header-logo{width:100%}
 .dashboard #lnb-wrapper{display:none;}
 .dashboard .header-menu{display:none;}
 .dashboard .tabs{margin-left:0; margin-right:0;}
 .dashboard .tabs h2{position:relative; margin:10px 15px}
 .dashboard .tabsNav li:first-child{margin-left:0}
 .dashboard .tabsNav li:last-child{margin-right:0}
 .dashboard .tabsNav li a{font-size:16px}
 .dashboard .flexWrap li{width:100%}
 .dashboard .flexWrap.unit4 li{width:100%}
 .dashboard .flexWrap.unit5 li{width:100%}
 .dashboard .flexWrap.unit6 li{width:100%}
 .dashboard .boxStyle{margin-left:0; margin-right:0;}
 .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
 .dashboard .dbChart .boxRight{clear:right; width:100%; margin:30px 20px 20px;}
}

/* Fix Input Zoom on devices older than iPhone 5:*/
@media screen and (device-aspect-ratio:2/3) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size:16px;}
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio:40/71) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size:16px;}
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
@media screen and (device-aspect-ratio:375/667) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size:16px;}
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
@media screen and (device-aspect-ratio:9/16) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size:16px;}
}