@charset "utf-8";
@font-face {
  font-family: "Taenada";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2")
    format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "GMarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "GMarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
    format("woff");
  font-weight: 700;
  font-display: swap;
}
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

html,body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,span,form,fieldset,input,select,label,textarea,table,caption,thead,tfoot,tbody,tr,th,td,pre {
  margin: 0;
  padding: 0;
  font:
    15px/1.5 "Pretendard",
    "Malgun Gothic",
    "나눔고딕",
    "Nanum Gothic",
    굴림,
    Gulim,
    돋움,
    Dotum,
    Sans-serif;
  color: #333;
  -webkit-text-size-adjust: none;
}
b,span,strong,input,a,button {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}
article,aside,dialog,footer,header,section,footer,
nav,
figure,
hgroup,
details,
summary,
figure,
figcaption {
  display: block;
}
html,
body {
  overflow-x: hidden;
  width: 100%;
  letter-spacing: -0.01em;
  margin: 0px;
  padding: 0;
}
body {
  overflow: hidden;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #f3f4f8;
}

body.active {
  overflow: hidden;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
img {
  border: 0;
  max-width: 100%;
}

/* label, input, textarea, select{vertical-align:middle} */

ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}
fieldset {
  border: none;
}
.skip,
hr,
legend {
  position: absolute;
  left: -1000%;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-block;
  transition: 0.3s;
  line-height: inherit;
}

/*** Layout ***/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 40px;
}
::-webkit-scrollbar-thumb {
  background: #0d3b86;
  border-radius: 40px;
}
::-webkit-scrollbar-track {
  background: #dbf0ff;
  border: none;
  border-radius: 40px;
}

caption > p {
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: -1000em;
  left: 0;
}

#skip_menu a {
  position: absolute;
  opacity: 0;
  top: 0;
}
#skip_menu a:focus {
  display: inline-block;
  padding: 10px;
  background: #000;
  font-size: 15px;
  color: #fff;
  opacity: 1;
  z-index: 9999;
}

/* 팝업 */
#pop_dim {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  width: 100%;
  height: 100%;
  background: #000;
  visibility: hidden;
  opacity: 0.5;
  z-index: 3700;
  overflow:hidden;
  transition: 0.3s;
}
#pop_dim.on {
  visibility: visible;
  opacity: 0.67;
  z-index: 3700;
}

#nav_dim {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  width: 100%;
  height: 100%;
  background: #000;
  visibility: hidden;
  opacity: 0.5;
  z-index: 3700;
  transition: 0.3s;
  touch-action: none;
}
#nav_dim.on {
  visibility: visible;
  opacity: 0.67;
  z-index: 3700;
}


