@charset "utf-8";




/*마진과 패징의 초기화*/
body, div, dl, dt,dd,ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td{margin:0; padding:0;}

/*헤더 폰트의 초기화*/
h1, h2, h3, h4, h5, h6{font-size:100%;}

/*리스트의 스타일 제거*/
ol, ul{list-style:none}

/* 폰트 강조 특성 초기화*/
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight:normal;}

/*테이블 스타일초기화*/
table{ border-collapse:collapse; border-spacing:0;}

/*이미지 및 필드셋에서 보더표시 초기화*/
fieldset, img{border: 0;}

/*캡션과 테이블헤더 텍스트 정렬 초기화*/
/*caption. th{text-align:left}/*

/*인용구 표시 초기화*/
q:before, q:after{content:'';}

/* BASIC */
/*
@font-face {font-family:nr;font-weight:100;src:url('../font/notokr-thin.eot');src:local(※), url('../font/notokr-thin.woff') format('woff');}
@font-face {font-family:nr;font-weight:300;src:url('../font/notokr-light.eot');src:local(※), url('../font/notokr-light.woff') format('woff');}
@font-face {font-family:nr;font-weight:400;src:url('../font/notokr-regular.eot');src:local(※), url('../font/notokr-regular.woff') format('woff');}
@font-face {font-family:nr;font-weight:500;src:url('../font/notokr-medium.eot');src:local(※), url('../font/notokr-medium.woff') format('woff');}
@font-face {font-family:nr;font-weight:700;src:url('../font/notokr-bold.eot');src:local(※), url('../font/notokr-bold.woff') format('woff');}
@font-face {font-family:nr;font-weight:900;src:url('../font/notokr-black.eot');src:local(※), url('../font/notokr-black.woff') format('woff');}
@font-face {font-family:nq;font-weight:100;src:url('../font/NanumSquareR.eot');src:local(※), url('../font/NanumSquareR.woff') format('woff');}
*/

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

:lang(ko) {
   font-family: Noto Sans KR, sans-serif; 
}


body {
    line-height: 24px;
    color: #111;
    font-size: 13px;
    font-family: Noto Sans KR,sans-serif;;
    font-weight: 300;
    letter-spacing: -0.08em;
	/* background-color:#1684d3;
	 */
	 min-width:1080px;
}




img {
    height: auto;
    max-width: 100%;
    border: none;
    outline: none;
    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

a, a:focus, a:active, a:link, img {
    outline: none;
}
a { text-decoration: none;}
a:hover {text-decoration: none;}


a {
    cursor: pointer;
    text-decoration: none;
    color: #616161;
    transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
}

    a:hover {
        color: #e6ae49;
        text-decoration: none;
        transition: all 0.25s ease 0s;
        -moz-transition: all 0.25s ease 0s;
        -webkit-transition: all 0.25s ease 0s;
        -o-transition: all 0.25s ease 0s;
    }

h2 {
padding-bottom:5px;
}
ol,ul {
list-style: none;
}
table {
width:100%;
}
td,th{
text-align:center;
}
.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  
    line-height: 1.5;
  
}

.tbshut .pd5 {
padding:5px !important;
}
.air_step1_bg{
background-color:#2571ff;
}
.air_step2_bg{
background-color:#56ed47;
}

.air_step3_bg{
background-color:#fbaa4a;
}

.air_step4_bg{
background-color:#f42121;
}

.air_step1_tx{
color:#2571ff;
}
.air_step2_tx{
color:#56ed47;
}

.air_step3_tx{
color:#fbaa4a;
}

.air_step4_tx{
color:#f42121;
}

