@charset "UTF-8";
/* CSS Document */

@import "reset.css";
@import "common.css";

body{
	background: var(--bg1);
}

/* Header */
.header{
	position: relative;
	z-index: 10;
	width: 100%;
	height: 40px;
	min-width: 1340px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	background: var(--color-s-dark3);
}
/* 메뉴 */
/* 대메뉴 */
.gnb{
	font-size: 14px;
	font-weight: 700;
	color: var(--color-s);
}
.gnb-ul{
	display: flex;
	justify-content: center;
	z-index: 10;
}
.gnb-li{
	position: relative;
	width: 120px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}
.gnb-a{
	display: block;
	position: relative;
}
.gnb-li.on, .gnb-a:hover{
	color: #ffffff;
}
.gnb-li.on:after, .gnb-a:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	background: var(--color-p);
}
.gnb-li.on:after{
	width: 100%;
}
.gnb-a:after{
	left: 50%;
	width: 0;
	transition: all .5s;
}
.gnb-a:hover:after{
	left: 0;
	width: 100%;
}
/* 하위메뉴 -200px -> -300px로 변경*/
.lnb-ul{
	position: absolute;
	top: -300px;
	left: 10px;
	z-index: -1;
	border-radius: 4px;
	width: 140px;
	background: var(--color-s-dark3);
	transition: all .5s;
	padding: 10px 20px 20px;
	text-align: left;
	line-height: 30px;
	font-size: 12px;
	font-weight: 400;
	color: var(--color-s);
}
.lnb-ul:before{
	content: "";
	display: block;
	position: absolute;
	left: 38px;
	top: -10px;
	width: 24px;
	height: 14px;
	background: url('../images/bg-menu-edge.svg') center no-repeat;
}
.gnb-li:hover .lnb-ul{
	top: 50px;
}
.lnb-li.on, .lnb-li:hover{
	color: #ffffff;
}

/* 버튼메뉴 */
.snb-btn{
	color: #8D96B8;
	font-size: 12px;
}
.snb-btn-ul{
	display: flex;
	justify-content: space-around;
}
.snb-btn-li{
	height: 40px;
	line-height: 40px;
	margin-left: 4px;
}
.snb-btn-a{
	display: block;
	padding: 0 10px;
	background: var(--color-s-dark2);
}
.snb-btn-a i{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 4px;
}
.snb-btn.on, .snb-btn-a:hover, .snb-btn-a:active{
	background: var(--color-p);
	color: var(--color-w);
}
/* 버튼메뉴 아이콘 */
.snb-btn-a .ic-save{background-image: url('../images/ic_save.svg');}
.snb-btn-a .ic-find{background-image: url('../images/ic_find.svg');}
.snb-btn-a .ic-mod{background-image: url('../images/ic_mod.svg');}
.snb-btn-a .ic-close{background-image: url('../images/ic_close.svg');}
.snb-btn.on .ic-save, .snb-btn-a:hover .ic-save{background-image: url('../images/ic_save_over.svg');}
.snb-btn.on .ic-find, .snb-btn-a:hover .ic-find{background-image: url('../images/ic_find_over.svg');}
.snb-btn.on .ic-mod, .snb-btn-a:hover .ic-mod{background-image: url('../images/ic_mod_over.svg');}
.snb-btn.on .ic-close, .snb-btn-a:hover .ic-close{background-image: url('../images/ic_close_over.svg');}

/* 퀵메뉴 */
.qmenu{
	padding: 10px;
	min-width: 1340px;
	background: var(--color-w);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	white-space: nowrap;
}
.btn-qmenu{
	border: 1px solid var(--bg2);
	border-radius: 4px;
	padding: 0 5px 0 10px;
	margin: 0 4px;
	height: 28px;
	line-height: 28px;
	background: var(--bg1);
	color: var(--color-s);
	font-size: 12px;
	font-weight: 700;
}
.btn-qmenu i{
	display: inline-block;
	margin-left: 4px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	background: url('../images/ic_qmenu_x.svg') center no-repeat;
}
.btn-qmenu:hover, .btn-qmenu:active, .btn-qmenu.on{
	border: 1px solid var(--color-p);
	color: var(--color-p);
}
.btn-qmenu:hover i, .btn-qmenu:active i, .btn-qmenu.on i{
	background: url('../images/ic_qmenu_x_over.svg') center no-repeat;
}
/*--// 메뉴 */
/*--/ Header */