/* GNB */
.topBar>.logo {height: 59px; transition: all .2s; transition-timing-function: linear; transition-delay: .1s; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items:center;}
/* 상단 셀렉트박스 */
.topBar>.logo>a {display: inline-block; padding:0 10px}
.topBar>.logo>a>img {width: 120px; display: inline-block; vertical-align: middle;}
.topBar>.logo>.logoWrap {position: relative; width: auto; min-width: 210px; transition: 0.3s; margin-left: 5px; color: #fff; font-size: 14px; font-weight: bold; }
.topBar>.logo>.logoWrap.active {width:210px; }
.topBar>.logo>.logoWrap img {display: inline-block; vertical-align: middle; width: 22px; margin: 0 2px 0 0; }
.topBar>.logo>.logoWrap span {display: inline-block; vertical-align: middle; color: #fff; font-size: 14px; font-weight: bold; }
.topBar>.logo>.logoWrap .logoList li a img { margin: 0 8px 0 0; }
.topBar>.logo>.logoWrap .logoTit {min-width: 170px; padding: 8px 17px 10px 24px; cursor: pointer; background: #1b2750; border-radius: 50px; transition:all .3s;}
.topBar>.logo>.logoWrap .logoTit .icon {position: absolute; right: 15px; top: 53%; transform: translate( 0%, -53%) rotate(0deg); width: 12px; transition: 0.3s;}
.topBar>.logo>.logoWrap.active .logoTit .icon {transform: translate( 0%, -53%) rotate(180deg);}
.topBar>.logo>.logoWrap .logoList {position: absolute; left: 50%; top: 34px; opacity:0; transform: translate( -50%, 0%); transition:all .3s; width: 100%; height: 0; overflow: hidden; background: #1b2750; border-radius: 17px; transition: 0.3s; padding: 0px; }
.topBar>.logo>.logoWrap.active .logoList {height:auto; top:44px; top: 44px; opacity:1;}
.topBar>.logo>.logoWrap .logoList li { border-bottom: 1px solid #5566a1; }
.topBar>.logo>.logoWrap .logoList li:last-child { border-bottom: none; }
.topBar>.logo>.logoWrap .logoList a {display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center; color: #fff; font-size: 13px; font-weight: bold; padding: 14px 22px 12px; background: url('../../images/common/logoMoveIcon.svg') no-repeat center right 13px; transition:all .3s;}
.topBar>.logo>.logoWrap .logoList a:hover{background-color:#2d4183;}


@media all and (max-width:1240px){
	.topBar>.logo { height: 50px; }
	.topBar>.logo>.logoWrap{min-width:180px;}
	.topBar>.logo>.logoWrap span { font-size: 13px; }
	.topBar>.logo>.logoWrap .logoTit { padding: 5px 17px 6px 20px; }
	.topBar>.logo>.logoWrap .logoTit .icon { margin-left: 2px; }
	.topBar>.logo>.logoWrap.active .logoList{top:35px;}
}
@media all and (max-width:768px){
	html, body{overflow-x: hidden; width:100%;}
	.topBar>.logo>.logoWrap img{width:18px;}
}

@media all and (max-width:420px){
	.topBar>.logo>.logoWrap .logoTit{min-width:130px; padding:4px 10px 6px 14px;}
	.topBar>.logo>.logoWrap.active{width:180px;}
	.topBar>.logo>.logoWrap .logoList a{padding:14px 15px 12px;}
	.topBar>.logo>.logoWrap img{width:15px;}
}

@media all and (max-width:370px){
	.topBar>.logo>.logoWrap{min-width:150px; margin:0;}
	.topBar>.logo>.logoWrap.active{width:150px;}
	.topBar>.logo>.logoWrap .logoTit{min-width:initial; padding:4px 4px 6px 10px;}
	.topBar>.logo>.logoWrap .logoTit .icon{margin-left:0; width:8px;}
	.topBar>.logo>.logoWrap.active .logoList{top:34px;}
	.topBar>.logo>.logoWrap .logoList a{background-size:13px; padding:13px 10px 11px 10px; background-size:96% center; background:none;}
	.topBar>.logo>.logoWrap .logoList li a img{margin-right:4px;}
}
@media all and (max-width:336px){
	.topBar>.logo>.logoWrap{min-width:132px;}
	.topBar>.logo>.logoWrap.active{width:132px;}
}
/* //상단 셀렉트박스 */


/* Top */
.topRightBox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.alarmWrap {
  position: relative;
}
.alarmWrap > button {
  position: relative;
  display: block;
  width: 37px;
  height: 37px;
  border-radius: 37px;
  box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3);
  text-align: center;
  margin-right: 20px;
  box-sizing: border-box;
  background: #fff;
}
.alarmWrap > button img {
  width: 17px;
  margin-top: 5px;
}
.alarmWrap > button span {
  position: absolute;
  right: -13px;
  top: -7px;
  font-size: 13px;
  display: inline-block;
  background: #3c9eff;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  line-height: 21px;
}

.alarmWrap .alarmPop {
  opacity: 0;
  position: absolute;
  right: -30px;
  top: 57px;
  transform: translate(0%, 0%);
  background: #fff;
  border: none;
  width: 370px;
  height: 0;
  max-height: calc(100vh - 107px);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  overflow: hidden;
}
.alarmWrap .alarmPop.active {
  opacity: 1;
  right: -10px;
  width: 370px;
  height: auto;
  overflow-y: auto;
  border: 1px solid #ddd;
  transition: 0.3s;
}

.alarmWrap .alarmPop .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 55px;
  font-weight: normal;
  line-height: 55px;
}

.alarmWrap .alarmPop h1 {
  font-size: 17px;
  vertical-align: middle;
  font-weight: bold;
  padding: 13px 15px 13px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}
.alarmWrap .alarmPop h1 button {
  margin: 0px 0 0 5px;
  vertical-align: middle;
}
.alarmWrap .alarmPop .alarmList {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 37px 10px 17px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  color: #555;
  font-size: 15px;
  transition: 0.3s;
}
.alarmWrap .alarmPop .alarmList:last-child {
  border-bottom: none;
}
.alarmWrap .alarmPop .alarmList:hover {
  background: #f7f7f7;
}
.alarmWrap .alarmPop .alarmList span.listTit {
  font-weight: bold;
  color: #333;
  position: relative;
}
.alarmWrap .alarmPop .alarmList span.listTit::before {
  content: "";
  width: 4px;
  height: 4px;
  background: #3c9eff;
  position: absolute;
  left: -10px;
  top: -2px;
  border-radius: 5px;
}
.alarmWrap .alarmPop .alarmList span.minute {
  display: block;
  color: #999;
  font-size: 13px;
  margin-top: 4px;
}

.alarmWrap .alarmPop .alarmList.off {
  background: #f0f0f0;
  color: #999;
}
.alarmWrap .alarmPop .alarmList.off span.listTit::before {
  background: #aaa;
}
.alarmWrap .alarmPop .alarmList.off span.listTit {
  color: #777;
}

.alarmWrap .alarmPop .alarmList .listClose {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0%, -50%);
}
.alarmWrap .alarmPop .alarmList .listClose img {
  width: 12px;
}

.alarmWrap .alarmPop .alarmList.no {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
  color: #777;
  cursor: default;
  padding: 10px 17px;
}
.alarmWrap .alarmPop .alarmList.no:hover {
  background: #fff;
}

.alarmWrap .alarmPop .allDel {
  display: block;
  padding: 4px 10px;
  line-height: normal;
  position: absolute;
  right: 47px;
  top: 13px;
  border-radius: 25px;
  background: #999;
  color: #fff;
  font-size: 13px;
}
.alarmWrap .alarmPop .allDel.on {
  background: #007bf5;
}

.liveAlarm {
  position: fixed;
  z-index: 1000;
  right: 27px;
  bottom: 0px;
  opacity: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 2px solid #007bf5;
  width: 370px;
  height: auto;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}
.liveAlarm.on {
  bottom: 27px;
  opacity: 1;
}
.liveAlarm .alarmList {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 37px 10px 17px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  color: #555;
  font-size: 15px;
  transition: 0.3s;
}
.liveAlarm .alarmList:last-child {
  border-bottom: none;
}
.liveAlarm .alarmList:hover {
  background: #f7f7f7;
}

.liveAlarm .alarmList span.listTit {
  font-weight: bold;
  color: #333;
  position: relative;
}
.liveAlarm .alarmList span.listTit::before {
  content: "";
  width: 4px;
  height: 4px;
  background: #3c9eff;
  position: absolute;
  left: -10px;
  top: -2px;
  border-radius: 5px;
}
.liveAlarm .alarmList span.minute {
  display: block;
  color: #999;
  font-size: 13px;
  margin-top: 4px;
}
.liveAlarm .alarmList .listClose {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0%, -50%);
}

/* 알림 설정 팝업 레이아웃 */
.anarmSetWrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.anarmSetWrap .popupCont {
  position: relative;
  margin: 0 10px;
  min-width: 970px;
  min-height: auto;
  max-width: calc(50% - 40px);
  background: #fff;
  border-top: 2px solid #007bf5;
}

.anarmSetWrap .popupCont .popupContent {
  display: block;
  margin: 0;
  font-size: 0;
  min-height: 300px;
  white-space: normal;
  padding: 15px 15px;
  font-size: 15px;
}
.anarmSetWrap .popupCont .popupContent .popTitle {
  font-size: 19px;
  font-weight: bold;
  padding-bottom: 10px;
}
.anarmSetWrap .popupCont .popupContent h5 {
  font-size: 15px;
  font-weight: bold;
  padding: 10px 0 7px;
  margin: 13px 0 5px;
  color: #555;
  text-align: center;
  border-top: 2px solid #aaa;
  border-bottom: 1px solid #ddd;
  background: #f2f9ff;
}
.anarmSetWrap .popupCont .popupContent .anarmSetList caption {
  text-indent: -9999px;
  position: absolute;
  top: -1000em;
  left: 0;
}
.anarmSetWrap .popupCont .popupContent .popClose .listClose {
  position: absolute;
  right: 15px;
  top: 5px;
}
.anarmSetWrap .popupCont .popupContent .anarmSettingList ul li {
  display: inline-block;
}

.anarmSetWrap .popupCont .popupContent ul li input {
  vertical-align: middle;
}
.anarmSetWrap .popupCont .popupContent ul li label {
  margin-right: 17px;
  vertical-align: middle;
}

.anarmSetWrap .popupCont .popupContent .alarmListChoice {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.anarmSetWrap .popupCont .popupContent .alarmListChoice > li {
  width: calc(20% - 5px);
  border: 1px solid #aaa;
  border-top: none;
}
.anarmSetWrap .popupCont .popupContent .alarmListChoice > li > h5 {
  margin: 0 0 0px;
  border-top: 2px solid #aaa;
}

.anarmSetWrap .popupCont .popupContent .alarmListChoice > li > div {
  height: 100px;
  overflow-y: auto;
  padding: 5px;
  box-sizing: border-box;
}
.anarmSetWrap .popupCont .popupContent .alarmListChoice > li > div > span {
  font-size: 12px !important;
  display: block;
  background: #f0f0f0;
  margin-bottom: 5px;
  padding: 5px;
  box-sizing: border-box;
}
.anarmSetWrap .popupCont .popupContent .alarmListChoice > li > div > ul > li {
  display: block;
}

.anarmSetWrap .popupCont .popupContent .alarmPopBtn {
  text-align: right;
}

/* dashboard */

#contents {
  position: relative;
}
#contents.sContents {
  height: auto;
  overflow-x:hidden;
}

.bannerWrap {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translate(-50%, 0%);
  z-index: 0;
  width: 100%;
  height: calc(100vh - 60px);
}
.banner {
  width: 100%;
  height: calc(100vh - 45px);
}
.banner .post {
  width: 100%;
  height: calc(100vh - 45px);
}

.banner .post.bnr01 {
  background: url(../../images/common/visual01.jpg) no-repeat center;
  background-size: cover;
}
.banner .post.bnr02 {
  background: url(../../images/common/visual02.jpg) no-repeat center;
  background-size: cover;
}

.visualTitle {
  width: calc(100% - 40px);
  position: absolute;
  left: 50%;
  top: calc(50% - 107px);
  transform: translate(-50%, -50%);
  text-align: center;
}
.visualTitle h3 {
  font-family: "Taenada";
  font-size: 42px;
  letter-spacing: 13px;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  padding-left: 10px;
  box-sizing: border-box;
  font-weight: bold;
}
.visualTitle h1 {
  color: #fff;
  font-family: "Taenada";
  font-size: 77px;
  text-shadow:
    -2px 0px #00163f,
    0px 2px #00163f,
    2px 0px #00163f,
    0px -2px #00163f;
}
.visualTitle h1 span.blue {
  color: #afe6ff;
}
.visualTitle h1 span.green {
  color: #afffbc;
}

.bannerWrap.bannerWrapSub {
  height: 157px;
}
.bannerWrap.bannerWrapSub .banner {
  height: 157px;
}
.bannerWrap.bannerWrapSub .banner .post {
  height: 157px;
}

.pageTit {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translate(-50%, 0%);
  color: #fff;
  font-size: 35px;
  font-weight:800;
  text-align: center;
}

.mCont {
  /* position: absolute; left: 50%; top: 220px; transform: translate( -50%, 0%); */
  max-width: 1240px;
  width: 100%;
  margin: 280px auto 20px;
}
.mCont .mapWrap {
  position: relative;
  width: 100%;
  height: 450px;
  border: 1px solid #7299cf;
  background: #fff;
  margin: 20px auto 0;
  border-radius: 17px 0 17px 7px;
  overflow: hidden;
}
.mCont .mapWrap .map {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}
.mCont .mapWrap .map.on {
  opacity: 1;
  width: 100%;
  height: 100%;
}

.mCont .mapWrap .mapButton {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0%, -50%);
  width: 147px;
  text-align: right;
}
.mCont .mapWrap .mapButton button {
  display: inline-block;
  width: 147px;
  background: #e3f7ff url(../../images/common/mapCheck.png) no-repeat center
    left 7px;
  text-align: left;
  padding: 9px 10px 5px 27px;
  margin: 2px 0;
  border-radius: 7px 0 0 7px;
  font-family: "GMarketSans";
  font-weight: 500;
  border-left: 2px solid #e3f7ff;
  color: #333;
}
.mCont .mapWrap .mapButton button.on {
  border-left: 2px solid #002f64;
  background: #e3f7ff url(../../images/common/mapCheckOn.png) no-repeat center
    left 7px;
}

.mCont .contBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.mCont .contBtn li {
  position: relative;
  width: calc(16.6% - 22px);
  height: 257px;
  margin: 20px 10px 0;
  border-radius: 17px 0 17px 7px;
  text-align: center;
  border: 1px solid #d5ebd3;
  background: #fff;
  box-shadow: 2px 0px 10px rgb(22, 155, 44, 0.2);
}
.mCont .contBtn li .visual {
  display: block;
  width: 100%;
  height: 137px;
}
.mCont .contBtn li:nth-child(1) .visual {
  background: url(../../images/common/ico01.png) no-repeat center;
}
.mCont .contBtn li:nth-child(2) .visual {
  background: url(../../images/common/ico02.png) no-repeat center;
}
.mCont .contBtn li:nth-child(3) .visual {
  background: url(../../images/common/ico03.png) no-repeat center;
}
.mCont .contBtn li:nth-child(4) .visual {
  background: url(../../images/common/ico04.png) no-repeat center;
}
.mCont .contBtn li:nth-child(5) .visual {
  background: url(../../images/common/ico05.png) no-repeat center;
}
.mCont .contBtn li:nth-child(6) .visual {
  background: url(../../images/common/ico06.png) no-repeat center;
}

.mCont .contBtn li h5 {
  font-family: "GMarketSans";
  font-weight: 700;
  color: #0d3b86;
  font-size: 17px;
}
.mCont .contBtn li p {
  font-size: 15px;
  letter-spacing: -1px;
  margin-top: 15px;
  line-height: 19px;
}
.mCont .contBtn li a {
  position: absolute;
  left: 50%;
  bottom: -17px;
  transform: translate(-50%, 0%);
  display: block;
  width: 100px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  border: 2px solid #c4dfc5;
  background: #f7fff6;
  border-radius: 10px 0 10px 0;
  font-weight: bold;
  transition: 0.3s;
}
.mCont .contBtn li a:hover {
  background: #e1f5de;
}

/* water */
#footer {
  width: 100%;
}
.weatherWrap {
  position: fixed;
  left: 50%;
  top: 80px;
  z-index: 1000;
  transform: translate(-50%, 0%);
  width: calc(100% - 40px);
  height: auto;
  background: #fff;
  border-radius: 17px;
}
.weatherWrap .weatherList {
  width: 100%;
}
.weatherWrap .weatherList .post {
  padding: 7px 15px;
  margin: 0 15px;
  width: 170px;
}
.weatherWrap .weatherList .post h5 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  text-align: center;
}
.weatherWrap .weatherList .post .ico01 {
  background: #dcf1ff url(../../images/common/ico_weather01.png) no-repeat
    center;
  background-size: 50%;
}
.weatherWrap .weatherList .post .ico02 {
  background: #dcf1ff url(../../images/common/ico_weather02.png) no-repeat
    center;
  background-size: 60%;
}
.weatherWrap .weatherList .post .ico03 {
  background: #dcf1ff url(../../images/common/ico_weather03.png) no-repeat
    center;
  background-size: 50%;
}
.weatherWrap .weatherList .post .ico04 {
  background: #dcf1ff url(../../images/common/ico_weather04.png) no-repeat
    center;
  background-size: 10px;
}
.weatherWrap .weatherList .post .ico05 {
  background: #dcf1ff url(../../images/common/ico_weather05.png) no-repeat
    center;
  background-size: 55%;
}
.weatherWrap .weatherList .post .ico06 {
  background: #dcf1ff url(../../images/common/ico_weather06.png) no-repeat
    center;
  background-size: 55%;
}
.weatherWrap .weatherList .post .ico07 {
  background: #dcf1ff url(../../images/common/ico_weather07.png) no-repeat
    center;
  background-size: 55%;
}
.weatherWrap .weatherList .post .ico08 {
  background: #dcf1ff url(../../images/common/ico_weather08.png) no-repeat
    center;
  background-size: 40%;
}

