@charset "utf-8";

#wrap  {
	background: #fff;
}

.container {
	display: flex;
	margin: 0 auto;
	padding-bottom: 180px;
}

.content {
	margin-left: 32px;
	flex-grow: 1; /* 남은 영역을 차지 */
	padding-top: 24px;
}

.side-menu {
	top: 0;
	width: 203px;
	height: 100%;
	display: block;
	flex-shrink: 0; /* 사이즈 고정 */
}

.side-menu .menu-title {
	width: 100%;
	height: 85px;
	background: url('../../common/images/side-menu-title-bg.png') no-repeat
		center/cover;
	display: flex;
	padding-left: 20px;
	align-items: center;
	letter-spacing: -0.68px;
	margin: 24px 0 16px 0;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.side-menu .menu-items {
	display: flex;
	flex-direction: column;
}

.side-menu .menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	cursor: pointer;
	font-size: 15px;
	color: #888787;
	letter-spacing: -0.22px;
	border: 1px #E1E1E2 solid;
	margin-bottom: 8px;
}

.side-menu .menu-item:hover, .side-menu .menu-item.on {
	color: #14237f;
	border: 1px #14237f solid;
	font-weight: bold;
	background-color: #f2f4ff;
}

.side-menu .menu-item .arrow-btn {
	width: 8px;
	height: 12px;
	background: url('../../common/images/side-menu-arrow.png') no-repeat;
}

.side-menu .menu-item:hover .arrow-btn, .side-menu .menu-item.on .arrow-btn {
  	background: url('../../common/images/side-menu-arrow-on.png') no-repeat;
}

.content-title-wrap {
	padding: 20px 32px 15px 32px;
	background-image: url('../images/content-title-wrap-bg-1.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	object-fit: contain;
	border-radius: 8px;
	margin-bottom: 16px;
}

.content-title-wrap .right-arrow {
	display: inline-block;
	border-bottom: 8px solid transparent;
	border-top: 8px solid transparent;
	border-left: 10px solid #14237f;
	border-right: 8px solid transparent;
}

.content-title-wrap .title {
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -0.5px;
	margin-bottom: 8px;
	color: #14237f;
}

.content-title-wrap .description {
	font-size: 14px;
	line-height: 24px;
}

.content-intro-wrap {
	display: inline-block;
	width: 100%;
	background-color: #f7fafe;
	padding: 16px 32px;
	text-align: left;
	font-size: 14px;
	border-radius: 4px;
}

.content-intro-wrap .header {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.content-intro-wrap .title {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 8px;
}

.content-intro-wrap p {
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	margin: 8px 0 0;
}

.content-intro-wrap li {
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	margin: 8px 0 0;
	color: #6b6b6b;
}

.content-intro-wrap table {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #dfdfdf;
    text-align: center;
    font-size: 16px;
}

.content-intro-wrap table th {
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    padding: 9px 10px;
}

.content-intro-wrap table td {
    border: 1px solid #ddd;
    padding: 19px 10px;
    background-color: #fff;
}

.info-text {
	color: #005fae;
	font-size: 14px;
}


/* form */
.form-container {
	display: flex;
	flex-direction: column;
}

.form-container .row {
	display: flex;
	flex-wrap: wrap;
	border: solid 0.3px #97979742;
}

.form-container .row:not(:last-child) {
	border-bottom: none;
}

.form-container .column {
	display: flex;
	align-items: center;
	flex: 1 1 calc(25% - 1rem);
}

.form-container .column label.th {
    width: 174px;
    height: 100%;
    background-color: #f7fafe;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.form-container .item-box {
	flex: 1;
	background: #fff;
	height: 100%;
	min-height: 48px;
	position: relative;
}

.form-container .item-box.disabled {
	background: #e1e1e2;
	color: #212121;
}

.form-container .item-box .input-box, .form-container .item-box .select-box{
	position: relative;
    height: 100%;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-container .item-box .radio-box {
	position: relative;
    height: 100%;
    padding: 10px 16px;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.form-container .item-box .radio-box + .parsley-errors-list {
    padding-left: 12px;
    padding-bottom: 8px;
}

.form-container label.th span {
    position: relative;
}

.form-container label.th span.btn-span {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
}

.form-container .rowspan .column {
	flex-direction: column;
	flex: 1;
	align-items: normal;
}

.form-container .rowspan .label-column {
	max-width: 174px;
}

.form-container .rowspan .rowspan-column {
	flex-direction: row;
	flex-grow: 1;
}

.form-container .rowspan .rowspan-column label.th {
	display: flex;
	align-items: center;
	height: 100%;
}

.form-container .rowspan .item-box:not(:first-child), .form-container .rowspan label.th:not(:first-child) {
	border-top: solid 0.3px #97979742;
}

.form-container input {
	border: none;
	height: 100%;
	min-height: 28px;
	font-size: 15px;
}

.form-container input::placeholder {
	color: #666666;
}

.form-container input.input-disabled {
	background-color: #fff;
}

.form-container .item-box.disabled input[type="text"] {
	background: #e1e1e2;
	color: #212121;
}

.form-container .item-box.disabled input::placeholder {
	color: #212121;
}

.form-container .file-upload-info {
  padding-top: 8px;
  border-top: solid 0.3px #97979742;
}

.btn-wrap {
	margin: 20px 0 20px 0;
	text-align: center;
}

.agreement-wrap {
	font-size: 16px;
  	font-weight: 500;
  	text-align: right;
}

/* category title */

div.category {
	display: flex;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding: 20px 20px 20px 0;
	align-items: center;
	text-align: left;
    color: #14237f;
}

div.category .bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #14237f;
    border-radius: 50%;
    margin-right: 8px;
}

div.category .control-btn {
	display: none;
}

.basic-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 10px;
	font-size: 14px;
}

.basic-table tr{
	height: 35px;
}

.basic-table th {
	background-color: #d6dce1;
	color: #4e5a80;
	font-weight: normal;
}

.basic-table th,
.basic-table td {
	text-align: center;
}

.basic-table td.first-td {
	background-color: #d6dce1;
}

.basic-table td {
	border: solid 2px #f3f5f7;
}

.basic-table .table-btn {
	width: 70px;
	height: 26px;
	font-size: 14px;
}

/*컬러 다른 테이블*/
.basic-table.color tbody tr:nth-child(odd) {
}

.basic-table.color tbody tr:nth-child(even) {
	background-color: #f3f5f7;
}

.basic-table.color tbody tr:nth-child(odd) td.total {
	background-color: #FFF9EF;
}

.basic-table.color tbody tr:nth-child(even) td.total {
	background-color: #f5ebda;
}

/*테이블 페이징*/
.paging-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}

.paging-wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: 14px;
	color: #343134;
	text-align: center;
	margin: 4px;
}

