@charset "utf-8";

html,body {height:100%;background-color:#f9f9f9 !important;padding-right:0 !important}

.nav-wrap {
	position:fixed;
	top:0;
	left:0;
	/* display: flex;
	flex-direction: column; */
	overflow-y: auto;
	width:300px;
	height:100%;
	background-color:#fff;
	box-shadow:0 0 10px 0 rgb(0 0 0 / 7%);
	z-index:9;
/*
	transition-property: left;
	transition-duration: 0.2s;
*/
}
.nav-wrap.active {left:-252px; overflow-y: revert;}
.nav-wrap.active2 {left:0;transition-property: left;transition-duration: 0.2s}
.nav-wrap.active3 {left:-252px;transition-property: left;transition-duration: 0.2s; overflow-y: revert;}
.nav-wrap .nav-header-wrap {background-color:#000}
.nav-wrap .nav-header-wrap h1 {display:inline-block;margin:0 0 0 18px;padding:0;height:48px;line-height:48px;color:#fff}
.nav-wrap .nav-header-wrap button {float:right;width:48px;height:48px;color:#fff;border:none;border-radius:0;background-color:transparent}
.nav-wrap .nav-header-wrap button:hover,
.nav-wrap .nav-header-wrap button:active {background-color:#222}
.nav-wrap .login-info-wrap {position:relative;display:block;margin:0;padding:15px;color:#fff;font-weight:300;background:url(../img/login_bg.png) no-repeat 0 50%;background-size:cover}
.nav-wrap .login-info-wrap button.btn-logout {position:absolute;top:50%;right:0;transform:translateY(-50%);width:48px;height:100%;border:0;border-radius:0;background-color:transparent}
.nav-wrap .login-info-wrap button.btn-logout:hover,
.nav-wrap .login-info-wrap button.btn-logout:active {background-color:rgba(255,255,255,0.1)}
.nav-wrap .nav-list-wrap {display:block;margin:0;padding:0}
.nav-wrap .nav-list-wrap > ul > li {position:relative;border-bottom:1px solid #eee}
.nav-wrap .nav-list-wrap > ul > li > a {position:relative;display:block;margin:0;padding:10px 10px 10px 23px;background-color:transparent;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap > ul > li > a > div {position:absolute;top:50%;right:0;transform:translateY(-50%);width:48px;text-align:center;color:#555}
.nav-wrap .nav-list-wrap > ul > li > a:hover,
.nav-wrap .nav-list-wrap > ul > li > a:active {background-color:#e0e0e0;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap > ul > li.active > a {padding:10px 10px 10px 20px;border-left:3px solid #fd3a3a}
.nav-wrap .nav-list-wrap > ul > li.active > a > div {color:#fd3a3a}
.nav-wrap .nav-list-wrap .sub-nav-list-wrap {display:none;margin:0;padding:5px 0;background-color:#f6f6f6;transition-property: display;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list-wrap.active {display:block;transition-property: display;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list-wrap > ul > li > a {display:block;margin:0;padding:5px 0 5px 23px;font-size:0.9em;background-color:transparent;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list-wrap > ul > li > a:hover,
.nav-wrap .nav-list-wrap .sub-nav-list-wrap > ul > li > a:focus,
.nav-wrap .nav-list-wrap .sub-nav-list-wrap > ul > li > a:active {background-color:#eee;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list-wrap > ul > li.active > a {background:#fff url('../img/btn_next.png') no-repeat calc( 100% - 13px ) 50%}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap {position:absolute;top:50%;left:299px;transform:translateY(-50%);display:none;padding:15px 0;width:200px;border:1px solid #eee;border-radius:10px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 7%)}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap strong {padding:0 15px}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap > ul > li {}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap > ul > li > a {display:block;margin:0;padding:5px 15px;background-color:transparent;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap > ul > li > a:hover,
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap > ul > li > a:active {background-color:#eee;transition-property: background-color;transition-duration: 0.5s}
.nav-wrap .nav-list-wrap .sub-nav-list2-wrap > ul > li.active > a {background:#fff url('../img/btn_next.png') no-repeat calc( 100% - 13px ) 50%}

.header-wrap {
	display:block;
	margin:0 0 0 300px;
	padding:0 20px 0 0;
	height:49px;
	line-height:49px;
	font-size:em;
	border-bottom:1px solid rgba(0,0,0,.09);
	background-color:#fff;
	overflow:hidden;
/*
	transition-property: margin;
	transition-duration: 0.2s;
*/
}
.header-wrap.active {margin:0 0 0 48px;}
.header-wrap.active2 {margin:0 0 0 300px;transition-property: margin;transition-duration: 0.2s}
.header-wrap.active3 {margin:0 0 0 48px;transition-property: margin;transition-duration: 0.2s}
.header-wrap .top-nav-left {float:left}
.header-wrap .top-nav-left ul li {float:left}
.header-wrap .top-nav-left ul li a {display:block;margin:0;padding:0 20px}
.header-wrap .top-nav-left ul li a:hover,
.header-wrap .top-nav-left ul li a:focus,
.header-wrap .top-nav-left ul li a:active {background-color:#f6f6f6}
.header-wrap .top-nav-left ul li.active a {color:#fff;background-color:#333}
.header-wrap .top-nav-right {float:right}
.header-wrap .top-nav-right ul li {float:left}

.main-wrap {
	display:block;
	margin:0 0 0 300px;
	padding:20px 30px 20px;
	min-height:calc( 100% - 50px - 30px);
/*
	transition-property: margin;
	transition-duration: 0.2s;
*/
}
.main-wrap.active {margin:0 0 0 48px;}
.main-wrap.active2 {margin:0 0 0 300px;transition-property: margin;transition-duration: 0.2s}
.main-wrap.active3 {margin:0 0 0 48px;transition-property: margin;transition-duration: 0.2s}

.footer-wrap {
	display:block;
	margin:0 0 0 300px;
	padding:0;
	height:29px;
	line-height:29px;
	font-size:0.7em;
	font-weight:300;
	border-top:1px solid rgba(0,0,0,.09);
	background-color:#fff;
/*
	transition-property: margin;
	transition-duration: 0.2s;
*/
}
.footer-wrap.active {margin:0 0 0 48px;}
.footer-wrap.active2 {margin:0 0 0 300px;transition-property: margin;transition-duration: 0.2s}
.footer-wrap.active3 {margin:0 0 0 48px;transition-property: margin;transition-duration: 0.2s}
.footer-wrap .content-wrap {display:block;margin:0;padding:0 20px}

.top-btn-wrap {position:fixed;bottom:10px;right:10px;padding:0 10px;font-size:2em;background-color:rgba(0,0,0,0.1);z-index:99;cursor:pointer}

/********** sweetalert2 **********/
.swal2-title {font-size:1.3em !important;font-weight:400 !important}

.page-title {position:relative;display:block;margin:0;padding:0;font-size:2em;letter-spacing:-1px}
.page-title small {margin-left:10px;font-weight:300;font-size:65%;color:#999}
.page-title .btns-wrap {position: absolute;top:0;right:0}

.page-sub-title {position:relative;display:block;margin:0;padding:0;font-size:1.5em;letter-spacing:-1px}
.page-sub-title small {margin-left:10px;font-weight:300;font-size:65%;color:#999}
.page-sub-title .btns-wrap {position: absolute;top:0;right:0}

.notice-form-wrap {display:block;margin:0;padding:35px;border:2px solid #c30;border-radius:15px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}
.notice-form-wrap.sty01 {border:2px solid #0069D9}
.notice-form-wrap.sty02 {border:2px solid #545B62}
.notice-form-wrap.sty03 {border:2px solid #218838}
.notice-form-wrap.sty04 {border:2px solid #C82333}
.notice-form-wrap.sty05 {border:2px solid #E0A800}
.notice-form-wrap.sty06 {border:2px solid #138496}
.notice-form-wrap.sty07 {border:2px solid #000000}

.step-config-wrap {display:block;margin:0;padding:0}
.step-config-wrap > div > .content-wrap {position:relative;display:block;margin:0;padding:30px;min-height:250px;border:1px solid #ddd;border-radius:15px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}
.step-config-wrap > div > .content-wrap > .btn-wrap {position: absolute;bottom:30px;left:30px}
/*.step-config-wrap > div > .content-wrap > button {position: absolute;bottom:30px;left:30px}*/

.sch-form-wrap {display:block;margin:0;padding:30px 20px;border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}

.sch-form2-wrap {display:block;margin:0;padding:10px 20px}
.sch-form2-wrap input[type='text'] {background-color:#fff !important}

.loading-wrap {display:none;margin:0 0 20px;padding:20px;text-align:center}

.goods-list-wrap {display:block;margin:0;padding:20px 20px;border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}
.goods-list-wrap table {width:100%;border-collapse: collapse;border-top:1px solid #ddd}
.goods-list-wrap table th {padding:10px;font-weight:400;white-space:nowrap;border-bottom:1px solid #ddd;border-right:1px solid #ddd;background-color:#f6f6f6}
.goods-list-wrap table th:last-of-type {border-right:none}
.goods-list-wrap table td {padding:10px;font-weight:300;border-bottom:1px solid #ddd;border-right:1px solid #ddd}
.goods-list-wrap table td:last-of-type {border-right:none}
.goods-list-wrap table td.no-data {padding:100px;text-align:center}
.goods-list-wrap table tr.evens {background:#eff3f9 !important}
.tbl-btns-warp li {float:left}

.bbs-list-wrap {display:block;margin:0;padding:20px 20px;border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}

.market-wrap {display:block;margin:0;padding:20px;border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%)}
.market-wrap .tab-nav-wrap ul {border-bottom:1px solid #999}
.market-wrap .tab-nav-wrap ul li {float:left;margin-bottom:-1px}
.market-wrap .tab-nav-wrap ul li a {display:block;margin:0;padding:10px 20px;border:1px solid #fff;border-bottom:1px solid #999;border-top-left-radius:5px;border-top-right-radius:5px}
.market-wrap .tab-nav-wrap ul li.active a {border:1px solid #999;border-bottom:1px solid #fff;border-top-left-radius:5px;border-top-right-radius:5px}

table.tbl-sty00 {width:100%;border-collapse: collapse;}
table.tbl-sty00 th {padding:10px 0px 10px;font-weight:400;border-bottom:1px solid #eee}
table.tbl-sty00 td {padding:3px 5px;border-bottom:1px solid #eee}
table.tbl-sty00 tr:last-of-type th,
table.tbl-sty00 tr:last-of-type td {border-bottom:none}

table.tbl-sty01 {width:100%;border-collapse: collapse;}
table.tbl-sty01 th {padding:10px 0px 10px;font-weight:400;border-bottom:1px solid #eee}
table.tbl-sty01 td {padding:13px 5px;border-bottom:1px solid #eee}
table.tbl-sty01 tr:last-of-type th,
table.tbl-sty01 tr:last-of-type td {border-bottom:none}

table.tbl-sty02 {width:100%;border-collapse: collapse;border-top:1px solid #ddd}
table.tbl-sty02 th {padding:5px;font-weight:400;border-bottom:1px solid #ddd;border-right:1px solid #ddd;background-color:#f6f6f6}
table.tbl-sty02 th:last-of-type {border-right:none}
table.tbl-sty02 td {padding:5px;font-weight:300;border-bottom:1px solid #ddd;border-right:1px solid #ddd}
table.tbl-sty02 td:last-of-type {border-right:none}
table.tbl-sty02 td.no-data {padding:100px;text-align:center}

table.tbl-sty03 {width:100%;border-collapse: collapse;}
table.tbl-sty03 th,
table.tbl-sty03 td {padding:3px 0}

table.tbl-sty04 {border-collapse: collapse;}
table.tbl-sty04 th {text-align:left;padding:15px 0 5px;font-weight:300;color:#666}
table.tbl-sty04 td {text-align:left;padding:0 5px 0 0}

dl.sty01 {display:block;margin:0;padding:0;width:100%}
dl.sty01 dt {clear:both;float:left;padding:0 2px;text-align:left;width:50%;border-bottom:1px solid #eee}
dl.sty01 dd {float:left;padding:0 2px;text-align:right;width:50%;border-bottom:1px solid #eee}
dl.sty01 dt:last-of-type,
dl.sty01 dd:last-of-type {border-bottom:none}

dl.sty02 {display:block;margin:0;padding:0;width:100%}
dl.sty02 dt,
dl.sty02 dd {float:left;padding:15px 0;border-top:1px solid #ddd}
dl.sty02 dt {xbackground-color:#eee}
dl.sty02 dd {xbackground-color:#ddd}
dl.sty02 dt:first-of-type,
dl.sty02 dd:first-of-type {border-top:none}

dl.sty03 {display:block;margin:0;padding:0;width:100%}
dl.sty03 dt {clear:both;float:left;padding:0 2px;text-align:left;width:60px;border-bottom:1px solid #eee}
dl.sty03 dd {float:left;padding:0 2px;text-align:left;width:calc(100% - 60px);border-bottom:1px solid #eee}
dl.sty03 dt:last-of-type,
dl.sty03 dd:last-of-type {border-bottom:none}

.stop-notice-wrap {
	position:fixed;
	bottom:20px;
	left:20px;
	display:none;
	margin:0;
	padding:20px;
	width:calc( 100% - 40px );
	color:#fff;
	border:0;
	border-radius:10px;
	background-color:#c30;
	z-index:999;
}

/********** 고정 팝업창 **********/
.mw-popup{display:none;position:fixed;_position:absolute;top:0;left:0;z-index:999;width:100%;height:100%}
.mw-popup.open{display:block}
.mw-popup .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50)}
#mw-contents-wrap {position:absolute;top:50px;left:0;width:auto;height:auto;border:1px solid #333;border-radius:15px;background-color:#fff;box-shadow:0 0 10px 0 rgb(0 0 0 / 10%);overflow:auto}
#mw-contents-wrap .mw-close {position:absolute;top:0;right:0;display:block;margin:0;padding:5px;color:#fff;background-color:#333}
#mw-contents-wrap .mw-close img {width:20px;height:20px}
#mw-contents-wrap > h3.page-title-sty01 {position:fixed;display:block;margin:0;padding:20px 20px;width:inherit;color:#fff;border-top-left-radius:10px;border-top-right-radius:14px;background-color:#333;z-index:9}
#mw-contents-wrap > .goods-detail-wrap {display:block;margin:67px 0 0;padding:0}
#mw-contents-wrap > .goods-detail-wrap img {
	max-width: 100%;
	height: auto;
	width: auto\9; // ie8
}
#mw-contents-wrap > .goods-form-wrap {display:block;margin:0 0 0;padding:30px}
#mw-contents-wrap > .goods-info-wrap {display:block;margin:87px 0 0;padding:20px 30px 30px}
#mw-contents-wrap > .goods-info-wrap .goods-data-wrap {display:block;margin:0;padding:0}

.page-nav-wrap {float:right;margin:0;padding:0}
.page-nav-wrap > ul {margin:0;padding:0;list-style:none}
.page-nav-wrap > ul > li {float:left}
.page-nav-wrap > ul > li > a {display:block;margin:0 0 0 5px;padding:3px 10px;font-size:12px;color:#666;border:1px solid #ddd;border-radius:5px;background-color:#fff}
.page-nav-wrap > ul > li > a:focus,
.page-nav-wrap > ul > li > a:active,
.page-nav-wrap > ul > li > a:hover,
.page-nav-wrap > ul > li > a.active {text-decoration:none;color:#fff;border:1px solid #333;background-color:#333}
.opt-wrap {display:block;margin:0;padding:0;max-height:300px;overflow-y:auto}
.opt-wrap .opt-list {display:block;margin:0 0 3px;padding:5px 5px 0;}
.opt-wrap .opt-list > span {float:left;margin:3px 0 0 5px;padding:0;width:20px}
.opt-wrap .opt-list > .inp-item {display:block;margin:0 0 0 30px}

.error-wrap {display:block;margin:0;padding:5px 10px;background-color:#eee}
.error-wrap.error-sty01 {font-weight:400;color:#fff;background-color:#dc3545}

.debug-wrap {display:block;margin:0;padding:15px 20px;font-weight:300;color:#fffc00;border-radius:10px;background-color:#333}

.dl-sty01 {width:100px}
.dl-sty01 dt {clear:both;float:left;width:50%;text-align:right;padding:7px 7px 0 0px;}
.dl-sty01 dd {float:left;width:50%;margin-bottom:5px}

.nav-tabs {display:block;margin:10px 0 30px;padding:0}
.nav-tabs ul {border-bottom:1px solid #ccc}
.nav-tabs ul li {float:left;margin-right:-1px;margin-bottom:0}
.nav-tabs ul li a {display:block;margin:0 0 -1px;padding:10px 15px;border:1px solid #ccc;border-top-left-radius:7px;border-top-right-radius:7px;background-color:#fff}
.nav-tabs ul li a.active {border-bottom:1px solid #fff;font-weight:900}

/* 필수입력 커스텀 */
.essential, textarea.essential {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

.blinkingTxt2{
	-webkit-animation:blink .2s ease-in-out infinite alternate;
	-moz-animation:blink .2s ease-in-out infinite alternate;
	animation:blink .2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

.item-edit-btn {position:relative}
.item-edit-btn span {
    position: absolute;
    top: -5px;
    right: -8px;
    color: #fff;
    background-color: red;
    border: none;
    border-radius: 100%;
    width: 17px;
    height: 17px;
	line-height: 17px;
    font-size: 11px;
	font-weight: bold;
	color:#fff;
	text-align:center;
}

/***** blinking CSS *****/
.blinking{
	-webkit-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Safari 4+ */
	-moz-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Fx 5+ */
	-o-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Opera 12+ */
	animation: NAME-YOUR-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%, 49% {
    background-color:rgba(1,1,1,0);
    /*border: 3px solid #e50000;*/
  }
  50%, 100% {
    background-color:#ffd7d7;
    /*border: 3px solid rgb(117, 209, 63);*/
  }
}

.blinkingTxt{
  -webkit-animation:blink .2s ease-in-out infinite alternate;
  -moz-animation:blink .2s ease-in-out infinite alternate;
  animation:blink .2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes blinkNoti-effect {
  50% {
    /*opacity: 0;*/
	background-color:red;
	color:#fff;
  }
}

.blinkNoti {
	animation: blinkNoti-effect 1s step-end infinite;
}

/* components.css { */
.scroll-none::-webkit-scrollbar {
    width: 0;  /* 스크롤바의 너비 */
    height: 0;  /* 스크롤바의 너비 */
    background-color: #fff;
}
.scroll-none::-webkit-scrollbar-thumb {
    background: #b6b6b6; /* 스크롤바의 색상 */
    border: none;
}
.scroll-thin::-webkit-scrollbar {
    width: 5px;  /* 스크롤바의 너비 */
    height: 5px;  /* 스크롤바의 너비 */
    background-color: #fff;
}
.scroll-thin::-webkit-scrollbar-thumb {
    background: #b6b6b6; /* 스크롤바의 색상 */
    border: none;
}
/* components.css } */