@charset "utf-8";

#mainContents {
  margin-left: 250px;
  padding: 20px;
}

main {
	padding-bottom: 0;
}

footer {
	position: inherit;
	margin-top: 0;
}

label.category {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  margin: 30px 0 15px 0;
  text-align: left;
}

label.category.subject {
	font-size: 20px;
	margin-top: 10px;
}

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

hr.border {
  display: block;
  height: 10px;
  border-bottom: 1px solid #f4f4f4;
}

.required::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #ff4207;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: text-top;
}

.btn {
	width: 220px;
  height: 42px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #858585;
  border: none;
}

.btn.btn-blue {
	background-color: #0254a2;
}

.btn.btn-navy {
	background-color: #344a63;
}

.intro {
	display: inline-block;
	width: 100%;
	background-color: #ecf1f7;
	padding: 16px 22px;
	text-align: left;
	font-size: 14px;
	border-radius: 34px;
}

.intro i.icon-intro {
	background: url(../images/icon-intro-36px.png) no-repeat;
	display: inline-block;
  width: 36px;
  height: 36px;
  float: left;
  margin-right: 15px;
}

.intro .line-1 {
	margin-bottom: 5px;
}

.intro .line-2 {
	font-weight: bold;
}

.intro p.line {
	line-height: 35px;
}

/* parsley */
.parsley-required,
.parsley-telformat {
  color: red;
  font-weight: bold;
  text-align: left;
  margin-top: 3px;
}

.parsley-required::before,
.parsley-telformat::before {
  content: '※ ';
}

/* table */
.table {
  display: table;
  width: 100%;
  border-right: 1px solid #d8d8d8;
  margin-bottom: 20px;
  font-size: 15px;
}

.table .thead {
  display: table-header-group;
}

.table .tbody {
  display: table-row-group;
}

.table .tbody .tr {
  display: table-row;
  width: 100%;
}

.table .tbody .tr.border-top .th,
.table .tbody .tr.border-top .td {
	border-top: 1px solid #d8d8d8;
}

.table .tbody .tr.border-bottom .th,
.table .tbody .tr.border-bottom .td {
  border-bottom: 1px solid #d8d8d8;
}

.table .thead.border-top .th {
	border-top: 1px solid #d8d8d8;
}

.table .th,
.table .td {
  display: table-cell;
  padding: 8px;
}

.table .td {
  width: 299px;
}

.table .th {
  background-color: #f0f0f0;
}

.table .th label {
  display: inline-block;
  width: 103px;
  font-weight: bold;
}

.table .tbody .td label {
  display: inline-block;
  width: auto;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.table .tbody .tr input {
  display: inline-block;
  font-size: 14px;
}

.table .tbody .tr input.full {
  width: 100%;
}

.table .tbody .tr input.sm {
  width: 100px;
}

.table .tbody .tr select {
  width: 100%;
}

.table.custom {
  margin: -1px 0 -1px 0;
}

.table.custom .tr .td {
  width: 748px;
  text-align: left;
}

.table.custom.addr .td {
  width: 598px;
}

.table.custom.addr .th.rowspan {
  border-bottom: none !important;
  position: relative;
}

.table.custom.addr .th.empty {
  border-bottom: none !important;
}

.table.custom.addr .th.rowspan label {
  position: absolute;
  left: 28px;
  bottom: -10px;
}

.table.custom.addr .th.rowspan #searchAddr {
  position: absolute;
  left: 24px;
  bottom: -45px;
  width: 100px;
  height: 30px;
}

.table.type-1 .tr:not(:last-child) .th,
.table.type-1 .tr:not(:last-child) .td {
  border-bottom: 1px solid #d8d8d8;
}

.table.type-1 .th {
  border-right: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
  width: 150px;
}


.table.type-2 .th,
.table.type-2 .td {
  border-bottom: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
  padding: 5px;
}

.table.type-2 .td {
  vertical-align: middle;
}

.table.type-2 .td p {
  margin: 3px 0 3px 0;
}