/* Contents */
.page-hd{
	padding: 20px;
	min-width: 1300px;
	height: 40px;
	display: flex;
	justify-content: space-between;
}
.ttl-page{
	font-size: 16px;
	color: var(--color-txt-dark);
	font-weight: 700;
}
.path{
	font-size: 12px;
	color: var(--color-txt);
}
.path .path-nav:after{
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('../images/ic_path.svg') center right no-repeat;
	vertical-align: text-bottom;
}
.path .path-nav:last-child{
	color: var(--color-p);
}
.path .path-nav:last-child:after{
	display: none;
}
.contents{
	padding: 0 20px;
	min-width: 1340px;
}

/* fieldset */
.set-field{
	border-radius: 4px;
	border: 1px solid var(--line);
	padding: 20px;
	margin-top: 10px;
	background: var(--color-w);
	min-width: 1300px;
	box-sizing: border-box;
}
.set-field-h3{
	padding-bottom: 20px;
	font-size: 14px;
	color: var(--color-txt-dark);
	font-weight: 700;
}
.set-field-h3:before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-right: 8px;
	background: var(--color-p);
	vertical-align: text-bottom;
}
.set-field-dl{
	display: flex;
	flex-wrap: wrap;
	line-height: 30px;
	align-items: center;
	font-size: 12px;
	color: var(--color-txt);
}
.set-field-dt{
	margin: 5px 0;
	width: 100px;
	font-size: 12px;
	color: var(--color-txt-dark);
}
.set-field-dd{
	margin: 5px 0;
	width: calc(100% - 100px);
	color: var(--color-txt);
}
.txt-value{
	display: inline-block;
	font-size: 12px;
	color: var(--color-error);
}
.set-field-flexbox{
	display: flex;
	gap : 40px;
	flex-wrap: wrap;
	justify-content: space-between;
}
.set-field-flexbox .set-field-dl{
	flex-basis: calc(50% - 20px);
}
/* 검색조건 설정 */
.set-search{
	border-radius: 4px;
	border: 1px solid var(--line);
	padding: 20px;
	margin: 10px auto 0 auto;
	background: var(--bg2);
	min-width: 1300px;
}
.set-search-dl{
	display: flex;
	flex-wrap: wrap;
	line-height: 30px;
	align-items: center;
	font-size: 12px;
	color: var(--color-txt);
}
dt + dd{margin-right: 40px;}
.set-search-dt{
	width: 70px;
	font-size: 12px;
	color: var(--color-txt-dark);
}
.set-search-dd{
}
.search-flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap : 40px;
}
.search-flex2{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	column-gap : 40px;
}
.search-flex3{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}
.set-search.search-flex2 .set-search-dl{
	column-gap : 40px;
}
.set-search-btn{
	width: 160px;
}


/* Button */
.set-btn{
	padding: 20px 0 40px 0;
	text-align: center;
}
.btn-lnb{
	border: none;
	border-radius: 4px;
	margin-right: 16px;
	width: 160px;
	height: 40px;
	font-size: 14px;
	color: var(--color-w);
	background: var(--color-s);
}
.btn-lnb:last-child{margin-right: 0;}
.btn-lnb.submit{
	background: var(--color-p);
}
.btn-lnb.modify{
	background: var(--color-s);
}
.btn-lnb.delete{
	background: var(--color-error);
}
.btn-form{
	border: none;
	border-radius: 3px;
	padding: 0 10px;
	min-width: 50px;
	height: 22px;
	line-height: 100%;
	background: var(--color-s);
	font-size: 12px;
	color: var(--color-w);
	vertical-align: middle;
}
.btn-form.del{
	background: var(--color-error);
}
.btn-form.submit{
	background: var(--color-p);
}

