@charset "UTF-8";

.calcWrap {
	position:relative;
	max-width:1200px;
	width:100%;
	margin:40px auto;
	font-family:'NotosansKr', sans-serif;
	font-size:14px;
	color:#222;
}
.calcWrap:after {
	content:"";
	display:block;
	clear:both;
}
.calcWrap .btnHome {
	position:absolute;
	top:-20px;
	right:0;
}
.calcWrap .btnHome:hover {
	text-decoration:underline;
}
/*페이지내 버튼*/
.calcWrap [class*="btn"] {
	cursor:pointer;
	vertical-align:middle;
}
.calcWrap .btnSearch {
	width:30px;
	height:30px;
	background:url(/images/sp/iconSearch.png) no-repeat center center / 14px, #204C97;
	border-radius:50%;
}
.calcWrap .btnOrange {
	width:30px;
	height:30px;
	color:#fff;
	font-size:20px;
	background:#FAA747;
	border-radius:50%;
}
.calcWrap .btnGray {
	width:30px;
	height:30px;
	color:#fff;
	font-size:20px;
	background:#888;
	border-radius:50%;
}
.calcWrap .btnSort {
	width:50px;
	height:30px;
	color:#215eb1;
	background:#fff;
	border:1px solid #286ED7;
	font-size:14px;
	border-radius:5px;
}
.calcWrap .btnMove {
	width:140px;
	height:30px;
	background:#286ED7;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-weight:100 !important;
	border-radius:5px;
}
.calcWrap .btnExcel {
	width:140px;
	height:30px;
	background:#2D9C2A;
	color:#fff;
	border-radius:5px;
}
.calcWrap .btnBack {
	max-width: 120px;
    width: 100%;
    display: block;
    margin: 30px auto 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background:linear-gradient(90deg, #858585, #b9b8b8);
    padding: 8px 15px;
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.calcWrap .btnsearchNew {
	max-width:60px;
	width:100%;
	height:30px;
	background:url(/images/sp/iconSearch.png) no-repeat 13% center / 23% #7391e9;
	border-radius:30px;
	border:none;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-indent:12px;
	cursor:pointer;
}
.calcWrap .btnMove img, .calcWrap .btnExcel img {
	width:14px;
	vertical-align:middle;
	margin-left:5px;
}
.calcWrap .btnCalc {
    max-width: 120px;
    width: 100%;
    display: block;
    margin: 30px auto 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(90deg, #F6743C, #FFB23E);
    padding: 8px 15px;
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.calcWrap .buttonRightBox {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}
.calcWrap .buttonCenterBox {
	max-width:280px;
	margin:40px auto;
}
.calcWrap .buttonCenterBox button {
	float:left;
	margin:0 10px;
}
.calcWrap .buttonRightBox .buttonBox {
	margin:20px 0;
}
.calcWrap .flexBox {
	display:flex;
	align-items:center;
}
.calcWrap .flexBetween {
	display:flex;
	justify-content:space-between;
}
.calcWrap .menualPop {
	width:60px;
	height:30px;
	background:#00b87c;
	color:#fff;
	border-radius:15px;
	vertical-align:middle;
	font-weight:bold;
	margin-right:0.25rem;
	cursor:pointer;
}
.calcWrap input[type=text], .calcWrap input[type=date] , .calcWrap select {
	height:30px;
	padding:0 5px;
	border:1px solid #dbdbdb;
	border-radius:5px;
}
.calcWrap input[type=file] {
	position:absolute;
	left:-9999px;
	appearence:none;
	font-size:0;
}
.calcWrap .dateBox {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin-left:-18px;
	margin-bottom:5px;
}
.calcWrap .dateBox button, .calcWrap .dateBox label {
	margin-right:5px;
}
.calcWrap .dateBox p {
	margin:0 5px;
}
.calcWrap .dateBox .btnSearch {
	margin-left:5px;
}
.calcWrap h3 {
	position:relative;
	font-size:24px;
	font-weight:bold;
	width:fit-content;
	margin:0 auto;
}
.calcWrap h3:before {
	content:"";
	position:absolute;
	bottom:47px;
	width:100%;
	height:10px;
	background:#ffdc4f;
	z-index:-1;
}
.calcWrap h3:after {
	content:"";
	display:block;
	width:2px;
	height:40px;
	background:rgba(0,0,0,.4);
	margin:10px auto 10px;
}
.calcTable{
	width:100%;
	table-layout:fixed;
	text-align:center;
}
.calcTable input[type=text] {
	width:90%;
}
.calcTable input.percent {
	width:45px;
	margin-right:5px;
}  
.calcTable thead {
	position:relative;
	box-shadow:0 4px 3px rgba(0,0,0,0.12);
}
/* .calcTable thead:before {
	content:"";
	position:absolute;
	top:0;
	left:-20px;
	width:20px;
	height:100%;
	background:#215eb1;
	border-radius:100px 0 0 100px;
}
.calcTable thead:after {
	content:"";
	position:absolute;
	top:0;
	right:-20px;
	width:20px;
	height:100%;
	background:#215eb1;
	border-radius:0 100px 100px 0;
} */
.calcTable thead tr {
	background:#215eb1;
}

.calcTable thead th {
	color:#fff;
	padding:15px 10px;
	text-align:center;
}
.calcTable thead th h4 {
	font-weight:bold;
	background:none !important;
	color:#fff !important;
}
.calcTable tbody th {
	padding:15px 10px;
}
.calcTable tbody td {
	color:#222;
	padding:15px 10px;
	vertical-align:middle;
}
.calcTable tbody tr {
	border-bottom:1px dashed #dbdbdb;
}
.calcTable tbody tr:last-child {
	border-bottom:1px solid #dbdbdb;
}
.calcTable tbody tr:nth-child(odd) {
	background:#f2f6fd;
}
.calcTable tbody th {
	vertical-align:middle;
}
.calcTable tbody th h4 {
	display:inline-block;
	padding:1px 7px;
	color:#204C97;
	font-size:14px;
	background:#fff;
	border:1px solid #204C97;
	border-radius:5px;
	line-height:20px;
}
.calcTable .mx-datepicker {
	width:180px !important;
}
.calcTable .mx-icon-calendar {
	right:18px;
}
.calcTable tfoot tr {
	border-bottom:1px solid #dbdbdb;
}
.calcTable tfoot th h4 {
	font-weight:bold;
}
.calcTable tfoot td {
	font-size:16px;
	font-weight:bold;
	color:#222;
	padding:15px 10px;
}
.calcTable tfoot td label {
	margin-right:5px;
}
/* 사업정산 간편산출결과 최종반납금액 테이블 */
.calcResultTable tfoot tr {
	border-bottom:0;
}
.calcResultTable tfoot tr:last-child td {
	background:#f2f6fd;
	border-bottom:1px solid #dbdbdb;
}
.calcResultTable tfoot th {
	color:#fff;
	background:#215eb1;
	padding:15px 10px;
}
.calcResultTable tfoot th.noBg {
	background:#fff;
}
.calcResultTable tfoot th.bgSky {
	background:#f2f6fd;
}
.calcResultTable tfoot td, .calcResultTable tfoot th {
	border-bottom:1px dashed #dbdbdb;
}
.calcResultTable tfoot th h4 {
	color:#204C97;
	font-size:14px;
	font-weight:bold;
}
.calcResultTable tfoot th.noBorder h4 {
	color:#fff;
	background:#215eb1;
	border:none;
	line-height:1;
}
.calcResultTable tfoot th.totalBox h4 {
	display: inline-block;
	height:30px;
    padding:0 10px;
    color: #204C97;
    font-size: 14px;
    background: #fff;
    border: 1px solid #204C97;
    border-radius: 5px;
    line-height:27px;
}
.noDeco {
	border-bottom:0 !important;
	background:#fff !important;;
}

/*지출내역*/
.calcWrap .selectTop {
	align-items:flex-end;
	margin:20px 0 10px 0;
}
.calcWrap .selectTop > div {
	width:calc(25% - 20px);
}
.calcWrap .selectTop > div select {
	width:100%;
}
/*로딩 스피너*/
.loading {
  position:fixed;
  top:calc(50% - 25px);
  left:calc(50% - 25px);
  display: inline-block;
  width: 50px;
  height: 50px;
  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;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  z-index: 999;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}


/*지출내역 셀렉트박스 화살표*/
.calcSpend select {
    background:url(../images/sp/iconDownArrow.png) no-repeat 96% center / 8px;
    appearance:none;
}
.btnSpendAdd {
	max-width: 120px;
    width: 100%;
    display: block;
    margin: 30px auto 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background:linear-gradient(90deg, #2abd87, #34dd80);
    padding: 8px 15px;
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}

 /* IE10+ */
@media screen and (min-width:0\0) {
	 .calcWrap h3 {
		position:relative;
		display:inline-block;
		left:50%;
		transform:translateX(-50%);
		font-size:24px;
		font-weight:bold;
		width:auto;
		margin:0 auto;
		text-align:center;
	}
	.calcWrap h3::before {
		content:"";
		display:inline-block;
		position:absolute;
		bottom:47px;
		width:100%;
		height:10px;
		background:#ffdc4f;
		z-index:-1;
	}
	.calcWrap h3::after {
		content:"";
		display:block;
		width:2px;
		height:40px;
		background:rgba(0,0,0,.4);
		margin:-2px auto 10px;
	}
	.calcTable{
		width:100%;
		table-layout:fixed;
		text-align:center;
	}
	.calcTable input[type=text] {
		width:90%;
	}
	.calcTable input.percent {
		width:45px;
		margin-right:5px;
	}  
	.calcTable thead {
		position:relative;
		box-shadow:0 4px 3px rgba(0,0,0,0.12);
	}
	.calcTable thead:before {
		display:none;
	}
	.calcTable thead:after {
		display:none;
	}
	.calcWrap .dateBox {
		margin-left:0;
	}
}

/*충남넷 충돌부분 수정*/
/************************************ 올담 css 충돌 수정 *************************************/
.s_con > header {
	box-shadow:none !important;
}
.calcTable thead th h4 {
	color:#fff !important;
	background:transparent !important;
}
.calcWrap .menualPop {
	width: 60px;
    height: 30px;
    background: #00b87c;
    color: #fff;
    border-radius: 15px;
    vertical-align: middle;
    font-weight: bold;
    margin-right: 0.25rem;
    cursor: pointer;
}
.calcWrap .flexBetween {
	display:flex;
	justify-content:space-between;
}
 /****************************************** IE *****************************************/
@media screen and (min-width:0\0) {
	.fareTable thead::before {
		display:none;
	}
}
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
 .fareTable thead::before {
		display:none;
	}
 .fareTable thead::after {
		display:none;
	}
 #paging > div {
 		background:transparent;
 }
 .fareWrap .selectBox li .placeName {
 		bottom:-5px;
 }
}