@charset "utf-8";
@import url(IBM/ibm.css);
/* Common ******************************/

/* Reset */
*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:focus { outline: 2px solid #FFC107;}

/*기본태그 정의*/
html, body {height:100%;padding:0;margin:0; font-size:14px}
body{font-family: 'IBM Plex Sans KR', sans-serif;  font-weight:300; letter-spacing:0; word-break: keep-all;}
body, td, select, textarea, input {}

/* 마진과 패딩의 초기화 */
body, div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote,
th, td {margin:0;padding:0;}

/* 헤더 폰트 사이즈 초기화 */
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}

/* 리스트의 스타일 제거 */
ol, ul, li {list-style:none;}

/* 테이블 스타일 초기화 */
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}

/* 보더표시 초기화 */
img,fieldset,iframe{border:0 none; vertical-align:middle}

/* 폼태그의 초기화 */
select {font-size:1.6rem;font-family: "nanumSq", sans-serif;}
input {/* font-size:1.6rem; font-family: "nanumSq", sans-serif;  padding:0 10px; */}
textarea {resize:none; font-family: 'IBM Plex Sans KR', sans-serif;  font-weight:300;}

input {border: 1px solid #e2e6eb;height: 30px; width: 100%;border-radius: 5px;font-size: 1rem;padding: 0 30px;color: #000000;}
button{background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius: 5px;}

/*폼태그의 추가디자인*/
select {border: 1px solid #e2e6eb;height: 30px; width: 100%;border-radius: 5px;font-size: 1rem;padding: 0 30px;color: #000000;background: url(/images/common/sel_arrow.png) no-repeat 100% center #fff;-webkit-appearance: none;}
select {
	-webkit-appearance: none; /*화살표 없애기chrome*/
	-moz-appearance: none;    /*화살표 없애기firefox/
	appearance: none;         /*화살표 없애기 공통/*/
}
select::-ms-expand {
	display: none;            /*화살표 없애기 IE10, 11/*/
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-weight: 500;
	color: #000000;
	opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-weight: 500;
	color: #000000;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-weight: 500;
	color: #000000;
}

input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-weight: 500;
	color: #000000;
	opacity: 1; /* Firefox */
}
input[type=text]::-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-weight: 500;
	color: #000000;
}
input[type=text]::-ms-input-placeholder { /* Microsoft Edge */
	font-weight: 500;
	color: #000000;
}

input[type=password]{ vertical-align:top}

/* 체크박스
.input_chk1 {display:inline-block; position:relative;}
.input_chk1 input[type="checkbox"] {position:absolute; top:0; left:0; margin:0; padding:3px; cursor:pointer; opacity:0;}
.input_chk1 input[type="checkbox"] + label {display:block; position:relative; padding-left:24px;}
.input_chk1 input[type="checkbox"]:not(:checked) + label:before,
.input_chk1 input[type="checkbox"]:checked + label:before {content:''; position:absolute; top:50%; left:0; width:19px; height:19px; line-height:19px; margin-top:-9px; background:url('/images/common/bg_checkbox.png') no-repeat 0 0; background-size:19px 38px;}
.input_chk1 input[type="checkbox"]:disabled + label:before {content:''; position:absolute; top:50%; left:0; width:19px; height:19px; line-height:19px; margin-top:-9px; background:url('/images/common/bg_checkbox_disabled.png') no-repeat 0 0; background-size:19px 38px;}
.input_chk1 input[type="checkbox"]:checked:disabled + label:before {background-position:0 bottom;}
.input_chk1 input[type="checkbox"]:checked + label:before {background-position:0 bottom;}
.input_chk1 input[type="checkbox"]:not(:checked):focus + label:before,
.input_chk1 input[type="checkbox"]:checked:focus + label:before {outline:1px dotted #000;}
*/

