@charset "UTF-8";
:focus {
    outline: 3px solid #aaa;
}
 
:focus:not(:focus-visible) {
    outline: 0;
}
.swiper-button-next svg, .swiper-button-prev svg {
	display:none;
}
body {
	font-family: 'NanumSquare';
	/* width: 100vw; */
	height: 0;
	font-weight: 300;
	box-sizing: border-box;
	transition: 0.3s;
	font-size: 14px;
	color: #707070;
	background: #ddd;
	overflow: hidden;
	/* position: relative; */
	z-index: -1;
	/* word-break: keep-all; */
}
body *:not(input):not(textarea):not([contenteditable]) {
  user-select: none;
  -webkit-user-select: none;
}
.title,
.header,
.tab-menu {
  user-select: none;
  -webkit-user-select: none;
}
table {
	border-collapse: collapse;
	word-break: break-all;
	word-wrap: break-word;
	table-layout: fixed;
}

pre {
	overflow: auto;
	white-space: pre-wrap;
	text-align: left !important;
	text-align: center;
	font-family: 'NanumSquare';
	font-weight: 300;
	line-height: 1.6em;
}

textarea {
	border: 1px solid #ddd;
	width: 100%;
	resize: none;
	height: 100%;
	border-radius: 5px;
	box-sizing: border-box;
	vertical-align: middle;
	padding: 4px 8px;
	font-size: 19px;
	font-family: 'Pretendard';
	font-weight: 200;
}

textarea:focus {
    outline: 3px solid #aaa;
}
 
textarea:focus:not(:focus-visible) {
    outline: 0;
}

/* 인풋 s */
input {
	font-family: 'NanumSquare' !important;
	outline: 0;
	border: none;
	width: 100%;
	padding: 0 55px 0 20px;
	height: 40px;
	border-radius: 31px;
	background-color: #F6F8FA;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	line-height: 35px;
	margin: 0;
	font-size: 14px;
	color: #707070;
}

input::placeholder {
	font-size: 13px;
	color: #707070;
}

/* input:focus {
	border-color: #1d1d1b;
	box-shadow: 0 0 0px 0px #1d1d1b;
	box-shadow: 0 0 0 0px -moz-mac-focusring;
	color: #222;
	outline: 1px solid #a7b9e4;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-transition: background-color 9999s ease-out;
	-webkit-box-shadow: 0 0 0px 1000px #f6f6f6 inset !important;
} */

::placeholder {
	font-size: 16px;
	font-weight: 400;
	color: #969696;
}
/* 인풋 e */

/* 슬라이드바 s */
#layerController input[type="range"] {
	overflow: hidden;
	height: 10px;
	-webkit-appearance: none;
/* 	 margin: 10px 0;  */
	width: 100%;
	background: #C5C6C8;
	padding: 0px;
	border-radius: 25px;
	border: none;
/* 	 padding: 2px; */
}

#layerController input[type="range"]:focus {
    outline: 3px solid #aaa;
}
 
#layerController input[type="range"]:focus:not(:focus-visible) {
    outline: 0;
} 

#layerController input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 25px;
	border: 1px solid #ffffff;
}

#layerController input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 9px;
	height: 9px;
	background: #ffffff;
	border: 2px solid #97D2FF;
	border-radius: 25px;
	box-shadow: 1px 1px 7px #ffffff;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: -100vw 0 0 100vw #69aef2;
}
/* 슬라이드바 e */

/* 체크박스 s */
input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	height: 20px;
	outline: 0;
	width: 20px;
	border: 1px solid #C5C6C8;
	margin-bottom: 0px;
	vertical-align: -6px;
	margin-right: 6px;
	padding: 0;
}
input[type="checkbox"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="checkbox"]:focus:not(:focus-visible) {
    outline: 0;
}

input[type="checkbox"]::after {
	border: solid #69AEF2;
	border-width: 0px 3px 3px 0;
	content: '';
	display: none;
	height: 60%;
	left: 5px;
	position: relative;
	top: 2%;
	transform: rotate(45deg);
	width: 28%;
}

input[type=""]:checked {
	background: #ffffff;
}

input[type="checkbox"]:checked::after {
	display: block;
}

input[type="checkbox"]:disabled {
	background: #e2e2e2;
}

.map-check {
	padding: 0;
}
.map-check::after {
    left: 7px !important;
    top: 16% !important;
    width: 22% !important;
    height: 40% !important;
}
/* 체크박스 e */