/* 팝업 */
.popup-hd{
	padding: 20px;
	height: 60px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background: var(--color-w);
}
.popup-ttl{
	font-size: 14px;
	color: var(--color-txt-dark);
	font-weight: 700;
}
.popup-ttl:before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-right: 8px;
	background: var(--color-p);
	vertical-align: text-bottom;
}
.popup-x{}
.popup-x .btn-x{
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/ic_pop_x.svg') center no-repeat;
	color: transparent;
	vertical-align: middle;
}
.popup-x .btn-x:hover, .popup-x .btn-x:active{
	background-image: url('../images/ic_pop_x_over.svg');
}
.set-search-pop{
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--bg2);
	padding: 10px 20px;
}
.set-search-pop .set-search-dl{
	justify-content: center;
	align-content: center;
}
.scroll-y{
	overflow-y: auto;
	height: 420px;
}
.pop-field{
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	grid-row-gap: 20px;
}
.pop-field-dl{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--color-txt);
	line-height: 30px;
}
.pop-field-dt{
	width: 100px;
	font-size: 12px;
	color: var(--color-txt-dark);
}
.pop-field-dd{
}
.pop-btn-set{
	padding: 20px;
	text-align: center;
}

/* 직급코드 */
.table-job{}
.table-job tr.jobcode-1 td{color: grey;}
.table-job tr.jobcode-2 td{color: darkgray;}
.table-job tr.jobcode-3 td{color: lightcoral;}
.table-job tr.jobcode-4 td{color: darkseagreen;}
.table-job tr.jobcode-5 td{color: lightskyblue;}
.table-job tr.jobcode-6 td{color: darkgoldenrod;}
.table-job tr.jobcode-1 td.bg-job{color: var(--color-w); background: grey;}
.table-job tr.jobcode-2 td.bg-job{color: var(--color-w); background: darkgray;}
.table-job tr.jobcode-3 td.bg-job{color: var(--color-w); background: lightcoral;}
.table-job tr.jobcode-4 td.bg-job{color: var(--color-w); background: darkseagreen;}
.table-job tr.jobcode-5 td.bg-job{color: var(--color-w); background: lightskyblue;}
.table-job tr.jobcode-6 td.bg-job{color: var(--color-w); background: darkgoldenrod;}

.select-color{
	position: relative;
	height: 22px;
	line-height: 22px;
	font-size: 12px;
	color: var(--color-txt);
}
.select-color-box{
	border: 1px solid var(--line);
	padding: 0 22px 0 5px;
	background-image: url('../images/btn-drop.svg');
	background-position: center right;
	background-repeat: no-repeat;
}
.select-color-box:active{
	background-image: url('../images/btn-drop-over.svg');
	background-color: var(--bg1);
}
.select-color-ul{
	display: none;
	position: absolute;
	left: 0; top: 30px;
	z-index: 10;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--color-w);
}
.select-color-ul li{
	padding: 5px 10px;
	vertical-align: middle;
}
.select-color-ul li:hover{background: var(--bg1);}
.color-code1:before, 
.color-code2:before, 
.color-code3:before, 
.color-code4:before, 
.color-code5:before, 
.color-code6:before{
	content: "";
	display: inline-block;
	width: 24px;
	height: 16px;
	margin-right: 8px;
	vertical-align: middle;
}
.color-code1:before{background: grey;}
.color-code2:before{background: darkgray;}
.color-code3:before{background: lightcoral;}
.color-code4:before{background: darkseagreen;}
.color-code5:before{background: lightskyblue;}
.color-code6:before{background: darkgoldenrod;}


/* 탭메뉴 */
.ttl-h3{
	padding: 40px 0 10px 0;
	font-size: 14px;
	color: var(--color-txt-dark);
	font-weight: 700;
}
.ttl-h3:before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-right: 8px;
	background: var(--color-p);
	vertical-align: text-bottom;
}
.tabmenu{
	border-bottom: 1px solid var(--line);
}
.tabmenu-ul{
	display: flex;
	align-items: center;
	line-height: 40px;
}
.tabmenu-li{
	position: relative;
	padding: 0 20px;
	font-size: 14px;
	color: var(--color-txt);
}
.tabmenu-li a{display: block;}
.tabmenu-li.on, .tabmenu-li:hover{
	color: var(--color-p);
	font-weight: 700;
}
.tabmenu-li:after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--color-p);
	box-shadow: 2 2 2 rgba(0, 0, 0, 0.2);
}
.tabmenu-li:hover:after, .tabmenu-li.on:after{
	left: 0;
	width: 100%;
	transition: all .5s;
}