/* 라디오
.input_rdo1 {display:inline-block; position:relative;}
.input_rdo1 input[type="radio"] {position:absolute; top:0; left:0; margin:0; cursor:pointer; opacity:0;}
.input_rdo1 input[type="radio"] + label {display:block; position:relative; height:24px; padding-left:29px;}
.input_rdo1 input[type="radio"]:not(:checked) + label:before,
.input_rdo1 input[type="radio"]:checked + label:before {content:''; position:absolute; top:50%; left:0; width:24px; height:24px; line-height:24px; margin-top:-12px; background:url('/images/common/bg_radio.png') no-repeat 0 0; background-size:24px 48px;}
.input_rdo1 input[type="radio"]:checked + label:before {background-position:0 bottom;}
.input_rdo1 input[type="radio"]:disabled + label:before {content:''; position:absolute; top:50%; left:0; width:24px; height:24px; line-height:24px; margin-top:-12px; background:url('/images/common/bg_radio_disabled.png') no-repeat 0 0; background-size:24px 48px;}
.input_rdo1 input[type="radio"]:checked:disabled + label:before {background-position:0 bottom;}
.input_rdo1 input[type="radio"]:not(:checked):focus + label:before,
.input_rdo1 input[type="radio"]:checked:focus + label:before {outline:1px dotted #000;}
*/