/* 라디오 s */
input[type="radio"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="radio"]:focus:not(:focus-visible) {
    outline: 0;
}
input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	border-radius: 100%;
	cursor: pointer;
	height: 20px;
	outline: 0;
	width: 20px;
	border: 1px solid #C5C6C8;
	margin-bottom: 0;
	vertical-align: -5px;
	margin-right: 3px;
	padding: 0px;
	position: relative;
}

input[type="radio"]::after {
	border: solid #69aef2;
	/* border-width: 0 3px 3px 0; */
	content: '';
	display: none;
	height: calc(100% / 3);
	position: absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50% , -50%);
	background: #69aef2;
	width: calc(100% / 3);
	border-radius: 100%;
	margin: 0;
}

input[type="radio"]:checked {
	background: #ffffff;
}

input[type="radio"]:checked::after {
	display: block;
} 

/* 라디오 e */


/* 인풋 서치 s */
/* IE의 경우 */
input::-ms-clear, input::-ms-reveal {
	display: none;
}
/* 크롬의 경우 */
input::-webkit-search-decoration, input::-webkit-search-cancel-button,
	input::-webkit-search-results-button, input::-webkit-search-results-decoration
	{
	display: none;
}

/* file custom s */
.filebox .upload-name {
    display: inline-block;
    height: 40px;
    padding: 0 10px;
    vertical-align: middle;
    border: 1px solid #dddddd;
    width: calc(100% - 180px) !important;
    color: #999999;
    background: #f7f7f7 !important;
}
.filebox label {
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    background-color: #9E9E9E;
    cursor: pointer;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    padding: 0 30px;
    border-radius: 40px;
}
.filebox input[type="file"] {
    position: absolute;
    width: 0 !important;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    margin-left: 0 !important;
}
.filebox img {
	background: url('./image/x.png') no-repeat 50%;
	vertical-align: middle;
	background-size: 30px;
	width: 40px;
	height: 40px;
	/* top: -2px;
	right: 12px;
	position: absolute; */
	cursor: pointer;
	border:0;
}
/* file custom e */

/* 버튼 s */
.btn-search {
	background: url('./image/search.png') no-repeat 50%;
	background-size: 40px;
	width: 40px;
	height: 40px;
	top: -2px;
	right: 12px;
	position: absolute;
	cursor: pointer;
}

