#wrapper{width: 100%;}
#wrapper, #container{width: 100%;position: relative; }
#container{ display: flex; flex-wrap: wrap; min-width: 1920px; min-height:1020px;  }

.noscrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.noscrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.certify_con {width: 100%; height:calc(100vh);  background: url(/images/common/img_bg_login.png) center center no-repeat; }
.lopw_form{position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:480px; background-color:#fff; border-radius: 10px;}
.login_title{  letter-spacing: -0.6px; font-size:24px; font-weight:bold;  } 
.lopw_form .formBox{padding:50px 40px 30px;position: relative;z-index: 10;}
.lopw_form::before{position:absolute;top:0;left:0px;width:calc(100% + 1px);height:45px;}
.lopw_form::after{content: "";display: inline-block;position: absolute;top: 45px;left: 0;width: 100%;height: calc(100% - 45px);}
.lopw_form dl{text-align:center;}
.lopw_form dl dt{margin-bottom:20px; font-size:26px;color:#333;font-weight:bold}
.lopw_form dl dt{line-height:40px}
.lopw_form dl dd{margin-bottom:50px}
.lopw_form input[type="text"],
.lopw_form input[type="password"]{margin-bottom:5px;padding:0 10px;width:100%;height:50px; border: 1px solid #DEDFE3;}
.lopw_form input[type="text"]:focus,
.lopw_form input[type="password"]:focus{border: 2px solid #167FF2 !important;}
.lopw_form .btnBs{margin-top:15px;width:100%;background-color: #136fd2}
.lopw_form .memLink{margin-top:20px;text-align:center}
.lopw_form .memLink li{display:inline-block;line-height:14px;}
.lopw_form .memLink li:first-child{border-left:0}
.lopw_form .memLink li a{display:block;padding:0 10px}


/* 기본버튼 */
.btnBs{display:inline-block;vertical-align:middle;text-align:center;background: #146FD2;}
.btnBs a,
.btnBs button,
.btnBs input{position:relative; margin:0; display:-moz-inline-stack; display:inline-block; padding:0 18px;min-width:80px;height:38px;color:#fff;line-height:38px;font-weight:bold;text-decoration:none;white-space:nowrap;background:none;vertical-align:top;cursor:pointer;border:1px solid #5380d2;transition: all 0.2s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */}
.btnBs.big{min-width:160px}
.btnBs.big a,
.btnBs.big button,
.btnBs.big input{width:100%;height:48px;line-height:48px}
.btnBs a:hover,
.btnBs button:hover,
.btnBs input:hover{color: #fff;background:#025DBF;}

/* 작은 버튼 */
.btnSm{position:relative; left:-2px; display:inline-block; line-height:38px; margin-bottom:1px;font-size:12px;vertical-align:middle;background:#012869;border:1px solid #012869;transition: all 0.2s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */}
.btnSm a,
.btnSm button,
.btnSm input{position:relative; margin:0; display:-moz-inline-stack; display:inline-block; padding:0 15px;height:38px;font-size:13px;color:#abbad2;line-height:40px;text-decoration:none;white-space:nowrap;background:none;vertical-align:top;cursor:pointer;border:0;transition: all 0.2s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */}
.btnSm:hover{background:#012869}
.btnSm:hover a,
.btnSm:hover button,
.btnSm:hover input{color:#fff}
.btnSm::before{position:absolute;top:50%;left:15px;content:'';}
.btnSm.ic_beview a,
.btnSm.ic_beview button,
.btnSm.ic_beview input{padding-left:40px}
.btnSm.ic_beview::before{margin-top:-8px;width:18px;height:18px; color: #abbad2; background: url(/images/common/ic_beview.png) no-repeat; }
.btnSm.ic_beview:hover::before{ color:#fff; background: url(/images/common/ic_beview_ac.png) no-repeat;}





#header{width: 1920px;position:relative;top: 0px;left: 0px; z-index:50; height: 60px; background-color:#083884;}
.top_logo{position: absolute;z-index: 200;left:10px;top: 10px;}
.top_logo a{display: inline-block;width: 400px;height: 60px;background: url(/images/common/top_logo.png) no-repeat;text-indent: -9999px;}

/*
================================================================================
상단메뉴
================================================================================
*/
#gnbArea{width:100%;position:relative;clear:both;min-height:60px;z-index:150;}
#gnb{display: inline-block;position:absolute;width:100%;height: 50px;padding:0;z-index:20;left: 0;top: 13px;text-align: center;transition: background-color 0.2s}
#gnb .gnb_menu{display: inline-block;padding: 0 60px;text-align: left;}
#gnb .gnb_menu:after{display:block;clear:both;content:''}
#gnb .gnb_menu > li{float:left;}
#gnb .gnb_menu > li > a{position:relative;display:block;padding:7px 29px;height:100%;font-size:16px;color:#fff;text-decoration:none;font-weight:700}
#gnb .gnb_menu > li > a.gnb_on{ background:#012869; }

/*
================================================================================
모바일메뉴
================================================================================
*/
.btnMenu { display:none;}
#total_m_lay { display:none; } 

/*
================================================================================
검색메뉴
================================================================================
*/
.top_right_box{position: absolute;top: 0;right: 10px; color:#fff; z-index: 200; line-height:60px;}
.searchmon {width:140px; height:38px !important; color:#fff; line-height:38px !important; border:0px !important; background: #2d5497 url(/images/common/calendar1.png)  center right no-repeat; }
.searchmon:focus { background: url(/images/common/calendar1_ac.png)  center right no-repeat; }



/* 상단검색 */
.top_right_box .top_search_box{position: relative;float: left;}
.top_right_box .btn_top_search{display: inline-block;padding-left: 28px;color: #fff;margin-top: -2px}
.top_right_box .btn_top_search::before{content: "";display: inline-block;width: 18px;height: 20px;background: url(/images/common/com_img.png) -357px -24px no-repeat;position: absolute;left: 0;top: 0;}


.section01{width: 720px;  height:1020px; position: relative; background-color:#cde3fa; }


.mapzone {height:590px; margin:20px 20px 20px 20px;  }


.weatherzone { height:370px; display: flex; margin:0 20px 0 20px; background-color:#fff; border-radius: 10px;}
.weathertxt {position: relative;  width:400px; height:360px; border-radius: 10px 0 0 10px;  }
.weatherinfo {width:400px; border-radius: 10px 0 0 10px;  }
.weatherinfo h2{height:72px; line-height:72px; padding-left:50px; background:url(/images/common/h2_title.png)  20px center no-repeat; font-size:18px; }
.weatherinfo span{ position: absolute; top: 25px;right: 10px; color:#a3a7b3;  }
.weatherinfo dl{display: flex; height:42px; line-height:42px;}
.weatherinfo dl > dt{width: 90px; font-size: 16px;font-weight: bold; text-align:center; color: #74797c; flex-shrink: 0;}
.weatherinfo dl > dd{width: 110px; font-size: 19px; font-weight: bold; text-align:right; padding-right:30px; }

.khoazone {margin-top:10px; border-top:1px solid #d2d1d6;  }
.khoazone dl{display: flex; height:80px; line-height:40px; margin-top:10px; }
.khoazone dl > dt{ width: 84px; font-size: 16px;font-weight: bold; text-align:center; color: #74797c; }
.khoazone dl > dt > span{ height:40px; color:#fff;font-size: 14px; padding:6px; font-weight: normal; border-radius: 5px;}
.khoazone dl > dd{width: 316px; font-weight: bold; }
.khoazone dl > dd > ul > li {float: left;   }
.khoazone dl > dd > ul li.khoatime{ width:50px; text-align:center; }
.khoazone dl > dd > ul li.khoah{ width:108px; text-align:right; padding-right:20px; display: inline-block; }
.khoahigh { background:url(/images/common/khoahigh.png)  10px center no-repeat; color:#e23c3c; }
.khoalow { background:url(/images/common/khoalow.png)  10px center no-repeat; color:#286bb2;  }

.khoahightm { background-color: #8c95a4; }
.khoalowtm { background-color: #9eb8d1;  }


.radarzone {position: relative; width:285px; height:360px; background-color:#ccc; border-radius: 0 10px 10px 0;  overflow: hidden;}
.radarzone > img{ position: relative; max-width:none !important; left:-90px;   }


.section02{width: 610px;  height:1020px; position: relative;  }
.warringzone{ margin:20px 20px 0 20px;  background-color:#fff; }
.warringzone h2{ font-size:18px; height:40px;   }

.swiperwarringzone { position: relative;  height:112px; overflow: hidden; }

.warringslide li{height:46px;  margin-bottom:10px; position: relative;  }
.warringslide dl{display: flex; height:46px; line-height:46px;}
.warringslide dl > dt{width: 115px; font-size: 14px;font-weight: bold; text-align:center; }
.warringslide dl > dt > span{ width: 115px; display:block; border-radius: 5px; color:#fff; padding-left:22px; }
.warringslide dl > dd{ height:46px; vertical-align: middle; padding-left:10px; }
.warringslide dl > dd > div{ vertical-align: middle; padding-right:100px; line-height:16px;  position: relative;top: 50%;   transform: translateY(-50%) }
.warringslide dl > dd > span{ position: absolute; top: 0;right: 0; color:#a3a7b3;  }


.spec1 { background: #1790C7 url(/images/member/spec1.png)  12px center no-repeat; } /*강풍*/
.spec2 { background: #146FD2 url(/images/member/spec2.png)  12px center no-repeat; } /*호우*/
.spec3 { background: #35469B url(/images/member/spec3.png)  12px center no-repeat; } /*한파*/
.spec4 { background: #E9A300 url(/images/member/spec4.png)  12px center no-repeat; } /*건조*/
.spec5 { background: #0C639D url(/images/member/spec5.png)  12px center no-repeat; } /*폭풍*/
.spec6 { background: #277EA5 url(/images/member/spec6.png)  12px center no-repeat; } /*풍량*/
.spec7 { background: #B91B5B url(/images/member/spec7.png)  12px center no-repeat; } /*태풍*/
.spec8 { background: #5051BF url(/images/member/spec8.png)  12px center no-repeat; } /*대설*/
.spec9 { background: #B7812F url(/images/member/spec9.png)  12px center no-repeat; } /*황사*/
.spec12 { background: #F93333 url(/images/member/spec12.png)  12px center no-repeat; } /*폭염*/



.warringnope { height:110px; display:none; }

.warringnopebg{ position: relative; top: 40px; height: 70px;  background: transparent linear-gradient(96deg, #609EE1 0%, #8277E4 100%) 0% 0% no-repeat padding-box;  border-radius: 6px; } 

.warringnope_txt1 { position: absolute;left: 30px;top: 20px; color:#fff; }
.warringnope_txt1 span { padding-left:5px; font-size:20px; font-weight:bold; }
.warringnope_txt2 { position: absolute;right: 30px;top: 20px; color:#fff; }
.warringnope_txt2 span { padding-left:5px; font-size:20px;  font-weight:bold;}
.warringnope_img { position: absolute; width:253px; height:98px; left: 50%; left:50%; background:url(/images/member/img_family.png)  center center no-repeat;
transform: translate(-50%, -29%); 
}


.awszone { margin:20px 20px 20px 20px; background-color:#fff; overflow: hidden;}

.awstb th,.awstb td{border:0}
.awstb {width:100%;border-spacing:0;border-top:1px solid #d1d2d6;border-left:0;border-right:0;border-bottom:1px solid #d5d5d5;border-collapse: collapse}
.awstb tr { text-align: center; }
.awstb thead th{padding:10px 0;color:#333;line-height:26px;background:#f8f8f8;border-bottom:1px solid #555557 ;border-left:1px solid #d2d1d6}
.awstb thead th:first-child{border-left:0}
.awstb thead tr th.fnone{border-left:0 !important}
.awstb thead th[colspan]{border-bottom:1px solid #d2d1d6}/* th가 두줄이상으로 합쳐질때 border-bottom 값 */
.awstb thead th[rowspan]{border-right:1px solid #d2d1d6}/* th가 두줄이상으로 합쳐질때 border-right 값 */
.awstb thead th[rowspan]:last-child{border-right:0}
.awstb thead th.none{border-bottom:1px solid #d2d1d6}/* th가 한줄일때 class추가 */
.awstb tbody th{padding:10px;font-weight:bold;background:#fafafa;border-left:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}
.awstb tbody th:first-child{border-left:0}
.awstb tbody th[rowspan]{border-right:1px solid #d5d5d5}
.awstb tbody tr:first-child th,.awstb tbody tr:first-child td{border-top:1px solid #d5d5d5}
.awstb tbody td{line-height:39px; background:#fff;border-left:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}
.awstb tbody td:first-child{border-left:0}
.awstb tbody td[rowspan]{border-right:1px solid #d5d5d5}
.awstb tbody td[rowspan]:last-child{border-right:0}
.awstb tbody td+th{border-left:1px solid #d5d5d5}
.awstb tfoot th{padding:10px 5px;background:#fafafa;border-right:1px solid #d5d5d5}
.awstb tfoot td{padding:10px 5px;border-left:1px solid #d5d5d5}
.awstb tfoot td[colspan]{border-left:0}


.section03{width: 590px;  height:1020px; position: relative; background-color:#eee; }
.rainmonzone h2, .rainstzone h2, .tempzone h2 { font-size:18px; height:40px;    }
.rainmonzone { margin:20px 20px 0 20px; }
.chartrainmon{ height:265px; background-color:#fff; border-radius: 10px; }

.rainstzone { margin:30px 20px 0 20px; }
.chartrainst{ height:265px; background-color:#fff; border-radius: 10px; }


.tempzone { margin:30px 20px 0 20px; }
.charttemp{ height:265px; background-color:#fff; border-radius: 10px; }
/*
=========================================================================
반응형 레이아웃 css
=========================================================================
*/
@media all and (max-width: 1025px){

	.certify_con > div{float:none;width:90%}
	.certify_con > div .tit{min-height:auto;}
	.certify_con > div .box{padding-top:50px;min-height:auto}
	.certify_con > div .box .btn_list{bottom:20px;}



#header{width: 100%;}
#gnbArea{ display:none;}
#container{min-width: 100%; }
.section01, .section02, .section03 { width: 100%; height:auto; }
.warringzone{ height:auto;}
.warringslide dl > dd  { position: relative;display:block;}
.warringslide dl > dd > div{  display: block; padding: 13px 0 0 0; }
.warringslide dl > dd > span{ width:200px; top:-15px; position: absolute; left:10px; display:block; }


.weatherzone { margin: 0 5px  0 5px; }

.mapzone {
	margin:5px;
    position: relative;
    padding-top: 80%;
    width: 100%-5px;;
    height: 0;
}

/* iframe */
.mapzone > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chartrainmon, .chartrainst, .charttemp{ height:auto; }

}