.weatherWrap .weatherList .post > span {
  display: inline-block;
  vertical-align: middle;
}
.weatherWrap .weatherList .post > span span:nth-child(1) {
  display: block;
  font-size: 12px;
  color: #aaaaaa;
  font-weight: 300;
}
.weatherWrap .weatherList .post > span span:nth-child(2) {
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  padding-top: 0px;
  color: #222222;
}
.weatherWrap .weatherList .post > span span:nth-child(3) {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
}

/* INPUT */
.nomalCheck {
  display: inline-block;
}
.nomalCheck span {
  position: relative;
}
.nomalCheck input {
  position: absolute;
  margin: 0px;
  padding-inline: 8px;
  padding-block: 12px;
}
.nomalCheck input[type="checkbox"] {
  appearance: none;
}
.nomalCheck input:focus-visible {
  outline: solid 2px #0f59d9;
  border-radius: 1%;
}

.nomalCheck input[type="checkbox"] + label {
  display: inline-block;
  vertical-align: bottom;
  background: url("../../images/common/checkbox_icon.png") no-repeat left center;
  background-size: 15px;
  padding-left: 22px;
  line-height: 20px;
  font-size: 13px;
  margin: 0 0px 0 0;
  letter-spacing: -1px;
  cursor: pointer;
}
.nomalCheck input[type="checkbox"]:checked + label {
  background: url("../../images/common/checkboxOn_icon.png") no-repeat left
    center;
  background-size: 15px;
}

/*** Component ***/
.txtL {
  text-align: left !important;
}
.txtC {
  text-align: center !important;
}
.txtR {
  text-align: right !important;
}

.cBlue {
  color: #0188cc !important;
}
.cRed {
  color: #cc0101 !important;
}
.cGreen {
  color: #01cc31 !important;
}
.cYellow {
  color: #cca801 !important;
}
.cGray {
  color: #555 !important;
}

.fL {
  float: left !important;
}
.fR {
  float: right !important;
}
.cB {
  clear: both !important;
}
.cB::after {
  content: "";
  display: block;
  clear: both;
}

.fwB {
  font-weight: bold;
}
.dbN {
  display: none !important;
}
.bTnone {
  border-top: none !important;
}
.bBnone {
  border-bottom: none !important;
}
.bT2px {
  border-top: 2px solid #514ecd !important;
}
.dpIb {
  display: inline-block !important;
}
.dpb {
  display: block !important;
}
.vtAM {
  vertical-align: middle !important;
}
.shadowVisual {
  box-shadow: 2px 2px 14px rgb(91, 176, 255, 0.14) !important;
}

caption {
  text-indent: -9999px;
  font-size: 0;
}

.wA {
  width: auto !important;
}
.fs0 {
  font-size: 0px !important;
}
.fs13 {
  font-size: 13px !important;
}