.btn-chioce {
	background: #69AEF2;
    color: #fff;
    height: 28px;
    width: 68px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-surf {
	height: 40px;
	min-width: 40px;
	width: 120px;
	text-align: center;
	border-radius: 20px;
	line-height: 40px;
	cursor: pointer;
}
.btn-surf a,
.btn-reset a,
.btn-back a,
.btn-save a {
	color: #fff;
}

.btn-reset {
	height: 40px; 
	min-width: 40px;
	width: 120px;
	text-align: center;
	border-radius: 20px;
	line-height: 40px;
	cursor: pointer;
	background: #9E9E9E;
}

.btn-back {
	height: 40px;
	min-width: 40px;
	width: 120px;
	text-align: center;
	border-radius: 20px;
	line-height: 40px;
	cursor: pointer;
	background: #C1D8F1;
}

.btn-save {
	height: 40px;
	min-width: 40px;
	width: 120px;
	text-align: center;
	border-radius: 20px;
	line-height: 40px;
	cursor: pointer;
	background: #69AEF2;
}

.btn-border {
	height: 40px;
	min-width: 40px;
	width: 120px;
	text-align: center;
	border-radius: 20px;
	line-height: 40px;
	border:1px solid #707070;
	cursor: pointer;
}
.btn-border a {
	color: #707070;
}
.close,
.close-100 {
	width: 45px;
	height: 45px;
	margin: 0;
	background-color: #f0f0f0;
	position: absolute;
	border-radius: 50px;
	right: 22px;
	top: 22px;
	cursor: pointer;
	transition:.3s;
	z-index: 20;
}

.close:hover,
.close-100:hover {
	background-color: #f0f0f0;
	transition:.3s;
}


.close::before,
.close-100::before {
	left: 50%;
	top: 32%;
	position: absolute;
	content: '';
	background-color: #a1a1a1;
	transform: rotate(45deg);
	width: 1px;
	height: 16px;
}

.close::after,
.close-100::after {
	left: 50%;
	top: 32%;
	position: absolute;
	content: '';
	transform: rotate(-45deg);
	background-color: #a1a1a1;
	width: 1px;
	height: 16px;
}

.btn-300 {
	position: relative;
}

.btn-300>span.on {
	color: #B3D5F4;
	background-color: white;
	position: absolute;
	left: 3px;
	top: 3px;
	width: 50%;
	height: 84%;
	z-index: 0;
	transition: 0.3s ease-out all;
	border-radius: 50px;
}

.btn-300>.btn-left {
	background: none;
	width: 49%;
	height: 100%;
	font-weight: 600;
	left: 0;
	font-size: .6vw;
	padding: 11px;
	cursor: pointer;
	color: #B3D5F4;
	position: relative;
	border: none;
	transition: 0.3s ease all;
	text-transform: uppercase;
}

.btn-300>.btn-right {
	display: inline-block;
	background: none;
	width: 49%;
	color: #C9C9C9;
	font-weight: 500;
	height: 100%;
	position: relative;
	border: none;
	font-size: .6vw;
	cursor: pointer;
	transition: 0.3s ease all;
}

.btn-map-play {
	background: #C1D8F1 url(./image/play-btn.png) 55%/35% no-repeat;
    height: 26px;
    width: 26px;
    border-radius: 20px;
    top: 10px;
    position: absolute;
    right: 10px;
    transition: .3s;
	cursor: pointer;
}

.btn-map-play.on {
	background: #C1D8F1 url(./image/play-stop.png) 50%/35% no-repeat;
}

.btn-mag {
	background: #E4FC9D url(./image/+.png) 50%/ 10px no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 20px;
    left: 10px;
    top: 10px;
    cursor: pointer;
} 

.btn-more {
	height:30px;
	cursor: pointer;
	color: #B4B4B4;
	font-weight: 400;
	background-color: inherit;
}


button.btn-more.fr.m_r_10 {
    margin-right: 20px;
}

.t-txt {
	box-sizing: border-box;
	text-align: right;
	color: #69AEF2;
	font-weight: 400;
	background-color: inherit;
	font-size:8px;
	height: 30px;
}
.btn-200 {
	background: url('./image/arrow.png') no-repeat 100%;
	background-size: 100%;
	height: 28px;
	position: absolute;
	width: 18px;
	top: 26%;
	right: 0;
}

.badge-100 {
	background-color: #4E4E4E;
	color: #FFC136;
	box-sizing: border-box;
	position: absolute;
	border-radius: 10px;
	font-size: clamp(13px, .5vw, 16px);
	left: 0;
	font-weight: 600;
	right: 0;
}
/* 버튼 e */

/* 하이값 조정 s */
.grid-box-item>.grid-item-content-h-100 {
	height: 196px;
	position: relative;
}
/* 하이값 조정 e */

/* 컬러색상 s*/
.color-b {
	color: #62A5E9;
}

/* 컬러색상 e */

/* 스크롤 s */
::-webkit-scrollbar-thumb {
	border-radius: 84px;
	background-color: #C5C6C8;
	width: 10px;
	height: 10px;
	/* -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); */
}
.content-05-h-100>.notice>.notice-box>.box-04::-webkit-scrollbar-thumb {
	border-radius: 84px;
	background-color: #FF9800;
	width: 10px;
	height: 10px;
	/* -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); */
}
::-webkit-scrollbar-track {
	background-color: #f4f4f4;
	height: 100px;
	/* margin-left: -6px; */
}

::-webkit-scrollbar-button {
	width: 0px;
	height: 0;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
/* 스크롤 e */

/* 셀렉트 s */
select {
	font-family: inherit;
	background: #fff url('./image/select.png') no-repeat 89% 50%;
	border-radius: 0px;
	-webkit-appearance: none;
	moz-appearance: none;
	appearance: none;
	width: 100%;
	border: 1px solid #D9D9D9;
	border-radius: 5px;
	height: 35px;
	padding: 0 8px;
	box-sizing: border-box;
	margin: 0;
	vertical-align: 1px;
}

/* :focus{
    outline: 1px solid #69AEF2;
} */
/* select:focus {
	border-color: #69aef2;
	box-shadow: 0 0 0px 0px #69aef2;
	box-shadow: 0 0 0 0px -moz-mac-focusring;
	color: #222;
	outline:  1px solid #9B51E0;
} */

select option {
	/* padding: 27px; */
	/* font-size: 14px; */
	color: #222;
	background: #fff;
	cursor: pointer;
}
select option:hover {
  background-color: #69aef2;
}
/* 셀렉트 e */

/* 온/오프 버튼 s */
.switch {
	/* display: inline-block; */
	width: 80px;
	height: 40px;
}

.switch-label {
	width: 312px;
}

.switch-input {
	display: none;
}

.switch-info .switch-input:checked+.switch-slider {
	background-color: #f4f4f4;
	border-color: #C9C9C9;
}

.switch-slider {
	position: relative;
	display: block;
	height: inherit;
	cursor: pointer;
	background-color: #f4f4f4;
	/* border: 1px solid #a7b9e4; */
	transition: .15s ease-out;
	border-radius: 1.25rem;
	width: 312px;
}

.switch-info .switch-input:checked+.switch-slider::before {
	border-color: #708fd9;
}

.switch-label .switch-input:checked ~ .switch-slider::before {
	-webkit-transform: translateX(22px);
	transform: translateX(150px);
}

.switch-label .switch-slider::before {
	z-index: 2;
}

.switch-slider::before {
	position: absolute;
	top: 3px;
	left: 5px;
	box-sizing: border-box;
	width: calc(50% - 4px);
	height: 33px;
	content: attr(data-checked);
	background-color: #fff;
	/* border: 1px solid #a7b9e4; */
	transition: .15s ease-out;
	border-radius: 0.125rem;
	border-radius: 28px;
	color: #B3D5F4;
	cursor: pointer;
}

.switch-label .switch-input:checked ~ .switch-slider::after {
	left: 1px;
	color: #C9C9C9;
	content: attr(data-checked);
}

.switch-label .switch-slider::after {
	position: absolute;
	top: 50%;
	right: 1px;
	z-index: 1;
	width: calc(50% - 4px);
	margin-top: -.5em;
	font-size: 15px;
	/* font-weight: 400; */
	line-height: 1;
	color: #C9C9C9;
	text-align: center;
	text-transform: uppercase;
	content: attr(data-unchecked);
	transition: inherit;
}
/* 온/오프 버튼 e */
/* 온/오프2 버튼 s */
/* .custom-checkbox {
}
.custom-checkbox input#status {
  display: none;
}
.custom-checkbox input#status + label {
  height: 100%;
  width: 100%;
}
.custom-checkbox input#status + label > .status-switch {
  cursor: pointer;
  width: 100%;
  height: 40px;
  position: relative;
  background-color: #f4f4f4;
  cursor: pointer;
  color: white;
  transition: all 0.5s ease;
  padding: 3px;
  border-radius: 50px;
  max-width: 312px;
}
.custom-checkbox input#status + label > .status-switch:before, .custom-checkbox input#status + label > .status-switch:after {
  border-radius: 2px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  display: flex;
  color: #C9C9C9;
  align-items: center;
  font-size: clamp(.75rem, 1vw, .9rem);
  position: absolute;
  justify-content: center;
  transition: all 0.3s ease;
}
.custom-checkbox input#status + label > .status-switch:before {
  background-color: white;
  color: black;
  left: 3px;
  border-radius: 50px;
  font-size: .6v;
  font-weight: 700;
  cursor: pointer;
  z-index: 10;
  content: attr(data-unchecked);
}
.change-cloudy .custom-checkbox input#status + label > .status-switch:before,
.change-cloudy .Air_pollution input#Air_status + label > .status-switch:before,
.change-cloudy .Air_pollution input#Air_status:checked + label > .status-switch:before,
.change-cloudy .custom-checkbox input#status:checked + label > .status-switch:before  {
  color: #B3D5F4;
}
.change-sun .custom-checkbox input#status + label > .status-switch:before,
.change-sun .Air_pollution input#Air_status + label > .status-switch:before,
.change-sun .change-cloudy .Air_pollution input#Air_status:checked + label > .status-switch:before,
.change-sun .custom-checkbox input#status:checked + label > .status-switch:before  {
  color: #FFC136;
}
.change-rain .custom-checkbox input#status + label > .status-switch:before ,
.change-rain .Air_pollution input#Air_status + label > .status-switch:before,
.change-rain .change-cloudy .Air_pollution input#Air_status:checked + label > .status-switch:before,
.change-rain .custom-checkbox input#status:checked + label > .status-switch:before {
  color: #CACAFE;
}
.change-snow .custom-checkbox input#status + label > .status-switch:before,
.change-snow .Air_pollution input#Air_status + label > .status-switch:before,
.change-snow .change-cloudy .Air_pollution input#Air_status:checked + label > .status-switch:before,
.change-snow .custom-checkbox input#status:checked + label > .status-switch:before  {
  color: #94DFE6;
} 
.custom-checkbox input#status + label > .status-switch:after {
  right: 0;
  content: attr(data-checked);
}
.custom-checkbox input#status:checked + label > .status-switch {
  background-color: #f4f4f4;
}
.custom-checkbox input#status:checked + label > .status-switch:after {
  left: 0;
  content: attr(data-unchecked);
}
.custom-checkbox input#status:checked + label > .status-switch:before {
  left: 50%;
  content: attr(data-checked);
  border-radius: 50px;
}
*/
.custom-checkbox {
  width: 160px;
  height: 40px;
}
.custom-checkbox input#status {
  display: none;
}
.custom-checkbox input#status + label {
  height: 100%;
  width: 100%;
}
.custom-checkbox input#status + label > .status-switch {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffc136;
  color: white;
  box-sizing: border-box;
  transition: all 0.5s ease;
  padding: 3px;
  border-radius: 25px;
}
.custom-checkbox input#status + label > .status-switch:before, .custom-checkbox input#status + label > .status-switch:after {
  border-radius: 33px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  transition: all 0.3s ease;
}
.custom-checkbox input#status + label > .status-switch:before {
  background-color: white;
  color: #f6aa00;
  left: 3px;
  z-index: 10;
  content: attr(data-unchecked);
}
.custom-checkbox input#status + label > .status-switch:after {
  right: 0;
  content: attr(data-checked);
}
.custom-checkbox input#status:checked + label > .status-switch {
  background-color: #9e9e9e;
}
.custom-checkbox input#status:checked + label > .status-switch:after {
  left: 0;
  content: attr(data-unchecked);
}
.custom-checkbox input#status:checked + label > .status-switch:before {
  color: #9e9e9e;
  left: 50%;
  content: attr(data-checked);
}
/* 온/오프버튼2 e */