/* 직급별 회원관리 */
.table-list{
	display: flex;
	align-content: flex-start;
	gab : 40px;
	margin-top: 20px;
	justify-content: space-between;
}
.table-list h3{padding: 0;}
.table-code{width: 280px;}
.table-code-list{
	width: calc(100% - 320px);
	min-width: 940px;
}

/* table row */
table tr.row-error td, table tr.row-error th{
	background: var(--bg-error);
	border-bottom: 1px solid var(--line-error);
	color: var(--color-error)
}
/*2023-07-31 add*/
table tr.row-info td, table tr.row-info th{
	background:  #E8F5FF;
	border-bottom: 1px solid var(--line);
	color: var(--color-s-dark2)
}
table td.td-left{text-align: left;}
table tr.row-sum td, table tr.row-sum th{
	background: #E8F5FF;
	border-top: 2px solid var(--color-s-light);
	border-bottom: 1px solid var(--line);
}
table tr.row-sum th{
	color: var(--color-p);
}
.tbl-vline th{border-right: 1px solid var(--line);}
.tbl-vline th:last-child{border-right: 0;}

/* Table 합계 - 20220419 추가 */
.table-section-sum{
	margin-top: 10px;
}
.table-section-sum table{
	margin-top: 0;
}
.table-sum-list{
	max-height: 580px;
	overflow-y: scroll;
}
/*--// Table 합계 - 20220419 추가 */


/* 판매등록 */
.paybox{
	border-radius: 4px;
	border: 1px solid var(--line);
	padding: 20px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 40px;
	background: var(--color-w);
}
.paybox-h4{
	font-size: 14px;
	font-weight: 700;
	color: var(--color-txt-dark);
}
.paybox-dl{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 40px;
	font-size: 12px;
	color: var(--color-txt);
}
.paybox-dt{
	color: var(--color-txt-dark);
}

/* 로그인 */
.login{
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 4px;
	border: 1px solid var(--line);
	width: 600px;
	transform: translate(-50%, -50%);
	background: var(--color-w);
}
.login-ttl{
	border-radius: 4px 4px 0 0;
	border-bottom: 1px solid var(--line);
	padding: 30px 20px 10px;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-txt);
	background: var(--bg2);
}
.login-h3{
	font-size: 16px;
	color: var(--color-txt-dark);
	font-weight: 700;
}
.login-h3:before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-right: 8px;
	background: var(--color-p);
	vertical-align: text-top;
}
.login-h4{
	font-size: 14px;
	padding: 10px;
}
.login-box{
	padding: 40px 90px 60px;
}
.login-box-btn{
	padding-top: 40px;
}
.btn-login{
	border: none;
	border-radius: 4px;
	width: 100%;
	height: 40px;
	font-size: 14px;
	color: var(--color-w);
	background: var(--color-p);
}


/* 여백 */
.mt-0{margin-top: 0;}
.mt-20{margin-top: 20px;}
.mt-60{margin-top: 60px;}

/* 텍스트 */
.t-error{color: var(--color-error);}
.t-primary{color: var(--color-p);}

/* 정렬 */
.a-center{text-align: center;}
.a-right{text-align: right;}

/* width-% */
.w-20per{width: 20%;}
.w-25per{width: 25%;}
.w-30per{width: 30%;}
.w-40per{width: 40%;}
.w-45per{width: 45%;}
.w-50per{width: 50%;}
.w-100per{width: 100%;}
/* width-px */
.w-100px{width: 100px;}
.w-110px{width: 110px;}
.w-120px{width: 120px;}
.w-150px{width: 150px;}
.w-155px{width: 155px;}
.w-160px{width: 160px;}
.w-210px{width: 210px;}
.w-220px{width: 220px;}
.w-300px{width: 300px;}
.w-320px{width: 320px;}
.w-390px{width: 390px;}
/* width n/n */
.w-1per3{width: calc( 3 / 100%);}