.mT0 {
  margin-top: 0px !important;
}
.mT1 {
  margin-top: 1px !important;
}
.mT2 {
  margin-top: 2px !important;
}
.mT3 {
  margin-top: 3px !important;
}
.mT4 {
  margin-top: 4px !important;
}
.mT5 {
  margin-top: 5px !important;
}
.mT6 {
  margin-top: 6px !important;
}
.mT7 {
  margin-top: 7px !important;
}
.mT8 {
  margin-top: 8px !important;
}
.mT9 {
  margin-top: 9px !important;
}
.mT10 {
  margin-top: 10px !important;
}
.mT-10 {
  margin-top: -10px !important;
}
.mT11 {
  margin-top: 11px !important;
}
.mT12 {
  margin-top: 12px !important;
}
.mT13 {
  margin-top: 13px !important;
}
.mT14 {
  margin-top: 14px !important;
}
.mT15 {
  margin-top: 15px !important;
}
.mT16 {
  margin-top: 16px !important;
}
.mT17 {
  margin-top: 17px !important;
}
.mT18 {
  margin-top: 18px !important;
}
.mT19 {
  margin-top: 19px !important;
}
.mT20 {
  margin-top: 20px !important;
}
.mT21 {
  margin-top: 21px !important;
}
.mT22 {
  margin-top: 22px !important;
}
.mT23 {
  margin-top: 23px !important;
}
.mT24 {
  margin-top: 24px !important;
}
.mT25 {
  margin-top: 25px !important;
}
.mT26 {
  margin-top: 26px !important;
}
.mT27 {
  margin-top: 27px !important;
}
.mT28 {
  margin-top: 28px !important;
}
.mT29 {
  margin-top: 29px !important;
}
.mT30 {
  margin-top: 30px !important;
}
.mT35 {
  margin-top: 35px !important;
}
.mT40 {
  margin-top: 40px !important;
}
.mT45 {
  margin-top: 45px !important;
}
.mT50 {
  margin-top: 50px !important;
}
.mT70 {
  margin-top: 70px !important;
}
.mT90 {
  margin-top: 90px !important;
}
.mT100 {
  margin-top: 100px !important;
}
.mR0 {
  margin-right: 0px !important;
}
.mR1 {
  margin-right: 1px !important;
}
.mR2 {
  margin-right: 2px !important;
}
.mR3 {
  margin-right: 3px !important;
}
.mR4 {
  margin-right: 4px !important;
}
.mR5 {
  margin-right: 5px !important;
}
.mR6 {
  margin-right: 6px !important;
}
.mR7 {
  margin-right: 7px !important;
}
.mR8 {
  margin-right: 8px !important;
}
.mR9 {
  margin-right: 9px !important;
}
.mR10 {
  margin-right: 10px !important;
}
.mR11 {
  margin-right: 11px !important;
}
.mR12 {
  margin-right: 12px !important;
}
.mR13 {
  margin-right: 13px !important;
}
.mR14 {
  margin-right: 14px !important;
}
.mR15 {
  margin-right: 15px !important;
}
.mR16 {
  margin-right: 16px !important;
}
.mR17 {
  margin-right: 17px !important;
}
.mR18 {
  margin-right: 18px !important;
}
.mR19 {
  margin-right: 19px !important;
}
.mR20 {
  margin-right: 20px !important;
}
.mR21 {
  margin-right: 21px !important;
}
.mR22 {
  margin-right: 22px !important;
}
.mR23 {
  margin-right: 23px !important;
}
.mR24 {
  margin-right: 24px !important;
}
.mR25 {
  margin-right: 25px !important;
}
.mR26 {
  margin-right: 26px !important;
}
.mR27 {
  margin-right: 27px !important;
}
.mR28 {
  margin-right: 28px !important;
}
.mR29 {
  margin-right: 29px !important;
}
.mR30 {
  margin-right: 30px !important;
}
.mR35 {
  margin-right: 35px !important;
}
.mR40 {
  margin-right: 40px !important;
}
.mR45 {
  margin-right: 45px !important;
}
.mR50 {
  margin-right: 50px !important;
}
.mB0 {
  margin-bottom: 0px !important;
}
.mB1 {
  margin-bottom: 1px !important;
}
.mB2 {
  margin-bottom: 2px !important;
}
.mB3 {
  margin-bottom: 3px !important;
}
.mB4 {
  margin-bottom: 4px !important;
}
.mB5 {
  margin-bottom: 5px !important;
}
.mB6 {
  margin-bottom: 6px !important;
}
.mB7 {
  margin-bottom: 7px !important;
}
.mB8 {
  margin-bottom: 8px !important;
}
.mB9 {
  margin-bottom: 9px !important;
}
.mB10 {
  margin-bottom: 10px !important;
}
.mB11 {
  margin-bottom: 11px !important;
}
.mB12 {
  margin-bottom: 12px !important;
}
.mB13 {
  margin-bottom: 13px !important;
}
.mB14 {
  margin-bottom: 14px !important;
}
.mB15 {
  margin-bottom: 15px !important;
}
.mB16 {
  margin-bottom: 16px !important;
}
.mB17 {
  margin-bottom: 17px !important;
}
.mB18 {
  margin-bottom: 18px !important;
}
.mB19 {
  margin-bottom: 19px !important;
}
.mB20 {
  margin-bottom: 20px !important;
}
.mB21 {
  margin-bottom: 21px !important;
}
.mB22 {
  margin-bottom: 22px !important;
}
.mB23 {
  margin-bottom: 23px !important;
}
.mB24 {
  margin-bottom: 24px !important;
}
.mB25 {
  margin-bottom: 25px !important;
}
.mB26 {
  margin-bottom: 26px !important;
}
.mB27 {
  margin-bottom: 27px !important;
}
.mB28 {
  margin-bottom: 28px !important;
}
.mB29 {
  margin-bottom: 29px !important;
}
.mB30 {
  margin-bottom: 30px !important;
}
.mB35 {
  margin-bottom: 35px !important;
}
.mB40 {
  margin-bottom: 40px !important;
}
.mB45 {
  margin-bottom: 45px !important;
}
.mB50 {
  margin-bottom: 50px !important;
}
.mB70 {
  margin-bottom: 70px !important;
}
.mB100 {
  margin-bottom: 100px !important;
}
.mL0 {
  margin-left: 0px !important;
}
.mL1 {
  margin-left: 1px !important;
}
.mL2 {
  margin-left: 2px !important;
}
.mL3 {
  margin-left: 3px !important;
}
.mL4 {
  margin-left: 4px !important;
}
.mL5 {
  margin-left: 5px !important;
}
.mL6 {
  margin-left: 6px !important;
}
.mL7 {
  margin-left: 7px !important;
}
.mL8 {
  margin-left: 8px !important;
}
.mL9 {
  margin-left: 9px !important;
}
.mL10 {
  margin-left: 10px !important;
}
.mL11 {
  margin-left: 11px !important;
}
.mL12 {
  margin-left: 12px !important;
}
.mL13 {
  margin-left: 13px !important;
}
.mL14 {
  margin-left: 14px !important;
}
.mL15 {
  margin-left: 15px !important;
}
.mL16 {
  margin-left: 16px !important;
}
.mL17 {
  margin-left: 17px !important;
}
.mL18 {
  margin-left: 18px !important;
}
.mL19 {
  margin-left: 19px !important;
}
.mL20 {
  margin-left: 20px !important;
}
.mL21 {
  margin-left: 21px !important;
}
.mL22 {
  margin-left: 22px !important;
}
.mL23 {
  margin-left: 23px !important;
}
.mL24 {
  margin-left: 24px !important;
}
.mL25 {
  margin-left: 25px !important;
}
.mL26 {
  margin-left: 26px !important;
}
.mL27 {
  margin-left: 27px !important;
}
.mL28 {
  margin-left: 28px !important;
}
.mL29 {
  margin-left: 29px !important;
}
.mL30 {
  margin-left: 30px !important;
}
.mL35 {
  margin-left: 35px !important;
}
.mL40 {
  margin-left: 40px !important;
}
.mL-40 {
  margin-left: -40px !important;
}
.mL45 {
  margin-left: 45px !important;
}
.mL50 {
  margin-left: 50px !important;
}