/* (toggle)온/오프버튼3 s */
.change-sun .switch-toggle {
	background: #ffc136;
}
.change-sun .switch-toggle .on {
	color: #ffc136;
}
.change-cloudy .switch-toggle {
	background: #C0D2EF;
}
.change-cloudy .switch-toggle .on {
	color: #C0D2EF;
}
.change-rain .switch-toggle {
	background: #B6B6ED;
}
.change-rain .switch-toggle .on {
	color: #B6B6ED;
}
.change-snow .switch-toggle {
	background: #8EDCE4;
}
.change-snow .switch-toggle .on {
	color: #8EDCE4;
}
.switch-toggle {
	width: 160px;
	height: 35px;
	position: relative;
	display: flex;
	z-index: 1;
	transition: .3s;
	border-radius: 20px;
}
.switch-toggle.sw-s-90 {
	width: 90px;
}
.switch-toggle .bg {
	width: 78px;
	position: absolute;
	z-index: 10;
	left: 2.5px;
	height: 86%;
	background: #fff;
	transition: .3s;
	top: 2.5px;
	border-radius: 23px;
}
.switch-toggle.sw-s-90 .bg {
	width: 45px;
	
}
.switch-toggle .on {
	z-index: 11;
	display: flex;
	cursor: pointer;
	width: 50%;
	align-items: center;
	justify-content: center;
}