h3 {margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #d9d9d9;line-height:1;font-size:29px;font-weight:500; color:#333}
.ie h3{padding-bottom:17px}
h4.tit{margin-bottom:13px;padding-left:20px;background:url(../img/titicon.png) no-repeat 0 6px;font-size:17px;font-weight:600;color:#333}
h4.tit2{position:relative;margin-bottom:6px;padding-left:13px;font-size:16px;font-weight:500;color:#444}
h4.tit2:before{display:block;content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background-color:#4ba657}
h5.tit{position:relative;margin-bottom:6px;padding-left:13px;font-size:16px;font-weight:500;color:#444}
h5.tit:before{display:block;content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background-color:#4ba657}



.top_ti {

border-bottom:1px solid #e5e5e5;
background-color:#3371b8;
}

.top_ti .topstart {
width:1080px;
margin:0 auto;
height:30px;
line-height:30px;
}

.top_ti .topstart ul{
/* width:450px; */
float:right;

}

.top_ti .topstart ul li{
padding:0px 20px;
line-height:20px;
display: inline-block;
color:#fff;

}


.topset_background {
height:70px;
border-bottom: 1px solid #e7e7e7;
}




.topset {
/* background:url(../img/top_bg.png) no-repeat; */
width:1080px;
margin:0 auto;
/* border-bottom: 1px solid #e7e7e7; */
clear:both;
}




.topset .top_left{
width:300px;
height:70px;
float:left;
}
.topset .top_right{
width:750px;
padding:10px;

float:right;

}

.top_right a:hover {
font-weight:600;
color:#337ab7;
}


.mt50{
margin-top:50px;
}


.box{
margin:10px 0px;
}



.font-sm{
font-size:18px;
margin-bottom:3px;
}
.font-mm{
font-size:28px;
margin-bottom:3px;
}


.location_title {
font-size:59px;
font-weight:700;
}


.top_right_con1 {
font-size:20px;
line-height:30px;

}

.top_right_con2 {
padding-top:10px;
font-size:76px;
line-height:70px;


}

.top_right_con3 {
font-size:24px;
line-height:30px;

}


.top_right ul{
    position: relative;
    float: right;
    padding-top: 15px;
    padding-left: 4px;
    zoom: 1;
}
.top_right li{
font-size:17px;
padding:0px 22px;
display: inline-block;
}




/* ---------------------------------- */
.content_bg{
background:url(../img/bg3_1.jpg);
background-color:#f7f8fa;
background-color:#f6f6f6;
}

.content_bg2{
background: -webkit-linear-gradient(#f7f8fa, #fff);
background: -moz-linear-gradient(#f7f8fa, #fff);
background: -o-linear-gradient(#f7f8fa, #fff);
background: linear-gradient(#f7f8fa, #fff);
/* background:url(../img/bg3.jpg); */
}


.content1 {

overflow: auto;
width:1080px;
margin:0 auto;
padding:15px 0px;
}

.left_box{
width:660px;
margin-right:10px;
float:left;
}

.right_box{
width:405px;
float:right;
}

.mid_box{

clear:both;
width:100%;

}


.con_box{
padding:20px;
background-color:#fff;
margin-bottom:20px;
}



.left_menu{

}
/* container */
#container { position:relative; width:1100px;margin:0 auto;padding:40px 0 70px}
#container:after { display: block; clear: both; content: "";}

/* content */
#content { position:relative; float:left; width:850px;min-height:600px;margin-left:40px}

/* left */
#left{float:left;width:210px}
#left h2{display:table-cell;width:210px;height:122px;background:#ff8b00 url(../img/bg-lnb-tit.png) no-repeat 100% 100%;vertical-align:middle;text-align:center;font-size:24px;font-weight:500;color:#fff}
#left h2 span{display:block;font-size:13px;font-weight:300;color:#eee}
#left>ul{border-right:1px solid #e7e7e7;background:url(../img/bg-lnb-dot.gif) repeat-y 0 100%}
#left>ul>li{background:url(../img/bg-lnb-dot.gif) repeat-x 0 100%}
#left>ul>li>a{display:block;position:relative;height:50px;padding-left:17px;line-height:50px;font-size:16px}


/* #left>ul>li>a:hover,#left>ul>li>a.hover{background-image:url(../img/bg-lnb-arrow.png);background-repeat:no-repeat;background-position:calc(100% - 15px) 50%;font-weight:500;color:#444} */

#left>ul>li>a:hover:before,#left>ul>li>a.hover:before{
	display:block;content:"";position:absolute;left:0;top:0;width:3px;height:100%;background-color:#ff8b00;background-image:url(../img/bg-lnb-arrow.png) no-repeat;
} 

#left>ul>li>ul{display:none;padding:15px 19px 14px;border-top:1px solid #e7e7e7;border-left:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;background-color:#f6f6f6}
#left>ul>li>ul>li{margin-bottom:5px}
#left>ul>li>ul>li:last-child{margin-bottom:0}
#left>ul>li>ul a{display:inline-block;position:relative;padding-left:6px;font-weight:300;font-size:14px}
#left>ul>li>ul a:before{display:block;content:"";position:absolute;left:0;top:10px;width:2px;height:2px;background-color:#666}
#left>ul>li>ul a:hover,#left>ul>li>ul .hover{text-decoration:underline;font-weight:400;color:#398043}

/* location */
#content .location {position:absolute;right:0;top:11px;font-weight:300;font-size:14px}
#content .location strong {font-weight:400;font-size:14px;color:#333}
#content .location img {display:inline-block;margin-top:-3px}
.ie #content .location img{margin-top:-5px}
#content .location span {display:inline-block; width:5px; height:15px; margin:0 9px; background:url("../img/bg_location.gif") no-repeat 50% 6px; padding:0}




/* ---------------------------------- */


/* 주간날씨---------------------------------- */

.content_week {
background:url(../img/content_bg2.png) no-repeat;
height:815px;
width:1080px;
margin:0 auto;
}


.h3_week_title{
height:40px;
font-size:45px;
padding:30px;
line-height:50px;
font-weight:800;
color:#102a4b;
clear:both;
}

.week_content_box{
padding:30px 25px;
}


ol, ul {
    margin-top: 0px;
    margin-bottom: 0px;
	padding:0px;
}
li{
	list-style: none;
}



.week_content_box ul li{

width:180px;
padding:10px 5px;
display:inline-block;
margin:6px;
height:605px;
text-align:center;
}

.weekday_bg1{
background-color:#1f4371
}
.weekday_bg2{
background-color:#2962a9
}
.weekday_bg3{
background-color:#347bd5
}
.weekday_bg4{
background-color:#609ae1
}
.weekday_bg5{
background-color:#76a7e3
}


.week_info_s1{
padding-top:30px;
padding-bottom:70px;
font-size:35px;
line-height:40px;
}


.week_info_s2{
font-size:26px;
line-height:30px;
}
.week_info_s2 img{
margin:10px;
}


.week_info_s3{
margin-top:60px;
font-size:32px;
line-height:40px;
}
.week_info_s4{
margin-top:80px;
font-size:20px;
line-height:20px;
}





/* ---------------------------------- */


ul.tab,ul.war_tab {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 43px;
    /* border-bottom: 1px solid #cdcdcd;*/
    background-color:#e1e1e1;
    width: 100%;
}
ul.tab li,ul.war_tab li {
    float: left;
    margin: 0;
    padding: 0;
    height: 43px;
    line-height: 43px;
    /* border-left: 1px solid #cdcdcd;
	border-right: 1px solid #cdcdcd;*/
    
	border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}
ul.tab li a,ul.war_tab li a {
    text-decoration: none;

    display: block;
    padding: 0 20px;
    
    outline: none;
}
ul.tab li a:hover,ul.war_tab li a:hover {
    background: #cdcdcd;
}

html ul.tab li.active, html ul.tab li.active a:hover,html ul.war_tab li.active, html ul.tab li.active a:hover {
    background: #3371b8;
	color: #fff;
}
html ul.tab li.active a,html ul.war_tab li.active a {
color:#fff !important;
}


/*media all*/
.con_box .label_title {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 8px 4px;
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
    font-weight: 300;
}


.con_box .de1 {border-color:#3371b8;color:#3371b8;}
.con_box .de2 {border-color:#333;color:#333;}
.con_box .de3 {background-color:#3371b8;color:#fff;}





.war_tp{
height:60px;}

.war_dn {
}


.bottom {
background-color:#1e5597;
height:100px;
margin:0 auto;
}

.bottom .txtv{
letter-spacing:0.1em;font-weight:200;font-size:14px;width:1100px;margin:0 auto;text-align:center;color:#fff;padding:20px;
}


/* 테이블 기본 */
table ul li {font-size:14px}
.tbl_on {margin:0 0 20px 0;border-top:2px solid #3371b8;border-bottom:1px solid #666}
.tbl {width:100%;}
.tbl.none tbody tr td:first-child {border-left:0}
.tbl.none tbody tr th:first-child {border-left:0}
.tbl.small.none td, .tbl.small.none th {padding:5px 0}
.tbl thead th, .tbl tfoot th {padding:14px 20px; border-bottom:1px solid #dcdcdc; border-left:1px solid #dcdcdc; background:#f6f6f6; text-align:center;font-weight:500;color:#333}
.tbl tbody th {padding:9px 20px 10px; border-bottom:1px solid #dcdcdc; border-left:1px solid #dcdcdc; text-align:center; color:#555; font-size:14px; font-weight:500}
.tbl thead tr:first-child th:first-child, .tbl tbody tr:first-child th:first-child {border-left:0}
.tbl tbody td {padding:7px 20px; border-bottom:1px solid #d9d9d9; border-left:1px solid #d9d9d9; text-align:center;font-weight:300}
.tbl tfoot td {padding:7px 20px; border-left:1px solid #d9d9d9; background:#f4f4f4; font-size:14px; text-align:center;}
.tbl tbody th {padding:13px 20px; border-left:1px solid #d9d9d9; background:#f4f4f4; font-size:15px; text-align:center;font-weight:500;color:#333}
.tbl tbody tr.gr {background:#f4f4f4}
.tbl tbody .gra {background:#fafafa; font-weight:500;}
.tbl tbody tr:first-child td:first-child {border-left:0}
.tbl tbody tr:first-child th:first-child {border-left:0}
.tbl tbody tr:first-child td:first-child {border-left:0}
.tbl a, .tbl strong, .tbl span {font-size:14px;}
.tbl strong{font-weight:500;color:#333}
.tbl tbody td a:hover {}
.tbl tbody td.lst {letter-spacing:-1px}
.td-pd td{padding:13px 20px !important}
.tbl td.plan {height:47px; background:url("/images/new/common/bg_plan.gif") repeat-x 0 50%}
.tbl p.txt {padding-left:8px; background:url("/images/new/content/bg_txtbox.gif") no-repeat 0 10px;font-size:14px; text-align:left}
.tbl ul.txt>li {padding-left:8px; background:url("/images/new/content/bg_txtbox.gif") no-repeat 0 10px;font-size:14px; text-align:left}
.tbl .none {border-left:0}
.tbl tbody tr:nth-last-child(1) th,.tbl tr:nth-last-child(1) td{border-bottom:0}

/* DATATABLES */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: transparent;
}
.dataTables_wrapper {
  padding-bottom: 30px;
}
.dataTables_length {
  float: left;
}
.dataTables_filter label {
  margin-right: 5px;
}
.html5buttons {
  float: right;
}
.html5buttons a {
  border: 1px solid #e7eaec;
  background: #fff;
  color: #676a6c;
  box-shadow: none;
  padding: 6px 8px;
  font-size: 12px;
}
.html5buttons a:hover,
.html5buttons a:focus:active {
  background-color: #eee;
  color: inherit;
  border-color: #d2d2d2;
}
div.dt-button-info {
  z-index: 100;
}
@media (max-width: 768px) {
  .html5buttons {
    float: none;
    margin-top: 10px;
  }
  .dataTables_length {
    float: none;
  }
}

.nowweather .nwicon{
width:33%;float:left;text-align:center;height:170px;
}



.nowweather .midhow{
width:37%;float:left;height:100px;height:170px;
}


.nowweather .midhow li{
padding:10px 20px;font-size:15px;display:block;overflow:auto;
}

.nowweather .midhow li .spa{
float:left;width:45%;
}
.nowweather .midhow li .spb{
float:right;width:55%;text-align:right;
}

.warnColor{
background:#FFE400 !important;
}
.dangerColor{
background-color:#FF0000 !important;
}

/* 대기오염 */
.air table { border-collapse: collapse;    border-spacing: 0;	width:100%; }
.air .topline{ border-top: 2px solid #2383b6;}
.air .bottomline {border-bottom: 1px solid #ddd;}
.air table th {    background-color: #ffffff;    color: #000;    font-size: 12px; border-bottom: 1px solid #ddd;}
.air table td {    font-size: 14px;    color: #414b43;    line-height: 1.5em;    text-align: center; background-color:#FFFFFF;}
.air table .on { background-color: #f7f7f7;}
.air table .on_cl { background-color: #3371b8;color:#fff;}
.air table .on_cl a{ color:#fff !important;}

.air_map_bg	{position:relative; width:100%; height:448px;  background:url(../img/air/air_map.png) center top repeat-y #e4f1f7;}
.air_map	{position:relative; width:395px; height:448px; margin:0 auto;}
.air_map div{ position:absolute; width:40px;  height:40px;   border-radius:3px; border:1px solid #cdcdcd; background:#fff; text-align:center;}
.air_map div span{ width:100%; font-size:11px; text-align:center; display:inline-block; word-spacing:-0.1px;}
.air_map div img {width:27px; margin-top:-10px;}
.air_map .map_10000 {top:90px; left:112px;}		/* 서울 */
.air_map .map_11000 {top:100px; left:68px;}		/* 인천 */
.air_map .map_12000 {top:190px; left:150px;}	/* 대전 */
.air_map .map_13000 {top:225px; left:230px;}	/* 대구 */
.air_map .map_14000 {top:145px; left:135px;}	/* 세종 */
.air_map .map_15000 {top:280px; left:270px;}	/* 부산 */
.air_map .map_16000 {top:235px; left:280px;}	/* 울산 */
.air_map .map_17000 {top:365px; left:260px;}	/* 제주 */
.air_map .map_18000 {top:285px; left:115px;}	/* 광주 */
.air_map .map_19000 {top:75px; left:210px;}		/* 강원 */
.air_map .map_20000 {top:130px; left:180px;}	/* 충북 */
.air_map .map_21000 {top:190px; left:100px;}	/* 충남 */
.air_map .map_22000 {top:240px; left:135px;}	/* 전북 */
.air_map .map_23000 {top:330px; left:100px;}	/* 전남 */
.air_map .map_24000 {top:170px; left:240px;}	/* 경북 */
.air_map .map_25000 {top:275px; left:200px;}	/* 경남 */
.air_map .map_26000 {top:65px; left:155px;}		/* 경기 */
.air .grade_0	{color:#9F9F9F; font-weight:700; border-top: 2px solid #9F9F9F; padding-top:10px;}
.air .grade_1	{color:#1277DD; font-weight:700; border-top: 2px solid #1277DD; padding-top:10px;}
.air .grade_2	{color:#0ACC21; font-weight:700; border-top: 2px solid #0ACC21; padding-top:10px;}
.air .grade_3	{color:#F79809; font-weight:700; border-top: 2px solid #F79809; padding-top:10px;}
.air .grade_4	{color:#EA0C0C; font-weight:700; border-top: 2px solid #EA0C0C; padding-top:10px;}

.air_table	{position:relative; width:100%; height:448px; overflow-y:auto;}
.air_table	table { width:95%; margin:10px;}


.h30 {height:30px;}
.h40 {height:40px;}

.leftline {
border-left:1px solid #ccc;	
}
.rightline {
border-right:1px solid #ccc;	
}
.topwidth{
line-height:30px;	
padding:0 10px;
}

.cnt .fl{
width:550px;
float:left;
}

.cnt .fr{
padding: 0px 20px; width: 200px; float: left; display: inline-block;font-size:18px;line-height:1.5;color:#aaa;
}

.gray-bg {
    background: #f7f7f7;
    color: #323232;
}
.pagination-nav ul li a {
    display: block;
    background-color: #f7f7f7;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
}
.pagination-nav ul li.active a {
    background: #323232;
    color: #fff;
}
.pagination-nav ul li {
    display: inline-block;
    margin: 0px 2px;
}
.pagination-nav {
    width: 100%;
    display: block;
    position: relative;
    text-align: center;
}
.border-box {
    border: 1px solid #f1f1f1;
    padding: 25px;
}

.legend_1{
padding:4px 10px;
width:25%;
display:inline-block;
text-align:center;
font-size:12px;
}
.air_step1_bg{
background-color:#2571ff;
}
.air_step2_bg{
background-color:#56ed47;
}

.air_step3_bg{
background-color:#fbaa4a;
}

.air_step4_bg{
background-color:#f42121;
}

.air_step1_tx{
color:#2571ff;
}
.air_step2_tx{
color:#56ed47;
}

.air_step3_tx{
color:#fbaa4a;
}

.air_step4_tx{
color:#f42121;
}
.fs-t1 {
font-size:20px;
font-weight:600;

}
.fs-t2 {
font-size:12px;
color:#464646;
}