/* 헤더 */
.headerFire {
    width:100%;
    height:300px;
    background:url(/images/sp/headerRed.png) no-repeat center bottom / cover;
    padding-top:6rem;
    text-align:center;
    box-sizing:border-box;
}
.headerDisaster {
    width:100%;
    height:300px;
    background:url(/images/sp/headerPurple.png) no-repeat center bottom / cover;
    padding-top:6rem;
    text-align:center;
    box-sizing:border-box;
}
.headerPopul {
    width:100%;
    height:300px;
    background:url(/images/sp/headerBlue.png) no-repeat center bottom / cover;
    padding-top:6rem;
    text-align:center;
    box-sizing:border-box;
}
.headerFire:after {
    content:"";
    display:block;
    width:1px;
    height:180px;
    background:#222;
    margin:30px auto;
}
.headerFire h2.sbjt {
    position:relative;
    display:inline-block;
    font-family:'GmarketSans', sans-serif;
    font-size:54px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    z-index:99;
}
.headerFire h2.sbjt:before {
    content:"";
    position:absolute;
    left:-15px;
    top:-10px;
    width:30px;
    height:30px;
    background:#f9d142e5;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
.headerFire h2.sbjt:after {
    content:"";
    position:absolute;
    left:-6px;
    top:-24px;
    width:30px;
    height:30px;
    background:#d22f2cde;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
.headerDisaster h2.sbjt:before {
    content:"";
    position:absolute;
    left:-15px;
    top:-10px;
    width:30px;
    height:30px;
    background:#f9d142e5;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
.headerDisaster h2.sbjt:after {
    content:"";
    position:absolute;
    left:-6px;
    top:-24px;
    width:30px;
    height:30px;
    background:#4d1ca8f1;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
.headerPopul h2.sbjt:before {
    content:"";
    position:absolute;
    left:-15px;
    top:-10px;
    width:30px;
    height:30px;
    background:#D6ED17;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
.headerPopul h2.sbjt:after {
    content:"";
    position:absolute;
    left:-6px;
    top:-24px;
    width:30px;
    height:30px;
    background:#001AFF;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,.3);
    z-index: -1;
}
/* 콘텐츠 공통*/
input[type=text], input[type=number], select {
    border:1px solid #999;
    border-radius:10px;
    height:34px;
    text-indent:5px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
h3.sbjtR {
    font-size:24px;
    font-weight:bold;
    color:#222;
    margin:2rem 0;
}
h3.sbjtR:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    background:#d22f2cde;
    border-radius:50%;
    margin:0 0 0.35rem 0.35rem;
}
h3.sbjtP {
    font-size:24px;
    font-weight:bold;
    color:#222;
    margin:2rem 0;
}
h3.sbjtP:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    background:#4D1CA8;
    border-radius:50%;
    margin:0 0 0.35rem 0.35rem;
}
h3.sbjtB {
    font-size:24px;
    font-weight:bold;
    color:#222;
    margin:2rem 0;
}
h3.sbjtB:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    background:#001AFF;
    border-radius:50%;
    margin:0 0 0.35rem 0.35rem;
}
h4 {
	background:transparent !important;
}  
.blue {
	color:blue;
}
.red {
	color:red;
}
.orange {
	color:orange;
}
.green {
	color:green;
}
.flexBox {
	display:flex;
}
.contWrap {
	position:relative;
    max-width:1200px;
    width:100%;
    margin:80px auto 0;
    padding:0 10px;
    font-family:'GmarketSans', sans-serif;
}
/* 공통-상단 날짜선택박스 */
.dateSelectBox {
    padding-bottom:2rem;
    border-bottom:1px dashed #dbdbdb;
}
.dateSelectBox + .warning119 {
	padding-top:30px; 
}
.dateSelectBox input[type=text], .dateSelectBox select {
    width:70%;

}
.dateSelectBox select {
    margin-bottom:2rem;
}
.dateSelectBox input[type=checkbox] {
	vertical-align:middle;
}
.contFlexBox {
    display:flex;
}
.contFlexBox > div {
    width:49%;
}
.contFlexBox > div:first-child {
    margin-right:2%;
}
/* .contFlexBox > div.leftP {
	padding-left:100px;
} */
.contFlexBox > div.rightP {
	padding-left:100px;
}
.contFlexBox > div label {
    display:block;
    margin-bottom:0.25rem;
    font-weight:bold;
}
.contFlexBox .right #date {
    margin-top:-6.25rem;
    margin-left:2rem;
}
.contFlexBox .rightP #date {
    margin-top:0;
    margin-left:-2rem;
}
.ui-datepicker-today {
	position:relative;
}
.ui-datepicker-today a {
	background:transparent !important;
}
.ui-state-active {
	position:relative;
	z-index:99;
}
.ui-state-active:after {
	content:"";
	position:absolute;
	top:calc(50% - 16px);
	left:calc(50% - 16px);
	width:32px;
	height:32px;
	display:inline-block;
	line-height:32px;
	background:#f1f1f1 !important;
	border-radius:10px;
	z-index:-1;
}
/* 공통-파일업로드 박스 */
.uploadBox .fileUpload {
    display:flex;
    align-items:flex-start;
    border-bottom:1px dashed #dbdbdb;
    padding:30px 0 15px;
}
.uploadBox .fileUpload > h4 {
    width:30%;
}
.uploadBox .fileUpload > ul {
    width:70%;
}
.uploadBox .fileUpload > ul li {
	position:relative;
    margin-bottom:15px;
}
.uploadBox .fileUpload > ul li .fileNameWrap {
	position:absolute;
	top:11px;
	left:11px;
	font-size:14px;
	font-weight:100;
}
.uploadBox .fileUpload > ul input[type=text] {
    width:calc(100% - 100px);
    vertical-align:middle;
}
.uploadBox .fileUpload > ul input.fileName {
    border:1px dashed #999;
    background:#fafafa;
}
.uploadBox .fileUpload > ul input[type=file] {
	position:absolute;
	left:-9999px;
	font-size:0;
	appearance:none;
}
.uploadBox .fileUpload > ul .btnSearch, .uploadBox .fileUpload > ul .btnDelete {
    margin:0 5px;
}
/* 버튼모음 */
[class*='btn'] {
    border:none;
    cursor:pointer;
    vertical-align:middle;
    display:inline-block;
}
.btnSubmitR {
    width:200px;
    height:50px;
    color:#fff;
    font-size:20px;
    text-indent:-25px;
    border-radius:50px;
    background: url(/images/sp/iconCheck.png) no-repeat 75% center, #D2302C;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.btnSubmitO {
    width:200px;
    height:50px;
    color:#fff;
    font-size:20px;
    text-indent:-25px;
    border-radius:50px;
    background: url(/images/sp/iconNew.png) no-repeat 87% center, #F1794B;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.btnSubmitP {
    width:200px;
    height:50px;
    display:block;
    margin:40px auto;
    color:#fff;
    font-size:24px;
    border-radius:50px;
    background:#4D1CA8;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.btnSubmitB {
    width:200px;
    height:50px;
    display:block;
    margin:40px auto;
    color:#fff;
    font-size:24px;
    border-radius:50px;
    background:#0063B2;
    box-shadow: 0px 16px 20px rgb(0 0 0 / 16%);
}
.btnSearch {
    width:34px;
    height:34px;
    background:url(/images/sp/iconSearch.png) no-repeat center center, 18px #2497EB;
    border-radius:50%;
}
.btnSave {
    width:34px;
    height:34px;
    background:url(/images/sp/iconSave.png) no-repeat center center, 18px #41BF8A;
    border-radius:50%;
}
.btnDelete {
    width:34px;
    height:34px;
    background:url(/images/sp/iconDeleteC.png) no-repeat center center, 18px #888;
    border-radius:50%;
}
.buttonBoxCenter {
    width:max-content;
    margin:40px auto;
}
.buttonBoxCenter button {
    margin:0 10px;
}
.btnHome {
	position:absolute;
	top:-350px;
	right:10px;
	color:#fff;
}
.btnHome:hover {
	text-decoration:underline;	
}
.btnFileForm {
	width:28px !important;
	height:28px !important;
	background:url(/images/sp/iconForm.png) no-repeat center center / 60% #5e7fe1;
	display:inline-block;
	border:none;
	border-radius:50%;
	cursor:pointer;
	vertical-align:middle;
}
input[type=file] {
	position:absolute;
	left:-9999px;
	font-size:0;
}
.fileForamBox {
	display:flex;
	align-items:center;
	margin-top:10px;
}
.fileForamBox a {
	font-size:14px;
	margin-left:5px;
}
/* 아이프레임 */
.iframeWrap > iframe {
	width:103%;
	height:100vh;
	margin:40px 0;
}
/* 소방일일상황보고서 */
.registTableBox table {
    width:100%;
    border-top:1px solid #666;
    table-layout:fixed;
}
.registTableBox table thead tr {
    border-bottom:1px solid #666;
}
.registTableBox table thead tr:last-child {
    border-bottom:1px dashed #666;
}
.registTableBox table .br222 {
    border-right:1px solid #666;
}
.registTableBox table thead th {
    background:#F9D142;
    padding:15px 0;
    border-right: 1px solid #666;
    vertical-align:middle;
}
.registTableBox table thead th:last-child {
    border-right:0;
}
.registTableBox table thead td {
    padding:15px 0;
    text-align:center;
    border-right:1px dashed #666;
}
.registTableBox table thead td:last-child {
    border-right:0;
}
.registTableBox table tbody td {
    padding:8px 0;
    text-align:center;
    border-right:1px dashed #666;
    border-bottom:1px solid #666;
}
.registTableBox table tbody td:last-child {
    border-right:0;
}
.registTableBox table tbody td input {
    width:60%;
}
/* 주민등록 인구현황 */
/* 재난 일일상황 보고 */
.disaster .btnApi {
	width:80px;
	height:34px;
	background:#41BF8A;
	color:#fff;
	font-family:'GmarketSans', sans-serif;
	border-radius:10px;
}
.disaster .sbjtDateBox { 
	display:flex; 
	align-items:baseline;
}
.disaster .sbjtDateBox h3 {
	margin-bottom:15px;
}
.disaster .sbjtDateBox > div {
	margin-left:40px;
}
label.special {
	margin-top:-15px;
	font-size:14px;
	font-weight:400 !important;
}
.disaster .listTable {
	width:100%;
	border-top:2px solid #4D1CA8;
}
.disaster .listTable tr {
	border-bottom:1px solid #c9bbe3;
}
.disaster .listTable th {
	background:#f4effd;
	color:#230066;
	padding:10px 5px;
}
.disaster .listTable th p {
	display:inline-block;
}
.disaster .listTable th:not(:last-child) {
	border-right:1px solid #c9bbe3;
}
.disaster .listTable th.wd50 {
	width:50%;
}
.disaster .listTable td {
	padding:20px 15px;
	text-align:center;
}
.disaster .listTable td:not(:last-child) {
	border-right:1px solid #c9bbe3;
}
.disaster .listTable td.rightLine {
	border-right:1px solid #c9bbe3;
}
.disaster .detailTable {
	width:100%;
	border-top:2px solid #4D1CA8;
}
.disaster .detailTable tr {
	border-bottom:1px solid #c9bbe3;
}
.disaster .detailTable th {
	width:20%;
	background:#f4effd;
	color:#230066;
	padding:10px 5px;
}
.disaster .detailTable td {
	width:80%;
	padding:20px 15px;
}
.disaster table th span {
	font-weight:normal;
}
.disaster .damSave .flexBox > table {
	width:33.333%;
	border-top:none;
	border-right:1px solid #c9bbe3;
} 
.disaster .damSave .flexBox > table:last-child {
	border-right:none;
}
.disaster .reservoirSave .flexBox > table {
	width:16.66%;
	border-top:none;
	border-right:1px solid #c9bbe3;
} 
.disaster .reservoirSave .flexBox > table:last-child {
	border-right:none;
}
.disaster .weather {
	display:flex;
}
.disaster .weather > table:nth-of-type(1) {
	width:20%;
	border-right:1px solid #c9bbe3;
} 
.disaster .weather .flexBox {
	width:80%;
}
.disaster .weather .flexBox > table {
	width:16.66%;
	border-right:1px solid #c9bbe3;
} 
.disaster .weather .flexBox > table:last-child {
	border-right:none;
} 
.disaster .weather .flexBox > table tr:last-child td {
	height:60px;
}
.disaster .sea {
	display:flex;
}
.disaster .sea > table:nth-of-type(1) {
	width:20%;
	border-right:1px solid #c9bbe3;
} 
.disaster .sea .flexBox {
	width:80%;
}
.disaster .sea .flexBox > table {
	width:16.66%;
	border-right:1px solid #c9bbe3;
} 
.disaster .sea .flexBox > table:last-child {
	border-right:none;
} 
.disaster h3.sbjtP + div {
	display:flex;
	align-items:center;
}
.disaster h3.sbjtP + div > label {
	margin-right:5px;
}
.disaster h3.sbjtP + div .mx-datepicker {
	margin-right:5px;
}
.disaster h3.sbjtP + div p {
	padding-left:8px;
	font-weight:normal;
	color:#666;
}
.liveRainBox {
	max-width:1200px;
	width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
}
.liveRainBox > a {
	position:relative;
	width:13%;
	height:40px;
	background:url(/images/sp/rightArrow.png) no-repeat 90% 60% / 33px;
	color:#fff;
	margin:0 4.3% 2.3% 0;
	padding:0 20px;
	line-height:43px;
	font-weight:400;
	text-align:left;
	border:none;
	box-shadow:0 2px 12px rgba(77,28,168,.5);
	transition:.3s;
	overflow:hidden;
	box-sizing:border-box;
}
.liveRainBox > a:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(225deg, #7546cd 50%, #6d3fc5 50%);
	color:#fff;
	font-size:40px;
	font-weight:100;
	text-align:center;
	z-index:-1;
}
.liveRainBox > a:nth-child(6n) {
	margin-right:0;
}
.liveRainBox > a:hover {
	background:url(/images/sp/rightArrowOn.png) no-repeat 90% 60% / 33px, #fff;
	color:#7546cd;
}
.liveRainBox > a:hover:after {
	color:#7546cd;
	background:#fff;
}
.satelite a {
	position:relative;
	width:120px;
	height:40px;
	margin-right:10px;
	background:#fff;
	border:1px solid #7546cd;
	color:#7546cd;
	display:inline-block;
	text-align:center;
	line-height:37px;
	overflow:hidden;
	transition:.3s;
}
.satelite a:hover {
	color:#fff;
	background:#7546cd;
}
/*로딩 스피너*/
.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); }
}