.switch-toggle .off {
	z-index: 11;
	display: flex;
	align-items: center;
	cursor: pointer;
	width: 50%;
	color: #fff;
	justify-content: center;
}
.switch-toggle.on {
	background: #9e9e9e;
}

.switch-toggle.on .bg {
	left: 79px !important;
}
.switch-toggle.sw-s-90.on .bg {
	left: 42.5px !important;
}
.switch-toggle.on .on {
	color: #ffffff;
}

.switch-toggle.on .off {
	color: #9e9e9e;
}
/* (toggle)온/오프버튼3 e */


* {
	margin: 0 auto;
	padding: 0;
}

a {
	text-decoration: none;
	color: #bbb;
	display: block;
}

ul {
	list-style: none;
}

button {
	border: 0px;
	font-family: 'NanumSquare';
	outline: 0px;
}

/* 레이아웃 정렬 s */
.fl {
	float: left;
}

.fr {
	float: right;
}

.cf {
	content: "";
	display: block;
	clear: both;
}
/* 레이아웃 정렬 e */

/* 레이아웃 마진 */
.inner {
	padding: 0 34px;
}

.img {
	background-repeat: no-repeat;
	background-size: cover;
}

.m_l_5 {
	margin-left: 5px !important;
}
.m_l_8 {
	margin-left: 8px;
}
.m_l_10 {
	margin-left: 10px;
}
.m_l_18 {
	margin-left: 18px;
}