input[type="checkbox"]{ display:none }
input[type="checkbox"] + em{ display:inline-block; width:20px; height:20px; border: 1px solid #ddd; border-radius: 3px; vertical-align:middle; }
input[type="checkbox"]:checked + em{ background:url(/images/common/icon_check.png) no-repeat center; }

input[type="radio"]{ display:none }
input[type="radio"] + em{ display:inline-block; width:25px; height:25px; margin-right:5px; background:url(/images/common/icon_radio_off.png) no-repeat 0 0; vertical-align:middle;}
input[type="radio"]:checked + em{ background:url(/images/common/icon_radio_on.png) no-repeat 0 0; }
.null_box{text-align:center;padding: 10px;border: 1px solid #ddd;margin-top: 10px;}
.add_box{}
input[id ^="datepicker"] {background: url(/images/common/icon_control.png) no-repeat 90% center;}


/*리스트스타일*/
.counter{}
.counter > li {position: relative; counter-increment: item;/*list-style-type: decimal-leading-zero;*/}
.counter > li:before{content: counter(item, decimal-leading-zero);font-weight: 600;padding-right: 20px;color: #b7b7b7;font-size: 2.2rem;}
.counter > li:after{content: '/';position: absolute;left: 28px;font-weight: 400;font-size: 1.6rem;bottom: 0;color: #b7b7b7;}


/* a태그 초기화 */
/*a {text-decoration:none;-webkit-text-size-adjust:none;color:#000;outline:0;}*//* outline 미사용 */
a {text-decoration:none;-webkit-text-size-adjust:none;color:#000;}
a:link, a:active, a:visited{text-decoration:none;}
a:hover, a:focus{text-decoration:none;/* text-decoration:underline; */}

/* hidden 처리 */
caption{width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;position:static;}
.hidden,hr{position:absolute;top:-9999px;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}

/* 스킵 네비게이션 설정 */
#skipNav{height:0;}
.skipNav{position:absolute;top:-9999px;background:#1d4899;width:100%;height:30px;text-align:center;color:white;line-height:30px;font-weight:bold;z-index:100;
	opacity:0.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);}
.skipNav:hover,
.skipNav:focus,
.skipNav:active{top:0;color:white;}

/* 텍스트정렬 */
.ta-l{text-align:left !important}
.ta-c{text-align:center !important}
.ta-r{text-align:right !important}

/*정렬*/
.fl-l {float:left !important}
.fl-r {float:right !important}
.clear-fl:after {display:block; content:''; clear:both}

.ul-inline {font-size:0}
.ul-inline > li {display:inline-block}

/* none */
.hidden {display:none;}
.blind {position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
.bgn {background:none !important;}
.bdt0 {border-top:none !important;}
.bdb0 {border-bottom:none !important;}
.bdr0 {border-right:none !important;}
.bdl0 {border-left:none !important;}
.mt0{margin-top:0 !important;}
.pd0{padding: 0 !important;}

/*버튼*/
.btn_st1 {background: #51bbe2; border:1px solid #339fc5; color:#fff;border-radius: 5px;text-align: center;font-size: 18px;height: 45px;margin: 0 auto;line-height: 45px;display: inline-block !important;padding: 0 24px;}
.btn_down {background: #003964;border:1px solid #001e34;color:#fff;border-radius: 5px;text-align: center;height: 35px;margin: 0 auto;line-height: 32px;display: inline-block !important;padding: 0 12px; cursor:pointer;}
.btn_down_simple {background: #003964;border:1px solid #001e34;color:#fff;border-radius: 5px;text-align: center;height: 35px;margin: 0 auto;line-height: 32px;display: inline-block !important;padding: 0 15px; cursor:pointer;}
.btn_down:after {content: '';background: url(/images/common/icon_down.png) no-repeat;width:18px;height:18px;display: inline-block;vertical-align: middle;margin-left: 12px;}
.btn {border-radius: 5px;text-align: center;height: 35px;margin: 0 auto;line-height: 32px;display: inline-block !important;padding: 0 15px;}
.btn.map {background: #51bbe2;border:1px solid #339fc5;color:#fff;}
.btn.map:after {content: ''; background: url(/images/common/icon_map.png) no-repeat;width:18px;height:18px;display: inline-block;vertical-align: middle;margin-left: 12px;}
.btn.fine {background: #17349f;border:1px solid #17349f;color:#fff; width: 120px}
.btn.fine:after {content: ''; background: url(/images/common/icon_fine.png) no-repeat;width:18px;height:18px;display: inline-block;vertical-align: middle;margin-left: 12px;}
.btn.list {background: #4285f4;border:1px solid #316ac8;color:#fff; width:120px}
.btn.zoom {background: #51bbe2;border:1px solid #339fc5;color:#fff;position: absolute;right: 20px;top: 8px;height: 28px;width: 90px;font-size: 14px;line-height: 28px;box-shadow: 1px 2px 4px #424242;}
.btn_shortcut {background: #003964;border:1px solid #001e34;color:#fff;border-radius: 5px;text-align: center;height: 35px;margin: 0 auto;line-height: 32px;display: inline-block !important;padding: 0 12px; cursor:pointer;}
.btn_shortcut_simple {background: #003964;border:1px solid #001e34;color:#fff;border-radius: 5px;text-align: center;height: 35px;margin: 0 auto;line-height: 32px;display: inline-block !important;padding: 0 15px; cursor:pointer;}
.btn_shortcut:after {content: '';background: url(/images/content/icon_link.png) no-repeat;width:18px;height:18px;display: inline-block;vertical-align: middle;margin-left: 12px;}


.btn_confirm {background: #51bbe2;border:1px solid #339fc5;color:#fff;line-height: 35px;border-radius: 5px;font-weight: 500;}
.btn_icon{ background:url('/images/content/btn_set.png') no-repeat 0 0; width: 34px; height:34px; overflow: hidden; display: inline-block; text-indent: -9999px;}
.tgl_btn{background: url('/images/content/map_sp.png') no-repeat -136px -41px #51bbe2;border:1px solid #339fc5;color:#fff;border-radius: 5px;width: 35px;height: 36px;display: inline-block;vertical-align: middle;text-indent: -500px;overflow: hidden;}
.tgl_btn.on{background-position: -171px -41px}
.btn_icon.download_1 {background-position: -2px -5px;}
.btn_icon.download_2 {background-position: -1px -83px;}
.btn_icon.file {background-position: -2px -42px;}

/*그리드*/
.row:after {display:block; content:''; clear:both}
.row.col1 li, .row.col2 li, .row.col3 li, .row.col4 li, .row.col5 li, .row.col6 li, .row.col7 li, .row.col8 li, .row.col9 li, .row.col10 li, .row.col11 li, .row.col12 li {display:inline; float:left;}
.row.col1 li {width:100%;}
.row.col2 li {width:50%;}
.row.col3 li {width:33.333333%;}
.row.col4 li {width:25%;}
.row.col5 li {width:20%;}
.row.col6 li {width:16.666666%;}
.row.col7 li {width:14.285714%;}
.row.col8 li {width:12.5%;}
.row.col9 li {width:11.111111%;}
.row.col10 li {width:10%;}
.row.col11 li {width:9.090909%;}
.row.col12 li {width:8.333333%;}

/* 파일다운로드 프로그레스바 */
.progressbar {position: fixed;top: 0;width: 100%;height: 100%;background: rgba(0,0,0, 0.6);z-index: 9999;}
.progressbar .circle {width: 100px;margin: 6px 6px 20px;display: inline-block;text-align: center;line-height: 1.2;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.progressbar .circle canvas {vertical-align: top;}
.progressbar .circle strong {position: absolute;top: 30px;left: 0;width: 100%;text-align: center;line-height: 40px;font-size: 30px;color: #fff;}
.progressbar .circle strong i {font-style: normal;font-size: 0.6em;font-weight: normal;color: #fff;}
.progressbar .circle span {display: block;color: #aaa;margin-top: 12px;}