.pT0 {
  padding-top: 0px !important;
}
.pT1 {
  padding-top: 1px !important;
}
.pT2 {
  padding-top: 2px !important;
}
.pT3 {
  padding-top: 3px !important;
}
.pT4 {
  padding-top: 4px !important;
}
.pT5 {
  padding-top: 5px !important;
}
.pT6 {
  padding-top: 6px !important;
}
.pT7 {
  padding-top: 7px !important;
}
.pT8 {
  padding-top: 8px !important;
}
.pT9 {
  padding-top: 9px !important;
}
.pT10 {
  padding-top: 10px !important;
}
.pT11 {
  padding-top: 11px !important;
}
.pT12 {
  padding-top: 12px !important;
}
.pT13 {
  padding-top: 13px !important;
}
.pT14 {
  padding-top: 14px !important;
}
.pT15 {
  padding-top: 15px !important;
}
.pT16 {
  padding-top: 16px !important;
}
.pT17 {
  padding-top: 17px !important;
}
.pT18 {
  padding-top: 18px !important;
}
.pT19 {
  padding-top: 19px !important;
}
.pT20 {
  padding-top: 20px !important;
}
.pT21 {
  padding-top: 21px !important;
}
.pT22 {
  padding-top: 22px !important;
}
.pT23 {
  padding-top: 23px !important;
}
.pT24 {
  padding-top: 24px !important;
}
.pT25 {
  padding-top: 25px !important;
}
.pT26 {
  padding-top: 26px !important;
}
.pT27 {
  padding-top: 27px !important;
}
.pT28 {
  padding-top: 28px !important;
}
.pT29 {
  padding-top: 29px !important;
}
.pT30 {
  padding-top: 30px !important;
}
.pT35 {
  padding-top: 35px !important;
}
.pT40 {
  padding-top: 40px !important;
}
.pT45 {
  padding-top: 45px !important;
}
.pT50 {
  padding-top: 50px !important;
}
.pR0 {
  padding-right: 0px !important;
}
.pR1 {
  padding-right: 1px !important;
}
.pR2 {
  padding-right: 2px !important;
}
.pR3 {
  padding-right: 3px !important;
}
.pR4 {
  padding-right: 4px !important;
}
.pR5 {
  padding-right: 5px !important;
}
.pR6 {
  padding-right: 6px !important;
}
.pR7 {
  padding-right: 7px !important;
}
.pR8 {
  padding-right: 8px !important;
}
.pR9 {
  padding-right: 9px !important;
}
.pR10 {
  padding-right: 10px !important;
}
.pR11 {
  padding-right: 11px !important;
}
.pR12 {
  padding-right: 12px !important;
}
.pR13 {
  padding-right: 13px !important;
}
.pR14 {
  padding-right: 14px !important;
}
.pR15 {
  padding-right: 15px !important;
}
.pR16 {
  padding-right: 16px !important;
}
.pR17 {
  padding-right: 17px !important;
}
.pR18 {
  padding-right: 18px !important;
}
.pR19 {
  padding-right: 19px !important;
}
.pR20 {
  padding-right: 20px !important;
}
.pR21 {
  padding-right: 21px !important;
}
.pR22 {
  padding-right: 22px !important;
}
.pR23 {
  padding-right: 23px !important;
}
.pR24 {
  padding-right: 24px !important;
}
.pR25 {
  padding-right: 25px !important;
}
.pR26 {
  padding-right: 26px !important;
}
.pR27 {
  padding-right: 27px !important;
}
.pR28 {
  padding-right: 28px !important;
}
.pR29 {
  padding-right: 29px !important;
}
.pR30 {
  padding-right: 30px !important;
}
.pR35 {
  padding-right: 35px !important;
}
.pR40 {
  padding-right: 40px !important;
}
.pR45 {
  padding-right: 45px !important;
}
.pR50 {
  padding-right: 50px !important;
}
.pB0 {
  padding-bottom: 0px !important;
}
.pB1 {
  padding-bottom: 1px !important;
}
.pB2 {
  padding-bottom: 2px !important;
}
.pB3 {
  padding-bottom: 3px !important;
}
.pB4 {
  padding-bottom: 4px !important;
}
.pB5 {
  padding-bottom: 5px !important;
}
.pB6 {
  padding-bottom: 6px !important;
}
.pB7 {
  padding-bottom: 7px !important;
}
.pB8 {
  padding-bottom: 8px !important;
}
.pB9 {
  padding-bottom: 9px !important;
}
.pB10 {
  padding-bottom: 10px !important;
}
.pB11 {
  padding-bottom: 11px !important;
}
.pB12 {
  padding-bottom: 12px !important;
}
.pB13 {
  padding-bottom: 13px !important;
}
.pB14 {
  padding-bottom: 14px !important;
}
.pB15 {
  padding-bottom: 15px !important;
}
.pB16 {
  padding-bottom: 16px !important;
}
.pB17 {
  padding-bottom: 17px !important;
}
.pB18 {
  padding-bottom: 18px !important;
}
.pB19 {
  padding-bottom: 19px !important;
}
.pB20 {
  padding-bottom: 20px !important;
}
.pB21 {
  padding-bottom: 21px !important;
}
.pB22 {
  padding-bottom: 22px !important;
}
.pB23 {
  padding-bottom: 23px !important;
}
.pB24 {
  padding-bottom: 24px !important;
}
.pB25 {
  padding-bottom: 25px !important;
}
.pB26 {
  padding-bottom: 26px !important;
}
.pB27 {
  padding-bottom: 27px !important;
}
.pB28 {
  padding-bottom: 28px !important;
}
.pB29 {
  padding-bottom: 29px !important;
}
.pB30 {
  padding-bottom: 30px !important;
}
.pB35 {
  padding-bottom: 35px !important;
}
.pB40 {
  padding-bottom: 40px !important;
}
.pB45 {
  padding-bottom: 45px !important;
}
.pB50 {
  padding-bottom: 50px !important;
}
.pL0 {
  padding-left: 0px !important;
}
.pL1 {
  padding-left: 1px !important;
}
.pL2 {
  padding-left: 2px !important;
}
.pL3 {
  padding-left: 3px !important;
}
.pL4 {
  padding-left: 4px !important;
}
.pL5 {
  padding-left: 5px !important;
}
.pL6 {
  padding-left: 6px !important;
}
.pL7 {
  padding-left: 7px !important;
}
.pL8 {
  padding-left: 8px !important;
}
.pL9 {
  padding-left: 9px !important;
}
.pL10 {
  padding-left: 10px !important;
}
.pL11 {
  padding-left: 11px !important;
}
.pL12 {
  padding-left: 12px !important;
}
.pL13 {
  padding-left: 13px !important;
}
.pL14 {
  padding-left: 14px !important;
}
.pL15 {
  padding-left: 15px !important;
}
.pL16 {
  padding-left: 16px !important;
}
.pL17 {
  padding-left: 17px !important;
}
.pL18 {
  padding-left: 18px !important;
}
.pL19 {
  padding-left: 19px !important;
}
.pL20 {
  padding-left: 20px !important;
}
.pL21 {
  padding-left: 21px !important;
}
.pL22 {
  padding-left: 22px !important;
}
.pL23 {
  padding-left: 23px !important;
}
.pL24 {
  padding-left: 24px !important;
}
.pL25 {
  padding-left: 25px !important;
}
.pL26 {
  padding-left: 26px !important;
}
.pL27 {
  padding-left: 27px !important;
}
.pL28 {
  padding-left: 28px !important;
}
.pL29 {
  padding-left: 29px !important;
}
.pL30 {
  padding-left: 30px !important;
}
.pL35 {
  padding-left: 35px !important;
}
.pL40 {
  padding-left: 40px !important;
}
.pL45 {
  padding-left: 45px !important;
}
.pL50 {
  padding-left: 50px !important;
}
.pL60 {
  padding-left: 60px !important;
}

/* 로그인 */
.loginWrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3770;
  transition: 0.3s;
  transform: translate(-50%, -50%);
  max-width: 900px;
  min-width: 300px;
  max-height: calc(100vh - 60px);
  min-height: 200px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.97);
  padding: 40px 40px 40px;
  box-sizing: border-box;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    1px 1px 17px rgba(0, 110, 219, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 60px 30px rgba(255, 255, 255, 3);
}
.loginWrap .loginClose {
  position: absolute;
  right: -10px;
  top: -10px;
  background: #1e429b;
  width: 37px;
  height: 37px;
  line-height: 37px;
  border-radius: 37px;
  text-align: center;
}

.loginWrap .logo {
  width: 290px;
  margin: 0px auto 0px;
}
.loginWrap .logo span {
  display: block;
  text-align: center;
  font-size: 27px;
  font-weight: bold;
  font-weight: bold;
  color: #1e429b;
  margin-top: 20px;
}
.loginWrap .logo img {
  width: 100%;
}

.loginWrap .loginCont {
  width: 100%;
  height: 100%;
}
.loginWrap .loginCont .loginBtn {
  width: 100%;
  border: 1px solid #4379ff;
  border-radius: 45px;
  font-size: 0;
}
.loginWrap .loginCont .loginBtn li {
  display: inline-block;
  width: calc(55% - 2px);
  margin: 0 -5%;
  cursor: pointer;
  line-height: 45px;
  color: #555;
  text-align: center;
  border-radius: 45px;
  font-size: 14px;
  font-weight: bold;
}
.loginWrap .loginCont .loginBtn li.on {
  background: #1e429b;
  color: #fff;
}
.loginWrap .loginCont .loginBtn li:first-child.on {
  border-right: 1px solid #4379ff;
}
.loginWrap .loginCont .loginBtn li:last-child.on {
  border-left: 1px solid #4379ff;
}