.m_t_5 {
	margin-top: 5px;
}

.m_t_10 {
	margin-top: 10px;
}
.m_t_15 {
	margin-top: 15px;
}
.m_t_20 {
	margin-top: 20px;
}
.m_t_40 {
	margin-top: 40px;
}
.m_b_5 {
	margin-bottom: 5px;
}

.m_r_5 {
	margin-right: 5px;
}
.m_r_10 {
	margin-right: 10px;
}
.m_r_20 {
	margin-right: 20px;
}
.m_b_5 {
	margin-bottom: 5px !important;
}

.m_b_10 {
	margin-bottom: 10px !important;
}
.m_b_15 {
	margin-bottom: 15px !important;
}
.m_b_20 {
	margin-bottom: 20px !important;
}

.h_54 {
	height: 54px !important;
}
.h_60 {
	height: 60px !important;
}
.h_85 {
    height: 85px !important
}
.w_92 {
	width: 92px !important;
}
.w_100 {
	width: 100px !important;
}
.w_130 {
	width: 130px !important;
}
.w_100_ {
	width: 100% !important;
}
.w_120 {
	width: 120px !important;
}
.w_128 {
	width: 128px !important;
}
.w_140 {
	width: 140px !important;
}
.w_145 {
	width: 145px !important;
}
.w_150 {
	width: 150px !important;
}
.w_160 {
	width: 160px !important;
}
.w_170 {
	width: 170px !important;
}
.w_205 {
	width: 205px !important;
}
.w_800 {
	width: 800px;
	transition: 0.5s;
}

.w-498 {
	left: calc(50% - 240px);
	width: 498px;
}
.w-1000 {
	left: calc(50% - 500px);
	width: 1000px;
}
.w-1200 {
	left: calc(50% - 600px);
	width: 1200px;
}

.br_15 {
	height: 15px;
	width: 100%;
}

.f_800 {
	font-weight: 800;
}

/*날씨 환경에 따른 체인지*/

body.change-cloudy {
	background: #F6F8FA url('./image/bg.png') -200px -100px / clamp(600px, 50%, 800px) no-repeat;
	/* overflow: auto; */
}
body.change-sun {
	background: #F6F8FA url(./image/bg-02.png) -390px -430px / clamp(800px, 50%, 900px) no-repeat;
	overflow: auto;
	/* height: 100%; */
	/* pointer-events: visible; */
	z-index: -1;
}
body.change-rain {
    background: #F6F8FA url(./image/bg-03.png) 0 0 / clamp(500px, 50%, 800px) no-repeat;
    overflow: auto;
}
body.change-snow {
    background: #F6F8FA url(./image/bg-04.png) 0 0 / clamp(600px, 50%, 800px) no-repeat;
    overflow: auto;
}

/*  input date custom s */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
    /* display: none;
    appearance: none; */
}

