@charset "utf-8";
/* CSS Document */

/* common */
@font-face { font-family: 'NG'; font-style: normal; font-weight: 400; src: url(../fonts/NanumGothic.eot); src: url(../fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),  url(../fonts/NanumGothic.woff) format('woff'); }

html, body, div, span, p, a, li { font-family: '나눔고딕', NanumGothic, 'NG', 맑은고딕, Verdana, Tahoma, Dotum, '돋움'; font-size: 14px; color: #333; /*letter-spacing: -1px;*/ }
table, tr, td, input, textarea, option { font-size: 13px; }
html, body { position: relative; font-size: 0; margin: 0px; padding: 0px; width: 100%; min-height: 100%; height: 100%; display: inline-block; }

input[type=checkbox], input[type=radio]  {
	margin: 0;
	line-height: 0;
	box-shadow: none !important;
}

figure { text-align: center; border: 1px solid #dedede; margin-top: 6px; }
figure img { padding: 12px; max-width: 100%; }
figcaption { font-size: 13px; padding: 4px; color: #666; text-align: center; margin-bottom: 20px; /*border-top: 1px solid #dedede; background: #efefef;*/ }
figure .un_caption { margin-bottom: 20px; }
strong { font-weight: 600; }
ul { margin: 0px; padding: 0px; list-style: none; display: inline-block; }
p {margin:0;}
li a { text-decoration: none; color: #444; }
a, a:hover, a:focus { color: #14538f; border: none; text-decoration: none; outline: none !important; -moz-outline-style: none; }
.btn, .btn:hover, .btn:focus { text-decoration: none; outline: none !important; -moz-outline-style: none; transition: all 0.3s ease;}
.btn:active {
	box-shadow: none;
	background-color: transparent;
	border-color: transparent;
}

i.fa, .btn i.fa { margin: 0px; }

.clear { clear: both !important; }
.f_L { float: left !important; }
.f_R { float: right !important; }
.t_L { text-align: left !important; }
.t_C { text-align: center !important; }
.t_R { text-align: right !important; }
.noPadding { padding: 0 !important; }
.textEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.layoutWrap {
	display: block;
	width: calc(100% - 140px);
	position: relative;
	margin: 0px auto;
	clear: both;
	font-size: 0;
}
.layoutWrap .gnbWrap {
	display: flex;
	justify-content: flex-end;
}
.contentWrap { min-width: 100%; display: inline-block; position: relative; clear: both; float: left; background-color: #fff; font-size: 0; }

/********** homeHeader **********/
/* main */
body.main {min-height:900px; min-width:1100px; }
body.main .mainBG {width:100%; height:100%; background:url('../../img/main/main_bg.png'); background-size:100% 100%;  background-position:center;}
body.main .contentWrap {background-color:transparent;}
body.main .mainBG .patternBg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; background:rgba(0,0,0,0.10) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGUlEQVQYV2NkQABjRijbmIGB4SyIA2aABAEabgI3VKpgCwAAAABJRU5ErkJggg==');}

/*header
17px => 12px 변경 
*/
.topLogo { padding: 12px 4px; }
.topLogo a { display: block; }
.mainTitle a {padding: 15px 10px; font-family: '나눔고딕', NanumGothic, 'NG', 맑은고딕, Verdana, Tahoma, Dotum, '돋움'; font-size: 20px; color: #fff; letter-spacing: -2px;}

/**
top:32px; => top:0px;
*/	 
body.main .headerContainer { z-index: 1000; position:absolute; top:0px; left:0; height: 80px; background-color:transparent; border-bottom: 1px solid #ccc; }
body.sub .headerContainer .patternBg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-10; background:rgba(0,0,0,0.10) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQYV2NkQAP///+XZEQWAwswMj6HC8IEQIrAgsgCYEF0AZAgAL95ExwZjFIOAAAAAElFTkSuQmCC');}
body.gisSub {overflow:hidden;}

/*topQuick*/
.topPanelContainer {position:absolute; font-size:0; background-color: #efefef !important; z-index:999; height:32px; border-bottom:1px solid #d7d7d7;}
.topPanelContainer .tSlogan {color:#7f7f7f; line-height:32px;}
.topPanelContainer .tSlogan span {color:#337ab7;}

.topPanelContainer .tQuick ul {margin:0px; padding:0px;}
.topPanelContainer .tQuick ul li {float:left; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; margin-left:-1px;}
.topPanelContainer .tQuick ul li a {display:block; color:#7f7f7f; line-height:32px; height:32px; width:74px; text-align:center;}
.topPanelContainer .tQuick ul li a:hover {color:#333;}

.topPanelContainer .tQuick ul li.gisQuick a{width:auto; background-color:#fff; padding:0 10px; color:#444; font-weight: 600;}
.topPanelContainer .tQuick ul li.gisQuick a:hover {background:#ffdb6c; text-shadow: 0px 1px 1px rgba(255,255,255,1); color:#111;}

.gnbMoveBar {background-color:#ffc618; width:150px; height:3px; position:absolute; bottom:0; left:0; transition:all 0.3s;}

/* gnb*/
.gnbContainer { position: relative; z-index: 1; font-size: 0; }
.gnbContainer .gnb {
	display: flex;
	width: calc(100% - 140px);
	justify-content: flex-end;
	margin: 0 auto;
	margin-bottom: 0px;
}
.gnbContainer .gnb li { text-align: center; cursor: pointer;}
/*	jcpark 변경 
상위메뉴 너비 추가 x-> 180px; */
.gnbContainer .gnb li a { display: block; color: #fff; padding:0px 23px; width:140px; height:80px; line-height:80px; font-weight: 600; font-size: 13px; text-shadow:1px 0px 1px rgba(0,0,0,0.3);}
.gnbContainer .gnb li:hover, .gnbContainer .gnb li.active, .gnbContainer .gnb li a:hover, .gnbContainer .gnb li.active a, .gnbContainer .gnb li.active a:hover { color: #ffdb6c; text-decoration: none; }

.gnbSubContainer { display: none; background: rgba(14, 42, 69, 0.9); width: 100%; left:0; position: absolute; z-index: 100005; margin-top: 80px; box-shadow: 0px 2px 3px rgba(0,0,0,0.11); }

/* jcpark 변경 신규 디자인 적용*/

body.sub .section .patternBg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-10; background:rgba(0,0,0,0.10) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQYV2NkQAP///+XZEQWAwswMj6HC8IEQIrAgsgCYEF0AZAgAL95ExwZjFIOAAAAAElFTkSuQmCC');}

.section .gnbContainer {
	display: flex;
	width:100%;
	background: #212f3c;
}
.section .gnbContainer .gnb li a {
	display: block;
	height: auto;
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	line-height: 25px;
	padding: 6px 26px;
	text-shadow: none;
}

.section .gnbSubContainer {
	display: none;
	background: rgba(14, 42, 69, 1); 
	position: absolute;
	z-index: 100;
	margin-top: 0;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.11); 
}



/*	jcpark 변경 
상위메뉴 하단 메뉴 높이 변경 188px-> 153px; */
.gnbSubContainer .gnbSub {
	padding: 6px 0px;
	width: 137px !important;
}

.gnbSubContainer .gnbSub li {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 2px 0;
}
.gnbSubContainer .gnbSub li:last-child { border-bottom: none; }
.gnbSubContainer .gnbSub li a { display: block; color: #eee; padding: 5px 10px; font-size: 15px;  border: 2px solid transparent; padding:8px; transition: all 0.3s ease; border-radius: 18px;}
.gnbSubContainer .gnbSub li a:hover, .gnbSub li.active a { border-color:#ffc618; color: #ffdb6c; text-decoration: none;  }

/********** main **********/

/*mainGraphic*/
/**
padding-top: 112px; => padding-top: 80px;
*/
.mainGraphicContainer { position: relative; height:100%; padding-top: 80px;  padding-bottom:191px; }
.mainGraphicContainer .layoutWrap { height: 100%; }
@media all and (min-width: 1300px) {
	body.main .layoutWrap {width:90%; max-width:1500px;}
}

.mainGraphic {}

/*slogan*/
.slogan {position:absolute; left:10px; top:40px; text-shadow:1px 1px 2px rgba(0,0,0,0.5);}
.slogan h2 {font-size:60px; color:#fff; font-weight:100; letter-spacing:-3px;}
.sloganDetail {padding-left:8px; line-height:28px; margin-top: 10px;}
.sloganDetail li {font-size:18px; font-weight:600; color:#fff;}
.mQuickBtn {position:absolute; left:10px; bottom:40px;}
.mQuickBtn li {padding:0 20px 0 0;}
.mQuickBtn .mqIcon {width:80px; height:80px; border:1px solid #fff; border-radius:80px; line-height:80px; text-align:center;}
.mQuickBtn p {text-align:center; font-size:16px; color:#fff;  text-shadow:1px 1px 1px rgba(0,0,0,0.4); padding-top:10px;}

/*mainBanners */
.mainBanners {width:350px; height:100%;}
.mainBanners li {border:1px solid rgba(255, 255, 255, 0.5); background:rgba(0,0,0,0.4); margin-top:-1px; padding:20px; position:relative; z-index:0;}
.mainBanners li > a {display:inline-block; width:100%; height:100%;}
.mainBanners li > a * {color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.4);}
.mainBanners li:hover {border-color:#ffdb6c; background:rgba(0,0,0,0.7);}
.mainBanners li:hover * {color:#ffdb6c;}
.mainBanners li:nth-child(1) {height:30%;}
.mainBanners li:nth-child(2) {height:30%; background:#000;}
.mainBanners li:nth-child(2):hover .bgImg img {opacity:0.5;}
.mainBanners li:nth-child(3) {height:20%;}
.mainBanners li:nth-child(4) {height:20%;}
.mainBanners li .bgImg {width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1;}
.mainBanners li .bgImg img {width:100%; height:100%; opacity:0.9;}
.mainBanners li .moreBtn {font-size:20px;}
.mainBanners li > a > p {font-size:15px; margin:20px 0 0;}
.mainBanners li .bottomTitle {background:rgba(0,0,0,0.5); width:100%; padding:20px; position:absolute; bottom:0; left:0;}
.mainBanners li .bottomTitle p {margin:0;}

/*contentsContainer*/
.contentsContainer { padding: 0px; }
body.main .contentsContainer { padding: 0; }

/*latestPanel*/
.latestPanel hr {clear: both; margin: 42px 0; position: absolute; left: 0; top: 0; border-color: rgba(255,255,255,0.2); width: 100%;}
.latestPanel {display:inline-block; width:100%; background:#1d4255; position:absolute; left:0; border: 1px solid rgba(255,255,255,0.2); bottom: 110px; border-left: 0; border-right: 0;}
.latestPanel dl {width: 50%; height: 42px; line-height: 42px; margin: 0; font-size:13px;}
.latestPanel dt {float:left; width:25%; height: 42px; line-height: 42px; padding:0 10px; background-color:#ffc618; color:#333;}
.latestPanel dd {float:left; width:75%; color:#a7c2d7; font-size:14px;}
.latestPanel dl:last-child dt {background-color:#46687b; color:#fff;}


/********** homeFooter **********/
/*#footer { background-color: #f3f3f3; height:110px;}
#footer > .layoutWrap { padding: 20px; }

body.main #footer {background: rgba(0,0,0,0.3); position:absolute; left:0; bottom:0;}*/

.bottomLogo a { display: inline-block; margin: 3px 20px 7px 0;  }

.contactInfo { font-size: 12px; line-height: 20px; margin-bottom: 0px; letter-spacing: 0; color: #808080; }
.contactInfo span { font-size: 12px; color: #a9a9a9; letter-spacing: 0; margin-right: 6px; font-weight: 600; }
.copyright {padding: 8px 0; font-size: 10px; color: #939393; letter-spacing: 0; }
.copyright span { font-size: 10px; color: #2e6c96; letter-spacing: 0; }
.orgLink {text-align: left; }

.selectWrap { display: inline-block; margin-left: 8px; width: 200px; float: right; }


/* modal layer */
.login_popup {}
.login_popup .patternBg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; background:rgba(255,255,255,0.10) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGUlEQVQYV2NkQABjRijbmIGB4SyIA2aABAEabgI3VKpgCwAAAABJRU5ErkJggg==');}

.modal-dialog {
    width: 100% ;
    height: 100% ;
    margin: auto ;
}

.modal-content {
	border: 0;
	border-radius: 0;
}
.modal-header {
	display: flex;
	width: 100%;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
	background: #212f3c;
	color:#fff;
	border-bottom: 0;
}

.modal-header::before, .modal-header::after {
	display: none;
}

.modal-header h4 {
	color: #fff;
	font-size: 18px;
	line-height: inherit;
}
.modal-header button.close {color:#fff; text-shadow: 0px 1px 1px #000; margin-top:1px; opacity: inherit;}
.modal-header button.close:focus, .modal-header button.close:hover {color:#fff; opacity: 1;}
.modal-body {
	display: flex;
	flex-flow: column;
	height: 555px;
}
.modal-body .modal-box {
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: stretch;
	grid-column-gap: 10px;
	margin: 10px 0 0 20px;
}
.modal-body .modal-box .input-group.date {
	display: flex;
	align-items: stretch;
	margin: 0;
}
.modal-body .modal-box #startDiv {
	margin: 0;
}
.modal-body .modal-box .input-group.date input {
	display: block;
	width: 130px;
	background: #fff;
}
.modal-body .modal-box .input-group.date #btn_startChartDateIn {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}
.modal-body .modal-box .input-group.date #btn_endChartDateIn {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}
.modal-body .modal-box #searchDiv {
	display: flex;
	margin-right: 0;
}
.modal-body .modal-box #searchDiv button#btn_searchChart_in {
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-body .modal-contents {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: flex-start;
}
.modal-body .modal-contents #myChart {
	margin-top: 20px;
}	
.modal-body .modal-contents .modal-contentsR {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.modal-body .modal-contents .modal-contentsR #sejong_img {
	margin-top: 20px;
}
.modal-body .modal-contents .modal-contentsR table {
	width: 90%;
	text-align: center;
	margin-top: 20px;
	border-top: 2px solid #4469ac;
}
.modal-body .modal-contents .modal-contentsR table tr {
	border-bottom: 1px solid #ccc;
}
.modal-body .modal-contents .modal-contentsR table tr td {
	font-size: 14px;
	font-weight: 500;
	border-right: 1px solid #ccc;
	padding: 6px 0;
	text-align: center;
	vertical-align: middle;
}
.modal-body .modal-contents .modal-contentsR table tr td:last-child{
	border-right: 0;
}
.modal-body .chart-top {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    grid-column-gap: 14px;
}

.modal-body .chart-top p {
    font-size: 14px;
    position: relative;
    padding-left : 10px;
}

.modal-body .chart-top p strong {
	font-weight: 600;
    margin-right: 6px;
}
.chart-top .form-control {
    margin-bottom: 0;
}

.modal-body .chart-top p::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 5px;
    background: #087dec;
    border-radius: 2.5px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(0, -50%);
}
.chart-inner {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.modal-footer {
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
	align-items: center;
	text-align: initial;
	border: 1px solid #e5e5e5;
	padding: 15px;
}
#obserResult,#obserResult2 {
	font-size:22px;
	color:#f4291a;
	padding: 5px 0;
}
.modal-body .modal-contents .modal-contentsR table tr td.time {
	font-size: 24px;
	font-weight: bold;
	padding: 12px 0;
}
.modal-body .modal-contents .modal-contentsR table tr td.date {
	font-size: 11px;
	font-weight: 300;
}
.modal-body .modal-contents .modal-contentsR table.modal-table tr td span {
	display: block;
	font-size: 15px;
	margin: 0;
}
.modal-body .modal-contents .modal-contentsR table.modal-table tr td span.obser {
	font-weight: bold;
}
.modal-body .modal-contents .modal-contentsR table.modal-table tr.obserTr {
	height: auto;
}
.modal-body .modal-contents .modal-contentsR table.modal-table tr.obserTr.legend {
	text-align: left;
	border-bottom: 0;
}
.modal-body .modal-contents .modal-contentsR table.modal-table tr.obserTr.legend span.obserBasePoint {
	font-size: 12px;
	text-align: left;
}
.form-check {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}
.form-check > li {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.form-check > li:last-child {
	border-left: 0;
}
.form-check > li > button {
	font-size: 14px;
	padding: 0 10px;
}
.form-check > li.active {
	background: #087dec;
	border-color: #087dec;
}
.form-check > li.active > button {
	color: #fff;
}
.modal-footer button {
	transition: all 0.3s ease;
}
.login_popup .loginForm ul {width:280px;}
.login_popup .loginForm ul li span {width:60px; height:36px; line-height: 36px; display:inline-block;}
.login_popup .loginForm ul li input.form-control {display:inline-block; width:218px;}
.login_popup .loginForm button.btn {width: 84px; height: 70px; margin-top: 1px; font-size:16px; font-weight: 600;}
.login_popup .modal-footer .btnGroup li {float:left; margin-left:10px;}
.login_popup .modal-footer .saveIdWrap {height:32px; line-height: 32px;}
.login_popup .modal-footer .saveIdWrap input[type=checkbox] {margin:4px; vertical-align: middle;}
.login_popup .modal-footer .saveIdWrap label {cursor:pointer;}


/********** customize bootstrap **********/
.form-control, .btn { border-radius: 0px; }
.form-control { font-size: 13px; }
.form-group { margin-bottom: 0px; }
.row { margin: -20px -20px 0 -20px; }
.panel { border-radius: 0px; }
.panel-heading { border-radius: 0px; padding: 12px 15px; }
.panel-title { display: inline; font-weight: 600; }
.panel-footer { display: inline-block; width: 100%; height: 46px; padding: 0; background-color: #fff; }
.panel-footer p { margin-bottom: 0; }
.input-group-addon { border-radius: 0px; }
.input-group-addon .fa { margin: 0px; }
.input-group-btn i { font-size: 14px; }
.table { margin: 0px; }
.table tbody td, .table th { font-size: 13px; vertical-align: middle !important; border-top: none !important; border-bottom: 1px solid #e7e7e7; padding: 6px 4px; }
.t-nowrap thead tr td, .t-nowrap thead tr th, .t-nowrap tbody tr th, .t-nowrap tbody tr td { white-space: normal; }
.btn.btn-default:hover { color: #0073bc; border-color: #0073bc; background: none; }
.btn .fa { margin-right: 6px; }
.badge { font-weight: normal; font-size: 11px; background-color: #A7BED2; }

.nav-tabs, .nav-tabs>li>a { 
	line-height: inherit;
	border: none;
	border-radius: 0px;
	margin: 0px;
}
.nav-tabs {
	width: 100%;
	border-bottom: 1px solid #ddd !important;
}
.nav>li>a { padding: 15px; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
}

.latestT.nav-tabs.nav-justified>li>a { border-right: none; border-left: none; }
.latestT.nav-tabs.nav-justified>li>a .panel-title { width: 149px; }
.pagination {
	display: flex;
	justify-content: center;
	grid-column-gap: 5px;
	margin: 0px;
	float: none !important;
}
.pagination>li {
	display: inline-block;
	width: auto;
	height: 100%;
}
.pagination>li>a, .pagination>li>span {
	display: inline-flex;
	font-size: 10px;
	line-height: inherit;
	color: #333;
	padding: 8px 10px;
	margin: 0;
	float: none;
	cursor: pointer !important;
}
.pagination span { font-size: 12px; }
.breadcrumb { float: right; text-align: right; display: inline-block; margin: 0px; padding: 4px; background: none; }
.breadcrumb li, .breadcrumb li a { font-size: 12px; }
.breadcrumb li a { color: #23527c; }
.breadcrumb li a:hover, .breadcrumb li a:focus { text-decoration: underline; }
.dropdown-toggle { font-size: 13px; }
.dropdown-toggle:hover, .open .dropdown-toggle.btn-default { color: #1174c4; background-color: white; border-color: #1174c4; }
.input-group-btn:last-child>.dropdown-toggle { border-radius: 2px; }
.bx-wrapper { box-shadow: none !important; border: none; }
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 10px !important; }
.bxslider li { cursor: pointer; }
.tooltip { z-index: 50000; white-space:nowrap;}
.well { padding: 12px 12px 11px 12px; background-color: #F7FCFE; border: 1px solid #C7DDE5; color: #63879E; font-size: 14px; }
.well strong { color: #106395; font-size: 15px; }

/**** 2016.10.30 *****/
.latestPanel dd{padding:10px;}