@charset "UTF-8";

:root {
	--main-color:#0985F8;
	--point-color:#20A989;
}
/*정렬*/
[class^=flex] {
	display:flex;
	align-items:center;
}
.flexBox {
	display:flex;
}
.flexStart {
	justify-content:flex-start;
}
.flexCenter {
	justify-content:center;
}
.flexEnd {
	justify-content:flex-end;
}
.flexBetween {
	justify-content:space-between;
}
body {
	background:#ffffff;
	font-family:'NotosansKr';
}
button {
	font-family:'NotosansKr';
	cursor:pointer;
}
input[type=file] {
	position:absolute;
	left:-9999px;
	width:0;
	overflow:hidden;
}
input.won {
	background-image:url(/images/sp/iconWon.svg);
	background-position:96% center;
	background-repeat:no-repeat;
	background-size:14px;
	padding-right:30px !important;
}
/*팝업공통*/
.dim {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, .3);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	z-index:1001;
	display:none;
}
.mask {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, .3);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	z-index:1003;
}
.popWrap {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:800px;
	width:100%;
	box-shadow:0 0 15px 0 rgba(0, 0, 0, .15);
	z-index:1002;
	display:none;
}
.popWrap .popHeader {
	display:flex;
	justify-content:space-between;
	padding:0.75rem 1.25rem;
	background:#2C96F9;
}
.popWrap .popHeader h4 {
	font-size:18px;
	font-weight:bold;
	color:#fff;
	background:transparent !important; 
}
.popWrap .popHeader .cbtnCls {
    position:relative;
    width:30px;
    height:30px;
    background:#1B6DB8;
    border-radius:50%;
}
.popWrap .popHeader .cbtnCls:before {
    content:"x";
    position:absolute;
    top:48%;
    left:50%;
    transform:translate(-50%, -50%) scaleY(.8);
    font-size:28px;
    color:#fff;
    font-weight:400;
}
.popBody {
    padding:1rem;
    background:#fff;
}
.btnBlue {
	width:120px;
	height:40px;
	font-size:16px;
	background:#0985F8;
	background:var(--main-color);
	color:#fff;
	border-radius:5px; 
}
.btnOrange {
	width:120px;
	height:40px;
	font-size:16px;
	background: orange;
	color:#fff;
	border-radius:5px; 
}
.btnGreen {
	width:120px;
	height:40px;
	font-size:16px;
	background:#31B264;
	color:#fff;
	border-radius:5px; 
}
.btnLgray {
	min-width:80px;
	width:auto;
	height:40px;
	background:#e9e9e9;
	padding:0 1rem;
	color:#464646;
	font-size:16px;
	border-radius:5px;
}
.btnCheck {
	width:40px;
	height:40px;
	background:url(/images/sp/iconCheck.svg) no-repeat center center / 24px,#31B264;
}
.btnLplus {
	position:relative;
	width:30px;
	height:30px;
	background:#DBEEFF;
	border-radius:5px;
	transition:.3s;
}
.btnLplus:before {
	content:"+";
	position:absolute;
	top:47%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:22px;
	color:#2C96F9;
}
.btnLplus:hover {
	background:#2c96f9;
}
.btnLplus:hover:before {
	color:#fff;
}
.btnLminus {
	position:relative;
	width:30px;
	height:30px;
	background:#e9e9e9;;
	border-radius:5px;
	transition:.3s;
}
.btnLminus:before {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:10px;
	height:2px;
	background:#6d6d6d;
}
.btnLminus:hover {
	background:#6d6d6d;
}
.btnLminus:hover:before {
	background:#fff;
}
.btnGuide {
	width:24px;
	height:24px;
	background:#888;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	line-height:24px;
	text-align:center;
	border-radius:50%;
	margin-left:0.5rem;	
}
.btnExcel {
	height:40px;
	padding:0 3rem 0 1rem;
	background:url(/images/sp/iconExcel.png) no-repeat 93% center / 24px, var(--point-color); 
	color:#fff;
	line-height:40px;
	border-radius:5px;
	margin-left : 5px;
}
.cbtnCls {
    position:relative;
    width:20px;
    height:20px;
    background:#767676;
    border-radius:50%;
}
.cbtnCls:before {
    content:"x";
    position:absolute;
    top:48%;
    left:50%;
    transform:translate(-50%, -50%) scaleY(.8);
    font-size:18px;
    color:#fff;
    font-weight:400;
}
.foodWrap {
	max-width:1400px;
	width:100%;
	margin:0 auto;
}
.sbjtWrap {
	text-align:center;
}
.bigSbjt {
	margin:1.5rem 0;
	font-size:28px;
	font-weight:bold;
	display:inline-block;	
}
.bigSbjt:after {
	content:"";
	display:block;
	width:100%;
	height:4px;
	background:linear-gradient(90deg, #2C96F9 0%, #43C778 124.22%);
	margin:0.5rem auto 0;
}
.foodWrap h4.smallSbjt {
	font-size:18px;
	font-weight:bold;
	color:#333;
	background:url(/images/sp/h4.png) no-repeat 0 center;
	padding:0 0 0 32px;
}
.uploadBox {
	display:flex;
	justify-content:space-between;
	margin:2rem 0 1.5rem 0;
}
.uploadBox > li {
	position:relative;
	width:49%;
	display:flex;
	align-items:center;
	padding:1rem;
	background:#fff;
	border:1px solid #ececec;
	border-radius:10px;
	box-shadow:0 0 15px 0 rgba(0, 0, 0, .15);
	cursor:pointer;

}
.uploadBox > li h4.smallSbjt {
	margin:0;
}
.uploadBox > li button {
	position:absolute;
	top:50%;
	right:0.5rem;
	width:40px;
	height:40px;
	transform:translateY(-50%);
	background:url(/images/sp/iconUpload.svg) no-repeat center center / 32px , #31B264;
	border-radius:9px;
}
.whiteBox {
	width:100%;
	height:calc(100vh - 265px);
	background:#fff;
	padding:1rem;
	border-radius:10px;
	box-shadow:0 0 15px 0 rgba(0,0,0,.15);
}
.whiteBox > .flexBetween {
	margin-bottom:0.5rem;
}
.foodWrap .tableBox {
	max-height:calc(100vh - 416px);
	overflow:auto; 
	background:#fafafa;
	border-top:2px solid #464646;
}
.foodWrap .tableBox thead th {
	position:sticky;
	top:0;
}
.foodWrap .tableBox p.noData {
	height:calc(100vh - 430px);
	color:#676767;
	line-height:calc(100vh - 430px);
}
.foodWrap .listTable {
	width:100%;
	table-layout:fixed;
}
.foodWrap .listTable thead th {
	background:#f5f5f5;
	color:#464646;
	padding:0.75rem 0.25rem;
}
.foodWrap .listTable tbody td {
	padding:0.75rem 0.25rem;
	border-bottom:1px solid #ececec;
	text-align:center;
}
.foodWrap .listTable tbody td input[type=text] {
	width:90%;
	height:30px;
	margin:0 auto;
	display:block;
	border:1px solid #ccc;
	border-radius:5px;
	padding:0.5rem;
}
.foodWrap .tableBox + .flexEnd {
	margin-top:0.5rem;
}
.foodWrap .tableBox + .flexEnd button {
	margin-left:0.5rem;
}
.foodWrap .tableBox + .flexEnd > div {
	margin-left:1rem;
	display:flex;
	align-items:center;
}
.foodWrap .tableBox + .flexEnd > div p {
	margin-right:0.25rem;
}
.foodWrap .tableBox + .flexEnd > div input[type=text] {
	height:40px;
	background:#f5f5f5;
	padding:0 0.5rem;
	border:none;
	border-radius:5px;
}
.foodWrap .flexBetween .btnLgray:after {
	content:"";
	display:inline-block;
	width:24px;
	height:24px;
	background:url(/images/sp/iconFilter.svg) no-repeat center center / contain; 
	vertical-align:middle;
	margin:-2px 0 0 5px;
}


/*파일업로드 팝업*/
.filePop .desc li {
	background:#f5f5f5;
	padding:0.75rem;
	border-radius:5px;
	text-align:center;
}
.filePop .fileBox {
	position:relative;
	margin-top:2rem;
}
.filePop .fileBox label {
	position:relative;
	width:100%;
	height:40px;
	display:block;
	background:#fafafa;
	line-height:38px;
	padding:0 0.5rem;
	border:1px solid #e1e1e1;
	border-radius:5px;
	cursor:pointer; 
}
.filePop .fileBox label:before {
	content:"";
	position:absolute;
	top:50%;
	right:45px;
	width:26px;
	height:26px;
	background:url(/images/sp/iconUploadBk.svg) no-repeat center center / contain;
	transform:translateY(-50%);
	opacity:.4;
}
.filePop .fileBox button {
	position:absolute;
	top:0;
	right:0;
	border-radius:0 5px 5px 0;
}
.filePop .dragBox {
	position:relative;
	margin-top:1rem;
	width:100%;
	height:300px;
	background:#eaf5ff;
	border:1px dashed #a0b6cb;
	border-radius:5px;
}
.filePop .dragBox .default {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.filePop .dragBox .default img {
	width:120px;
	display:block;
	margin:0 auto;
}
.filePop .dragBox .default p {
	font-size:14px;
	color:#565656;
	text-align:center;
}
.filePop .popBody .flexEnd {
	margin-top:0.5rem;
}
.filePop .popBody .flexEnd .formDown {
	background:#0985F8;
	color:#fff;
	border-radius:5px;
	padding:0.5rem 1rem;
}
.filePop .popBody .flexEnd .formDown:after {
	content:"";
	display:inline-block;
	width:18px;
	height:18px;
	background:url(/images/sp/iconForm.svg) no-repeat center center / contain;
	margin:0 0 -2px 10px;
}
.businessTripPop .desc >li:first-child {
	padding-bottom:0.25rem;
}
.businessTripPop .desc >li:last-child {
	padding-top:0.25rem;
}

/*급식비 필터 팝업*/
.filterPop input[type=text] {
	height:40px;
	border:1px solid #ccc;
	border-radius:5px;
}
.filterPop .popSbjt {
	position:relative;
	font-weight:bold;
	margin-bottom:0.5rem;
	background:none;
}
.filterPop .popSbjt:before {
	content:"";
	position:absolute;
	top:-3px;
	left:3px;
	width:6px;
	height:6px;
	background:#43C778;
	border-radius:50%; 
}
.filterPop .contBox {
	padding:1rem 0;
}
.filterPop .oneClick {
	width:48%;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.filterPop .oneClick p {
	width:65px;
	white-space:nowrap;
	flex-shrink:0;
}
.filterPop .oneClick input {
	width:calc(50% - 40px);
	padding:0 0.5rem;
}
.filterPop .oneClick select {
	width:calc(50% - 40px);
	height: 40px;
	padding:0 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
	appearance:none;
	background:url(/images/sp/iconDownArrow.png) no-repeat 95% center / 8px, #fff;
}
.filterPop .flexBetween  {
	align-items:flex-start;
}
.filterPop .flexBetween > div[class$=t] {
	width:48%;
}
.filterPop .ui-datepicker {
	width:100%;
}
.filterPop .ui-datepicker .ui-state-active {
	position:relative;
}
.filterPop .ui-datepicker .ui-state-active:before {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:37px;
	height:30px;
	border-radius:10px;
	background:rgba(255, 0, 0, .25);
	mix-blend-mode:multiply;
}
.filterPop .ui-datepicker .ui-datepicker-today {
	padding:0 5px;
}
.filterPop .result {
	position:relative;
}
.filterPop .result input {
	width:100%;
	padding-right:3rem;
	padding-left:0.5rem;
}
.filterPop .result .btnCheck {
	position:absolute;
	top:0;
	right:0;
	border-radius:0 5px 5px 0;
}
.filterPop .right > .contBox ul {
	border-radius:5px;
	background:#F9FBFD;
	padding:1rem;
	border:1px solid #DFEAF5;
	height:285px;
	overflow:auto;
}
.filterPop .right > .contBox ul li {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0.5rem 0;
	border-bottom:1px dashed #ccc;
} 
.filterPop .onClickBox {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
.filterPop .onClickBox .dayCheckBox {
	display:flex;
	width:100%;
	margin-bottom:0.25rem;
}
.filterPop .onClickBox .dayCheckBox > input[type=checkbox] {
	position:absolute;
	left:-9999px;
	width:0;
	overflow:hidden;
}
.filterPop .onClickBox .dayCheckBox label {
	display:block;
	margin-right:0.25rem;
	width:36px;
	height:36px;
	background:#dedede;
	font-family:'NotosansKr';
	font-size:16px;
	border-radius:50%;
	text-align:center;
	line-height:36px; 
	color:#767676;
	cursor:pointer;
}
.filterPop .onClickBox .dayCheckBox input[type=checkbox]:checked + label {
	background:#0985F8;
	color:#fff;
}
.filterPop .onClickBox > button {
	background:#e1e1e1;
	color:#767676;
	width:170px;
	height:45px;
	font-size:16px;
	line-height:43px;
	text-align:center;
	border-radius:45px;
}
.filterPop .onClickBox > button.active {
	background:#0985F8;
	color:#fff;
}
.filterPop .toggleBox {
	position:relative;
	width:32.5%;
	display:flex;
	background:#dedede;
	border:1px solid #dadada;
	border-radius:45px;
	z-index:1;
}
.filterPop .toggleBox label {
	letter-spacing:-0.05rem;
	white-space:nowrap;
}
.filterPop .toggleBox.disabled {
	cursor:default;
}
.filterPop .toggleBox.disabled label {
	color:#565656 !important;
}
.filterPop .toggleBox.disabled input:checked + label {
	color:#f1f1f1 !important;
}
.filterPop .toggleBox.disabled .colorBlock {
	background:#888;
}
.filterPop .toggleBox input[type=radio] {
	appearance:none;
	position:absolute;
	left:-9999px;
	width:0;
	height:0;
	overflow:hidden;
}
.filterPop .toggleBox input[type=radio] + label {
	position:relative;
	width:50%;
	height:45px;
	background:transparent;
	color:#767676;
	font-weight:bold;
	text-align:center;
	line-height:45px;
	border-radius:45px;
	cursor:pointer;
	z-index:2;
}
.filterPop .toggleBox input[type=radio]:checked + label {
	color:#fff;
}
.filterPop .toggleBox .colorBlock {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:linear-gradient(106deg, #00c238 0%, #00d451 105.17%);
	border-radius:40px;
	z-index:1;
	transition:.3s;
	box-shadow:0 0 8px 0 rgba(0, 0, 0, .15);
}
.filterPop .toggleBox input#auto:checked ~ .colorBlock {
	left:0;
}
.filterPop .toggleBox input#manual1:checked ~ .colorBlock {
	left:50%;
}
.filterPop .toggleBox input#auto2:checked ~ .colorBlock {
	left:0;
}
.filterPop .toggleBox input#manual2:checked ~ .colorBlock {
	left:50%;
}
.filterPop .toggleBox input#auto3:checked ~ .colorBlock {
	left:0;
}
.filterPop .toggleBox input#manual3:checked ~ .colorBlock {
	left:50%;
}
.filterPop .flexEnd .btnLgray {
	width:120px;
	margin-right:0.5rem;
}
.guidePop {
	max-width:80%;
}
.guidePop .popBody {
	height:75vh;
	height:75dvh;
	background:#f2f3f5;
	overflow:auto; 
}
.guidePop .guideTab {
	display:flex;
	align-items:center;
	margin:1.5rem 0; 
	border-bottom:1px solid #bababa;
	border-left:1px solid #bababa; 
}
.guidePop .guideTab > li {
	position:relative;
	width:260px;
	height:50px;
	background:#dbdbdb;
	color:#767676;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
	border-right:1px solid #bababa;
	border-top:1px solid #bababa;
	cursor:pointer;
}
.guidePop .guideTab > li.active {
	background:#f2f3f5;
	color:#262626;
	border-top:1px solid #0985F8;
}
.guidePop .guideTab > li.active:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4px;
	background:#0985F8;
}
.guidePop .guideTab > li.active:after {
	content:"";
	position:absolute;
	bottom:-3px;
	left:0;
	width:100%;
	height:5px;
	background:#f2f3f5;
}
.guidePop .popBody img {
	width:100%;
	height:auto;
	display:block;
	margin-bottom:1rem;
	border-radius:5px;
}
.guidePop .desc {
	background:#fff;
	margin:0.5rem 0 3rem 0;
	padding:1rem;
	border-radius:5px;
}
.guidePop .desc:last-of-type {
	margin-bottom:0;
}
.guidePop .desc > h5 {
	font-weight:bold;
	color:#363636;
	margin-bottom:0.25rem;
	background:transparent !important;
}
.guidePop .desc > p {
	padding:0.5rem 0;
	color:#464646;
	font-weight:400;
	text-indent:0.5rem;
	border-bottom:1px dashed #dedede;
}
.guidePop .desc > p.noLine {
	border-bottom:none;
}
.guidePop .desc > p:last-child {
	border-bottom:none;
}
.guidePop .desc > p span {
	color:#0985F8;		
}
.guidePop .desc h5:before {
	content:"";
	display:inline-block;
	width:7px;
	height:7px;
	background:#0985F8;
	border-radius:50%;
	margin:0 0.25rem 0.2rem 0;
}
/*로딩스피너*/
.loading {
	position:fixed;
	top:calc(50% - 25px);
	left:calc(50% - 25px);
	display: inline-block;
	width: 50px;
	height: 50px;
	background:transparent !important;
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
	z-index:999999;
} 
 @keyframes spin {
	to { -webkit-transform: rotate(360deg); }
	 }
 @-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); }
	 }