input[type="date"]::-webkit-calendar-picker-indicator {
   color: rgba(0, 0, 0, 0);
   opacity: 1;
   display: block;
   background: url('./image/date-img-box.png') 50% / 80% no-repeat;
   width: 20px;
   height: 25px;
   border-width: thin;
}
 
 
 input[type="time"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button {
    display: none;
    appearance: none;
}

input[type="time"]::-webkit-calendar-picker-indicator {
   color: rgba(0, 0, 0, 0);
   opacity: 1;
   display: block;
   background: url('./image/time-box.png') 100% 50% / 80% no-repeat;
   width: 20px;
   height: 25px;
   border-width: thin;
}
/*  input date custom e */

/* progress s*/

/* .progress {
	width: 100%;
    appearance: none;
}
.progress::-webkit-progress-bar {
    background:#fff;
    border-radius:3px;   
    box-shadow:none;
    -webkit-box-shadow:none;
}
.progress::-webkit-progress-value {
    border-radius:3px;
    background: linear-gradient(270deg, #FD481C 0%, #FFC136 30%, #69AEF2 100%) 50% 50%/ 100%;
} */


.level-box {
	height: 100%;
    width: 18px;
    background: #E9EBEE;
    border-radius: 3px;
    position: relative;
}
.dam-progress {
    border-radius: 3px;
    background: #fff;
    height: 18px;
    width: 100%;
    position: relative;
}

/* value - height s*/
.value-h-p-color {
	background:#6A6AF9;
    width: 18px;
    display: inline-block;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    transition: .3s;
}

.value-h-r-color {
	background: #F15700;
    width: 18px;
    display: inline-block;
    height: 66.3%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    transition: .3s;
}

.value-h-y-color {
	background: #FFC136;
    width: 18px;
    display: inline-block;
    height: 33.3%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    transition: .3s;
}

.value-h-g-color {
	background: #01801F;
    width: 18px;
    display: inline-block;
    height: 33.3%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    transition: .3s;
}
/* value - height e*/



/* value - width s*/
.w-b-progress {
    display: inline-block;
    height: 18px;
    position: absolute;
    left: 0;
    border-radius: 3px;
    transition: .3s;
}
.value10 {
    width: 10%;
	background: #97D2FF;
}
.value33 {
    width: 33%;
	background: linear-gradient(280deg, #ffc136 -40%, #97d2ff 50%, #97d2ff 50%);
}
.value66 {
    width: 66%;
	background: linear-gradient(280deg, #ffc136 10%, #97d2ff 62%, #97d2ff 50%);
}
.value88 {
    width: 88%;
	background: linear-gradient(280deg, #F44336 -12%, #ffc136 24%, #97d2ff 82%);
}
.value100 {
    width: 100%;
	background: linear-gradient(280deg, #F44336 0%, #ffc136 30%, #97d2ff 100%);
}

.value-w-r-color {
	background: #FD481C;
}

.value-w-y-color {
	background: #FFC136;
}

.value-w-b-color {
	background: #97D2FF;
}

/* value - width e*/

/* progress e*/


/* legend- color */
.blue-bg {
	background: #69AEF2;
}

.yellow-bg {
	background: #FFFD38;
}

.orange-bg {
	background: #FFA300;
}

.red-bg {
	background: #FD481C;
}

/* 데이터없음 창 s */
.not-data {
	height: calc(100% - 88px);
}

.not-data .not-data-img {
	background: url(./image/not-data.png) 58%/contain no-repeat;
	height: 90%;
	width: calc(100% - 40px);
}

.not-data .not-data-txt {
	height: 45%;
	display: grid;
	grid-template-rows: 1.5fr 1fr 1fr 2fr;
}

.not-data p {
	grid-row: 2;
	display: flex;
	align-items: center;
	color: #707070;
	font-size: 16px;
	font-weight: 500;
}

.not-data span {
	grid-row: 3;
	display: flex;
	align-items: center;
	color: #C5C6C8;
}
/* 데이터없음 창 e */

/* border s */
.border-st:before {
	content:"";
}
/* border e */

/* big-popup text-h1 s */
.text-big-h1 {
	color: #69AEF2;
    height: auto !important;
    font-weight: 600;
}

.not-color {
	color:#CCCCCC;
}

/*text color s*/
/* environment */
.e-r-color {
	color:#FD481C !important;
	font-weight: 400;
}
.e-o-color {
	color:#FD481C !important;
	font-weight: 400;
}
.e-y-color {
	color:#FFC136 !important;
	font-weight: 400;
}
.e-g-color {
	color:#0CDC35 !important;
	font-weight: 400;
}
.e-s-color {
	color:#97D2FF !important;
	font-weight: 400;
}
.e-b-color {
	color:#69AEF2 !important;
	font-weight: 400;
}
/*text color e*/


/* 포커스 s */

:focus {
    outline: 3px solid #aaa;
}
 
:focus:not(:focus-visible) {
    outline: 0;
}

select:focus {
	/* border: 1px solid var(--color-b-04); */
	/* background: #fff url(./img/icon/arrow-top.png) 94% 50% / 8px no-repeat; */
}

input[type="checkbox"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="checkbox"]:focus:not(:focus-visible) {
    outline: 0;
}

input[type="radio"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="radio"]:focus:not(:focus-visible) {
    outline: 0;
}

textarea:focus {
    outline: 3px solid #aaa;
}
 
textarea:focus:not(:focus-visible) {
    outline: 0;
}

/* 포커스 e */