input[type="text"] {
	border: none;
	border-bottom: 1px solid #d8d8d8;
	border-radius: 0;
	height: 25px;
}

input[type="text"]:disabled {
	background-color: #fff;
	opacity: 1;
  -webkit-text-fill-color: inherit;
}

.table select {
	border-radius: 0;
	border: 1px solid #d8d8d8;
	height: 25px;
	background-color: #fff;
}

form[name="searchForm"] .table .th {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}

.result-body {
  display: none;
  margin-top: 30px;
}

.result-body .total-count {
  margin-bottom: 8px;
  text-align: left;
}

.result-body .total-count span {
  color: #4692e9;
  font-weight: bold;
  margin: 0 3px 0 5px;
}

.result-body .table {
  border-bottom: none;
}

.result-body .table .tr:hover {
	cursor: pointer;
	background-color: #abeafb;
}

.result-body .table .th,
.result-body .table .td {
	height: 40px;
  border-left: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  vertical-align: middle;
}

.result-body .table .td.hide {
	display: none;
}

.result-body .table p.confirmation {
	width: max-content;
	color: #0254a2;
	text-decoration: underline;
	cursor: pointer;
	margin: auto;
}

.result-body .table p.confirmation:hover {
	font-weight: bold;
}

.apply-document {
	text-align: left;
}

.apply-document p {
	margin-bottom: 10px;
}


p.depth-1 {
  text-indent: 20px;
  font-size: 18px;
  font-weight: bold;
}

p.depth-2 {
  text-indent: 40px;
  font-weight: bold;
  font-size: 18px;
}

p.depth-3 {
  text-indent: 60px;
  font-size: 16px;
}

.apply-process .subject {
	text-align: left;
	margin-bottom: 3px;
	text-indent: 20px;
  font-size: 18px;
  font-weight: bold;
}

.apply-process .next {
	text-align: left;
  margin-bottom: 10px;
  text-indent: 35px;
  font-size: 15px;
}

.apply-process .step-wrap {
	padding: 10px 20px 0 20px;
	text-align: left;
}

.apply-process .step {
	display: inline-block;
	border: 2px solid #d8d8d8;
	width: 29.3%;
	font-size: 16px;
	border-radius: 10px;
}

.apply-process .line {
	margin-bottom: 20px;
}

.apply-process .arrow {
	display: inline-block;
	position: relative;
	width: 5%;
}

.apply-process .arrow p {
	position: absolute;
	top: -27px;
	left: 15px;
}

.apply-process .arrow.mobile {
	display: none;
}

.apply-process .line-2 .arrow p {
  top: -39px;
}

.apply-process .step .name {
  font-weight: bold;
  border-bottom: 1px solid #d8d8d8;
  height: 30px;
  line-height: 30px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #f0f0f0;
}

.apply-process .line-2 .step .name {
	height: 50px;
	line-height: 50px;
}

.apply-process .step .department {
	height: 50px;
	line-height: 50px;
}

.step-wrap .step,
.step-wrap .arrow {
	text-align: center;
}

.guide {
	display: inline-block;
  border: solid 2px #dcdcdc;
  padding: 20px 40px 20px 50px;
  width: 100%;
  margin: auto;
  margin-bottom: 70px;
}

.guide p {
  text-align: left;
  text-indent: -10px !important;
  line-height: 20px;
  margin: 0;
  font-size: 13px;
}

.guide p::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #4692e9;
  margin: 0 8px 3px 0;
}

.guide .agreement-wrap {
  margin-top: 12px;
}

.guide #agreement {
	display: none;
}

.table.type-1 label,
label[for="agreement"] {
	display: inline-block;
	width: 92px;
	font-size: 15px;
  cursor: pointer;
}

.guide #agreement + label {
	margin-left: -15px;
}

.guide #agreement + label::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #dcdcdc;
  margin-right: 5px;
  float: left;
}

.guide #agreement + label span {
  display: inline-block;
  margin-top: 1px;
}