.paging-wrap a.selected {
	border-radius: 3px;
	background-color: #e2e2e2;
}

.paging-wrap a.paging-side.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.paging-wrap .first,
.paging-wrap .prev,
.paging-wrap .next,
.paging-wrap .last {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.paging-wrap .first {
	background: url(../images/btn-page-first.svg);
}

.paging-wrap .prev {
	background: url(../images/btn-page-prev.svg);
}

.paging-wrap .next {
	background: url(../images/btn-page-next.svg);
}

.paging-wrap .last {
	background: url(../images/btn-page-last.svg);
}

@media ( max-width : 1024px) {
	.container {
		flex-direction: column;
	}

	.side-menu {
		display: none;
	}

	.content {
		margin-left: 0;
		width: 100%;
        padding: 17px 16px 0;
	}

	.content-title-wrap {
		padding: 15px 12px 14px 12px;
		background-image: url('../images/content-title-wrap-bg-2.png');
		border-radius: 8px;
		line-height: 22px;
		margin-bottom: 8px;
	}

	.content-title-wrap .title {
		font-size: 16px;
	}

	.content-title-wrap .right-arrow {
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-left: 8px solid #14237f;
		border-right: 6px solid transparent;
	}

	.content-intro-wrap {
		padding: 12px;
	}

	.content-intro-wrap .header {
		font-size: 15px;
	}

	.content-intro-wrap .title {
		font-size: 14px;
	}

	.content-intro-wrap table {
	    font-size: 12px;
	}

	.form-container .column {
		flex: 1 1 100%;
	}

	.form-container .column label.th {
		width: 101px;
        font-size: 14px;
        padding: 3px 8px;
	}

	.form-container div:not(.rowspan) .column:not(:first-child) {
		border-top: solid 0.3px #97979742;
	}

	.form-container .half-column {
		width: calc(( 100% - 101px)/2);
	}

	.form-container .rowspan .label-column {
		max-width: 101px;
	}

	.form-container .sub-column {
		display: none;
	}

	.form-container.collapsed div.category .control-btn {
		background: url('../images/plus.png') no-repeat;
	}

	.form-container.collapsed .content-wrap {
		display: none;
	}

	.form-container input {
		font-size: 14px;
	}

	.line-container {
		margin-bottom: 16px;
	}

	.line.fixed {
	  	width: 101px;
	}

    div.category {
      font-size: 16px;
      padding: 10px 10px 10px 0;
    }

	/* 처리현황/공사비 테이블*/
	.status-form {
		width: 100%;
	}

	.form-group {
		width: 100% !important;
	}

	.form-group label {
		width: 101px !important;
	}

	.submit-button {
		width: 100% !important;
	}

	.form-wrap {
		margin: 16px 0 40px !important;
	}

	.responsive-table {
		display: block;
	}

	.responsive-table thead {
		display: none;
	}

	.responsive-table tbody{
		box-sizing: border-box;
		display: block;
	}

	.responsive-table tr {
		display: block;
		margin-bottom: 20px;
		height: auto;
		border: solid 0.3px #c8ccd8;
	}

	.responsive-table td {
		display: block;
		height: 35px;
		border: none;
		line-height: 32px;
		border-bottom: solid 0.3px #c8ccd8;
	}

	.responsive-table td:nth-child(odd) {
		background-color: #ffffff;
	}

	.responsive-table td:nth-child(even) {
		background-color: #f3f5f7;
	}

	.responsive-table td:last-child {
		border: none;
	}

	.responsive-table td:not(.no-data)::before {
		content: attr(data-label); /*data-label을 가상요소 표출*/
		float: left;
		background-color: #d6dce1;
		color: #4e5a80;
		height: 100%;
		width: 30%;
		min-width: 101px;
		border: none;
	}
}