.loginWrap .loginCont .loginInput {
  margin: 10px 0 0;
}
.loginWrap .loginCont .loginInput li {
  line-height: 0;
  font-size: 0;
}
.loginWrap .loginCont .loginInput li label {
  font-size: 0;
  text-indent: -9999px;
}
.loginWrap .loginCont .loginInput li .loginInputCont {
  width: 100%;
  line-height: 40px;
  font-size: 15px;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  border: 1px solid #1e429b;
  border-radius: 7px;
  outline: none;
}

.loginWrap .loginCont .loginInput li:last-child {
  position: relative;
  padding: 0 0 0 7px;
  line-height: 25px;
  box-sizing: border-box;
}
.loginWrap .loginCont .loginInput li:last-child label {
  font-size: 13px;
  color: #333;
  text-indent: 0;
}

.loginWrap .loginCont .loginInput li:last-child .idPsdSearch {
  position: absolute;
  right: 0px;
  top: 1px;
  letter-spacing: -0.7px;
  font-size: 13px;
  padding: 0 5px;
  color: #333;
  line-height: 22px;
  border-radius: 7px;
}

.loginWrap .loginCont .loginClearBtn {
  width: 100%;
  line-height: 45px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #1e429b;
  margin-top: 10px;
  border: 1px solid #4379ff;
  border-radius: 7px;
}
.loginWrap .loginCont .loginPsdClearBtn {
  line-height: 37px;
  background: none;
  font-size: 14px;
  color: #333;
}

/* 마이페이지 */
.myPageWrap {
  padding: 20px;
  box-sizing: border-box;
  min-height: 350px;
  background: #f6fff5;
  border-radius: 17px 0 17px 7px;
}

.contTitWrap {
  position: relative;
  max-width: 1240px;
  font-size: 20px;
  font-weight: bold;
  background: #fff;
  border: 1px solid #d6ecfe;
  border-left: 3px solid #006edb;
  color: #006edb;
  padding: 11px 0 11px 13px;
  box-sizing: border-box;
  margin: 15px auto 10px;
}

.myPageMoveCont {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.myPageMoveCont li {
  width: calc(33.3% - 5px);
  margin: 0 5px;
}

/* top 마이페이지 버튼 리스트 */
.alarmWrap.myIconWrap .myList {
  position: absolute;
  right: 6px;
  top: 35px;
  width: 157px;
  height: 0;
  opacity: 0;
  border: none;
  overflow: hidden;
  transition: 0.3s;
}
.alarmWrap.myIconWrap .myList li {
  display: block;
  background: #fff;
  border-radius: 0;
}
.alarmWrap.myIconWrap .myList li a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 10px 10px;
  font-size: 15px;
  font-weight: 600;
  transition: 0.3s;
}
.alarmWrap.myIconWrap .myList li a:hover {
  color: #006edb;
}
.alarmWrap.myIconWrap .myList li:last-child a {
  border-bottom: none;
}
.alarmWrap.myIconWrap:hover .myList {
  width: 157px;
  height: auto;
  opacity: 1;
  padding: 15px 0 0 0;
  transition: 0.3s;
}

/* 로그인 통합 */
.unitedLoginWrap {
  padding: 100px 0;
}

.unitedLoginCont {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-top: 2px solid #006edb;
}
.unitedLoginCont > h3 {
  text-align: center;
  color: #fff;
  background: #006edb;
  border-radius: 7px;
  padding: 10px 0;
  font-size: 21px;
  font-weight: bold;
}
.unitedLoginCont > h4 {
  text-align: center;
  color: #006edb;
  font-size: 17px;
  font-weight: bold;
  margin-top: 10px;
}
.unitedLoginCont > h5 {
  font-size: 15px;
  font-weight: bold;
  margin-top: 15px;
}
.unitedLoginCont .unitedLoginTxt {
  border: 1px solid #d6ecfe;
  background: #f6faff;
  color: #333;
  padding: 10px;
  border-radius: 7px;
  box-sizing: border-box;
  margin: 10px 0 10px;
  font-size: 13px;
}
.unitedLoginCont .unitedLoginTxt > span {
  font-weight: bold;
  font-size: 14px;
  color: #00164d;
}
.unitedLoginCont table.common {
  margin-bottom: 20px;
}

table thead tr th,
table tbody tr td {
  font-size: 14px;
  word-break: break-all;
  letter-spacing: -0.1px;
}

table.common {
  width: 100%;
  border-top: 2px solid #006edb;
  margin: 0px 0 0px;
  table-layout: fixed;
}
/* table.common tbody tr { background: #fff; } */

table.common thead tr th,
table.common tfoot tr th {
  padding: 7px 5px;
  text-align: center;
}
table.common tbody tr td,
table.common tfoot tr td {
  padding: 7px 5px;
  text-align: center;
}
table.common tbody tr td.file{
	text-align:center;
}
table.common tbody tr td.file img{
	margin:0 auto;
}
table.common thead {
  background: #f7f7f7;
  border-bottom: 1px solid #d6ecfe;
}

table.common thead tr th {
  color: #00164d;
  font-size: 15px;
  letter-spacing: 0;
  border-right: 1px solid #d6ecfe;
  text-align: center;
  font-weight: bold;
  background: #f6faff;
}

table.common thead tr th:last-child {
  border-right: 0;
}