.guide #agreement:checked + label::before {
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3.4 3.7'%3E%3Cpath fill='%230254A2' d='m3.0428 0.77-1.4785 1.7246-0.63281-0.73828-0.40234 0.34571 1.0352 1.2051 1.8809-2.1914z'/%3E%3C/svg%3E") -1px -1px no-repeat;
	border: 1px solid #0254a2;
}

.guide #agreement:checked + label {
	color: #0254a2;
}

.guide.info {
	width: 870px;
	margin-bottom: 30px;
	text-align: center;
	padding: 15px;
	font-size: 16px;
}

.guide.info .icon-wrap {
	margin-bottom: 10px;
}

.guide.info P {
	text-align: center;
}

.guide.info .or {
	display: inline-block;
	position: relative;
	width: 20px;
}

.guide.info .or p {
	position: absolute;
	bottom: 17px;
  left: 15px;
}

.guide.info i {
	display: inline-block;
	width: 56px;
	height: 56px;
	margin: 0 25px 0 25px;
}

.guide.info p::before {
	display: none;
}

.guide.info i.office { background-image: url(../images/icon-office.png); }
.guide.info i.internet { background-image: url(../images/icon-internet.png); }
.guide.info i.fax { background-image: url(../images/icon-fax.png); }

#confirmationDialog label {
	display: block;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 10px 0;
  text-align: left;
}

#confirmationDialog input[type="text"] {
	width: 100%;
	margin-bottom: 0;
  border: none;
}

#confirmationDialog .th {
	width: 100px;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
}

#confirmationDialog .th,
#confirmationDialog .td {
	vertical-align: middle;
	border-bottom: 1px solid #dcdcdc;
}

#confirmationDialog .footer {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: 55px;
}

#confirmationDialog .footer p.rctYmd {
	font-size: 16px;
	margin-bottom: 10px;
}

#confirmationDialog .footer p.confirmor {
	font-size: 18px;
	font-weight: bold;
}

#confirmationDialog .table .th {
  background-color: #ecf1f7;
}

#confirmationDialog label {
  font-size: 15px;
  text-align: center;
}

#confirmationDialog .table.type-1 .th {
  width: 90px;
}

.price-document,
.price-table-wrap {
	text-align: left;
}

.price-table-wrap .table-wrap {
	padding: 0 40px 0 40px;
}

.table-wrap .price-table {
	display: inline-block;
	float: left;
	margin: 0 15px 0 20px;
}

.table-wrap .price-table table {
	width: 380px;
	border: 1px solid #d8d8d8;
	font-size: 14px;
}

.table-wrap .price-table table th {
	height: 52px;
	background-color: #f0f0f0;
}

.table-wrap .price-table table th,
.table-wrap .price-table table td {
	border-bottom: 1px solid #d8d8d8;
	padding: 10px;
}

.table-wrap .price-table table th:not(.backslash),
.table-wrap .price-table table td {
	text-align: center;
}

.table-wrap .price-table table th:not(:last-child),
.table-wrap .price-table table td:not(:last-child) {
	border-right: 1px solid #d8d8d8;
}

.table-wrap .price-table table td:not(:last-child) {
	background-color: #f0f0f0;
}

.table-wrap .price-table label {
	font-size: 16px;
	display: inline-block;
	margin-bottom: 10px;
}

#waterSupplyPrice p:not(.line) {
  margin-bottom: 13px;
}

#waterSupplyPrice p.depth-1,
#waterSupplyPrice p.depth-2,
#waterSupplyPrice p.depth-3 {
	text-indent: 0;
}

#waterSupplyPrice p.depth-1 {
	margin-left: 20px;
}

#waterSupplyPrice p.depth-2 {
  margin-left: 40px;
}

#waterSupplyPrice p.depth-3 {
  margin-left: 60px;
}

#registerDetailDialog label.supply-loc {
	bottom: -30px;
}

.backslash {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="%23d8d8d8" /></svg>');
}

.backslash div {
	text-align: right;
}

div.unit {
	text-align: right;
	margin-top: 5px;
}