/* table.common tbody tr { background: #fff; cursor: pointer; transition: 0.3s; } */
/* table.common tbody tr:hover { background: #f6fffc; } */
table.common tbody tr {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
table.common tbody tr th {
  color: #00164d;
  font-size: 15px;
  letter-spacing: 0;
  border-right: 1px solid #d6ecfe;
  text-align: center;
  font-weight: bold;
  background: #f6faff;
}
table.common tbody tr td {
  color: #000;
  padding: 10px;
  white-space: normal;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

table.common tbody tr td.not {
  background: #fff;
  padding: 30px 0;
  font-weight: 500;
}

table.common tfoot tr th,
table.common tfoot tr td {
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
}

table.common tfoot tr th {
  background: #fbf8ec;
}

table.common tfoot tr td {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
}

table.common tfoot tr td:last-child {
  border-right: 0;
}

.thead-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hidden-tag {
  display: none;
}

.inputTxt {
  width: calc(100% - 0px);
  border: 1px solid #aaa;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

.contTitWrap .contTitBtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0%, -50%);
  margin-left: 0;
}
button {
  font-size: 13px;
  font-weight: bold;
  padding: 6px 10px;
  color: #fff;
  border-radius: 3px;
}
button.modify {
  background: #c21a1a;
}
button.cancel {
  background: #555;
}
button.pdf {
  background: #c80a0a;
}
button.save {
  background: #006edb;
}
button.point,
a.point{
	background:#f18700;
}
button.link {
  background: #fff;
  border: 1px solid #555;
  color: #333;
  padding: 3px 5px;
  font-size: 12px;
}
.btnArea{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:10px;
}
.btnArea .btn{
	display: inline-flex;
	padding: 12px 26px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 6px;
	background: #032A6B;
	color: #FFF;
	line-height:1.25;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.45px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.btnArea .btn:hover{
	background-color:#003b9d;
	box-shadow: 0 4px 12px rgba(0, 59, 157, 0.4);
}
.btnArea  .btn.border{
	color: #032A6B;
	border: 1px solid #032A6B;
	background-color:#fff;
}
.btnArea  .btn.border:hover{
	color:#003b9d;
	border-color:#003b9d;
}

.btnArea .btn .icon{
	display:flex;
	width: 18px;
	height: 18px;
	aspect-ratio: 1/1;
	background-repeat:no-repeat;
	background-size:auto;
	background-position:center center;
}
.btnArea .btn .icon[data-icon="down"]{
	background-image:url(../../images/common/icon_btn_down.svg);
}
.btnArea .btn .icon[data-icon="preview"]{
	background-image:url(../../images/common/icon_btn_preview.svg);
}
.btnArea .btn .icon[data-icon="previewRed"]{
	background-image:url(../../images/common/icon_btn_preview_red.svg);
}
.btnArea .btn.red{
	background-color:#983436;
}
.btnArea .btn.red:hover{
	background-color:#bf2f32;
	box-shadow: 0 4px 12px rgba(152, 52, 54, 0.4);
}
.btnArea .btn.redBorder{
	color:#983436;
	border:1px solid #983436;
	background:#fff;
}
.btnArea button {
  font-size: 15px;
  padding: 7px 15px;
}

.ToSTable {
  max-height: 100px;
  overflow: auto;
  padding: 0 10px 0 0;
  box-sizing: border-box;
  font-size: 13px;
}

textarea {
  width: 100%;
  border: 1px solid #aaa;
  min-height: 100px;
  max-height: 300px;
}

.nomalCheck {
  display: inline-block;
}
.nomalCheck span {
  position: relative;
}
.nomalCheck input {
  position: absolute;
  margin: 0px;
  padding-inline: 8px;
  padding-block: 12px;
}
.nomalCheck input[type="checkbox"] {
  appearance: none;
}
.nomalCheck input:focus-visible {
  outline: solid 2px #0f59d9;
  border-radius: 1%;
}

.nomalCheck input[type="checkbox"] + label {
  display: inline-block;
  background: url("../../images/common/mapCheck.png") no-repeat left center;
  background-size: 15px;
  padding-left: 20px;
  line-height: 20px;
  font-size: 13px;
  margin: 0 0px 0 0;
  letter-spacing: -1px;
  cursor: pointer;
  font-weight: bold;
}
.nomalCheck input[type="checkbox"]:checked + label {
  background: url("../../images/common/mapCheckOn.png") no-repeat left center;
  background-size: 15px;
}

/* paging */
.pagination {
  clear: both;
  overflow: hidden;
  height: 35px;
  margin: 0 auto;
  padding: 15px 0 0;
  font-size: 0;
  text-align: center;
}
.pagination > button {
  display: inline-block;
  overflow: hidden;
  width: 35px;
  height: 35px;
  color: #999;
  font-size: 14px;
  line-height: 35px;
  vertical-align: top;
  padding: 0;
  border-radius: 0;
}

.pagination > button > span {
  display: block;
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  text-indent: -999px;
}

.pagination > button.btn_prev {
  margin-right: 10px;
  margin-left: -1px;
}
.pagination > button.btn_next {
  margin-left: 10px;
  margin-right: -1px;
}

.pagination > button.btn_first > span {
  background: #fff url(../../images/common/pagingFirst_icon.svg) no-repeat
    center;
  background-size: 15px;
}
.pagination > button.btn_prev > span {
  background: #fff url(../../images/common/pagingPrev_icon.svg) no-repeat center;
  background-size: 15px;
}
.pagination > button.btn_next > span {
  background: #fff url(../../images/common/pagingNext_icon.svg) no-repeat center;
  background-size: 15px;
}
.pagination > button.btn_end > span {
  background: #fff url(../../images/common/pagingEnd_icon.svg) no-repeat center;
  background-size: 15px;
}

.pagination .paging {
  display: inline-block;
  height: 35px;
  font-size: 0;
  text-align: center;
}
.pagination .paging > li {
  display: inline-block;
  color: #999;
  margin-right: -1px;
}

.pagination .paging > li > button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: #fff;
  font-weight: 500;
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  line-height: 30px;
  color: #000;
  margin: 0 -1px;
  padding: 0;
  border-radius: 0;
}
.pagination .paging > li > button:hover,
.pagination .paging > li > button.on {
  border: 1px solid #00164d;
  color: #00164d;
  z-index: 10;
  font-weight: 600;
}

.pagination .paging > li > a {
  display: inline-block;
  overflow: hidden;
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  line-height: 35px;
}
.pagination .paging > li > a:hover,
.pagination .paging > li > a.on {
  border: 2px solid #2c48a5;
  color: #2c48a5;
  z-index: 10;
}

/* 
@media all and (max-width:1240px){
	#contents { overflow: scroll; }
	.mCont { position: inherit; left: 50%; top: 77px; transform: translate( -50%, 0%); width: 100%; }
	.mCont .mapWrap { width: calc(100% - 20px); }
}



@media all and (max-width:780px){
	
	#header { background: #1b2750; top: 0; padding: 2px 0; }
	
	.mCont { width: calc(100% - 20px); }
	.mCont .visualTitle h3 { font-size: 27px; letter-spacing: 0; }
	.mCont .visualTitle h1 { font-size: 37px; }
	
	.mCont .contBtn { display: block; padding-bottom: 100px; }
	.mCont .contBtn li { width: calc(33.3% - 25px); display: inline-block; vertical-align: top; margin: 37px 10px 0; }
	
	.mCont .mapWrap .mapButton button { width: 140px; padding: 9px 5px 5px 27px; }
	
	.myPageMoveCont { display: block; }
	.myPageMoveCont li { width: 100%; margin: 0 0 10px; }

}

@media all and (max-width:560px){ 
	.mCont .contBtn li { width: calc(50% - 25px); }
}

 */
 
 
 
 
 /* 공통 : 날씨정보 */
 .weatherTab{
 	position:relative;
 	padding-top:46px;
 	display: flex;
	width:100%;
	padding: 40px 0 40px 40px;
	flex-direction: column;
	align-items: flex-start;
	gap: 31px;
	background: linear-gradient(90deg, #022545 0%, #00192F 100%);
	z-index:1;
 }
 
 .weatherTab .tab-header{
 	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex-wrap:wrap;
 }
 .weatherTab .tab-header li{
	display: flex;
	padding: 4px 20px;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	background: #003463;
	color: #B3BBC2;
	line-height:1.25;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	cursor:pointer;
	flex-shrink: 0;
	transition:all .3s;
	box-sizing: border-box;
}
.weatherTab .tab-header li:hover{
	background: #0A508F;
}
 .weatherTab .tab-header li.active{
	background-color:#D3940B;
	color:#fff;
	box-shadow: 3px 4px 5.4px 0 rgba(0, 0, 0, 0.25);
}
.weatherTab .tab-header li:focus {
    outline: 1px solid #fff;
    outline-offset: -2px;
}
.weatherTab .swiper {
    width: 100%;
    height:100%;
    overflow: hidden;
}
.weatherTab .swiper-container{
	scroll-snap-type: none !important;
}

.weatherTab, 
.weatherTab .contents, 
.weatherTab .swiper-container {
    width: 100% !important;
    max-width: 100vw !important; 
    min-width: 0 !important;     
    overflow: hidden !important; 
    box-sizing: border-box !important;
}

.weatherTab .swiper-slide {
    width: 1220px !important; 
    flex-shrink: 0 !important;
    box-sizing: border-box;
}
.weatherTab .swiper-slide[data-slider="1"]{
	width: 1100px !important; 
}
.weatherTab .swiper-slide[data-slider="3"],
.weatherTab .swiper-slide[data-slider="4"],
.weatherTab .swiper-slide[data-slider="5"],
.weatherTab .swiper-slide[data-slider="6"] {
    width: 590px !important; 
}
.weatherTab .swiper-slide[data-slider="7"]{
	width: 660px !important; 
}
.weatherTab .swiper-slide:last-child {
    margin-right: 80vw !important; 
}
.weatherTab .swiper-slide:hover .tab-contents .title .tit{
	color:#D3940B;	
}
.weatherTab .weather-wrap {
    display: flex;
    flex-direction: column;
    gap:20px;
}
.weatherTab  .tab-contents {
	box-sizing: border-box;
}
.weatherTab  .tab-contents .title{
	display: flex;
	align-items: flex-end;
	gap: 30px;
	align-self: stretch;
}
.weatherTab  .tab-contents .title .tit{
	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.5px;
	transition:all .3s;
}
.weatherTab  .tab-contents .title .tit:before{
	content:"·";
	display:inline-block;
	padding-right:8px;
}
.weatherTab  .tab-contents .title .tit-info {
	display: flex;
	padding: 0 14px 2px 0;
	align-items: center;
	gap: 20px;
}
.weatherTab  .tab-contents .title .tit-info li{
	display: flex;
	align-items: center;
	gap: 4px;
}
.weatherTab  .tab-contents .title .tit-info li .label{
	color: #7B90A3;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.3px;
}
.weatherTab  .tab-contents .title .tit-info li .txt{
	color: #B4C3D0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.3px;
}
.weather-info ul{
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	padding:0;
}
.weather-info ul li{
	display: flex;
	height: 70px;
	min-width: 120px;
	padding: 10px 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	background: #051524;
	border:1px solid #051524;
	transition:all .3s;
	cursor:pointer;
	box-sizing: border-box;
}

.weather-info ul li p{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 4px;
}
.weather-info ul li .icon{
	display: flex;
	width: 32px;
	height: 32px;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
	border-radius: 100px;
	background-color: #304E6B;
	background-repeat:no-repeat;
	background-size:auto;
	background-position:center center;
	transition:all .3s;
}
/*
	풍향: .wd
	풍속: .ws
	돌풍: .wg
	기온: .temp
	기압: .pres
	수온: .wt
	조위: .wl
	염분: .sal
	아황산가스 : so2
	오존 : o3
	이산화질소 : no2
	미세먼지 : pm
	미세먼지 24시 :  pmh
	초미세먼지 : fpm
	초미세먼지 24시간 : fpmh
	통합대기환경 : aqi
	하늘상태 : sky
	강수확률 : pop
	강수형태 : pty
	강수량 : pcp
	유의파고 : wvh
	최대파고 : mwh
	평균파고 : awh
	파주기 : wvp
	해무 : fog
	
*/
.weather-info ul li[data-image="wd"] .icon{
	background-image:url(../../images/common/icon_weather_wd.svg);
}
.weather-info ul li[data-image="ws"] .icon{
	background-image:url(../../images/common/icon_weather_ws.svg);
}
.weather-info ul li[data-image="wg"] .icon{
	background-image:url(../../images/common/icon_weather_wg.svg);
}
.weather-info ul li[data-image="temp"] .icon{
	background-image:url(../../images/common/icon_weather_temp.svg);
}
.weather-info ul li[data-image="pres"] .icon{
	background-image:url(../../images/common/icon_weather_pres.svg);
}
.weather-info ul li[data-image="wt"] .icon{
	background-image:url(../../images/common/icon_weather_wt.svg);
}
.weather-info ul li[data-image="wl"] .icon{
	background-image:url(../../images/common/icon_weather_wl.svg);
}
.weather-info ul li[data-image="sal"] .icon{
	background-image:url(../../images/common/icon_weather_sal.svg);
}

.weather-info ul li[data-image="so2"] .icon{
	background-image:url(../../images/common/icon_weather_so2.svg);
}
.weather-info ul li[data-image="o3"] .icon{
	background-image:url(../../images/common/icon_weather_o3.svg);
}
.weather-info ul li[data-image="no2"] .icon{
	background-image:url(../../images/common/icon_weather_no2.svg);
}
.weather-info ul li[data-image="pm"] .icon{
	background-image:url(../../images/common/icon_weather_pm.svg);
}
.weather-info ul li[data-image="pmh"] .icon{
	background-image:url(../../images/common/icon_weather_pmh.svg);
}
.weather-info ul li[data-image="fpm"] .icon{
	background-image:url(../../images/common/icon_weather_fpm.svg);
}
.weather-info ul li[data-image="fph"] .icon{
	background-image:url(../../images/common/icon_weather_fph.svg);
}
.weather-info ul li[data-image="aqi"] .icon{
	background-image:url(../../images/common/icon_weather_aqi.svg);
}

.weather-info ul li[data-image="sky"] .icon{
	background-image:url(../../images/common/icon_weather_sky.svg);
}
.weather-info ul li[data-image="pop"] .icon{
	background-image:url(../../images/common/icon_weather_pop.svg);
}
.weather-info ul li[data-image="pty"] .icon{
	background-image:url(../../images/common/icon_weather_pty.svg);
}
.weather-info ul li[data-image="pcp"] .icon{
	background-image:url(../../images/common/icon_weather_pcp.svg);
}

.weather-info ul li[data-image="wvh"] .icon{
	background-image:url(../../images/common/icon_weather_wvh.svg);
}
.weather-info ul li[data-image="mwh"] .icon{
	background-image:url(../../images/common/icon_weather_mwh.svg);
}
.weather-info ul li[data-image="awh"] .icon{
	background-image:url(../../images/common/icon_weather_awh.svg);
}
.weather-info ul li[data-image="wvp"] .icon{
	background-image:url(../../images/common/icon_weather_wvp.svg);
}
.weather-info ul li[data-image="fog"] .icon{
	background-image:url(../../images/common/icon_weather_fog.svg);
}

.weather-info ul li .label{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
	color: #8AAAC7;
	text-align: left;
	line-height:1;
	font-size: 13px;
	font-weight: 400;
	transition:all .3s;
}
.weather-info ul li .label span{
	line-height:1;
	font-size: 13px;
	font-weight: 400;
	color: #8AAAC7;
}
.weather-info ul li .txt-wrap{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
}
.weather-info ul li .txt{
	display:inline-block;
	padding-right:4px;
	color: #DDD;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	transition:all .3s;
}
.weather-info ul li .txt:empty {
	display:none;
}
.weather-info ul li .unit{
	color: #778592;
	text-align: center;
	font-size: 11px;
	font-weight: 400;
	transition:all .3s;
}
.weather-info ul li:hover{
	border-color:#D3940B;
}
.weather-info ul li:hover .icon{
	background-color:#594924;
}
.weather-info ul li:hover .label{
	color:#D3940B;
}
.weather-info ul li:hover .txt{
	color:#D3940B;
}
.weather-info ul li:hover .unit{
	color:#D2B26F;
}
.weather-info ul li.fog .txt-wrap{
	gap:5px;
}
.weather-info ul li.fog .txt-wrap .txt{
	line-height:1.25;
	margin-bottom:-1px;
	padding-top:5px;
}
@media all and (max-width:1640px){
	.iframe-wrap .iframe{
		width:70%;
	}
	.iframe-wrap .link{
		width:30%;
		min-width:420px;
	}	
}
@media all and (max-width:1024px){
	.top-text{
		padding:1.5rem 2.5rem 2rem 2.5rem;
	}
}
@media all and (max-width:787px){
	.btnArea .btn{
		flex-direction: row-reverse;
		text-align:left;
		padding:12px 18px;
		width:100%;
	}
	.top-text{
		padding:2.5rem 1.25rem 2rem 1.25rem;
	}
	.top-text .en{
		font-size:1rem;
	}
	.top-text .tit{
		font-size:1.65rem;
	}
	.top-text .tit .point{
		display:block;
		font-size:1.8rem;
	}
	.iframe-wrap{
		flex-direction:column;
		height: auto;
		min-height: auto;
	}
	.iframe-wrap .iframe{
		width:100%;
		height: 45vh;
		min-height: 18rem;
	}
	.iframe-wrap .iframe iframe{
		/* 모바일: 지도 축소 비율 (약 40vh 높이에 맞춤) */
		transform: translate(-50%, -50%) scale(1.2);
	}
	.iframe-wrap .link{
		width:100%;
		min-width:auto;
		height: auto;
		padding:1rem 1.25rem 1rem 1.25rem;
	}
	.iframe-wrap .link a{
		gap:1rem;
	}
	.iframe-wrap .link a:after{
		transform: rotate(-90deg);
	}
	.iframe-wrap .link a .icon{
		width:1.35rem;
		height:1.35rem;
		margin-top:.2rem;
	}
	.iframe-wrap .link a .title-wrap .tit{
		font-size:1.15rem;
	}
	.iframe-wrap .link a .title-wrap{
		gap:0;	
	}
	.weatherTab {
		padding: 1.65rem 0 1.25rem 1.65rem;
		gap:18px;
	}
	.weatherTab .tab-header li {
		font-size: 0.875rem;
		padding: 0.55rem 0.75rem 0.625rem;
	}
	.weatherTab .swiper-slide {
		width: 1160px !important;
		margin-right: 0 !important;
	}
	.weatherTab .swiper-slide:last-child {
		margin-right: 0 !important;
	}
	.weather-info ul li {
		height: 4.5rem;
		min-width: 8.6rem;
		padding:10px 12px;
	}
	.weather-info ul li .txt-wrap{
		line-height:1;
	}
	.weatherTab .tab-contents .title {
		align-items: flex-start;
		gap: 0.2rem;
		flex-direction: column;
	}
	.weatherTab .tab-contents .title .tit-info{
		padding:0 0 0 12px;
	}
	.weatherTab .tab-contents .title .tit {
		font-size: 1rem;
	}
	.weatherTab, .weatherTab .contents, 
	.weatherTab .swiper-container{
		/* width: initial !important;*/
    	max-width: 100% !important; 
	}
	.weatherTab .swiper-slide[data-slider="3"],
	.weatherTab .swiper-slide[data-slider="4"],
	.weatherTab .swiper-slide[data-slider="5"],
	.weatherTab .swiper-slide[data-slider="6"] {
	    width: 580px !important; 
	}
	
}
 /* //공통 : 날씨정보 */