@import url(font-awesome.min.css);

.table-responsive::-webkit-scrollbar {
	width: 5px; height:5px;/*스크롤바의 너비*/
}

.table-responsive::-webkit-scrollbar-thumb {
	background: #53617b; border-radius: 50px; /*스크롤바의 색상*/
}

.table-responsive::-webkit-scrollbar-track {
	background-color:#efefef; /*스크롤바 트랙 색상*/
}

.gray_bg {margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 0px; top: 0px; width: 100%; height: 100%; position: fixed; z-index: 1000; opacity: 0.5; background-color: #000;}
.ui-pager-control .ui-pg-table {height:inherit !important; font-size:13px !important;}
.ui-jqgrid .ui-jqgrid-htable {font-size:13px;}
.ui-jqgrid .ui-jqgrid-btable {font-size:13px;}
.ui-jqgrid .loading {display: none !important;}


/*#wrapper {margin-bottom:150px;}*/

/*login*/
.login_wrap	{background-position:bottom; background: url(./../image/main_bg2.png) no-repeat, linear-gradient(138deg,#1f3450 50%,#1f3450 21%,#334660 26%,#8396af 72%,#b7c6da 79%); background-size: cover;}
.login_wrap{position:relative; width:100%; z-index:100; height:100%; display: table;}
.login_wrap .login_box{width:400px; margin:0 auto; display:table-cell; vertical-align:middle;}
.login_wrap .login_box .login_img{width:100px; margin:0px auto; display: block;}
.login_wrap .login_box .tit{color: #fff; text-align: center;font-weight:bold; margin:20px 0;font-size: 17px;}
.login_wrap .login_box input{height:34px; width:280px;}
.login_wrap .login_box .login_Enter{border:1px solid #ddd; background:#fff; padding:28px 50px 50px; box-shadow:2px 3px 5px 1px #838fae; width:491px; margin:0 auto; border-radius:20px; box-shadow: 5px 4px 5px 4px #6b7c9670;}
.login_wrap .login_box .login_Enter .login_text{font-size:30px; letter-spacing:5px; font-weight:bold; text-align:center; color:#0b72bf;}
.login_wrap .login_box .login_btn{width:100%; color:#fff;  background: #587395; padding:10px; margin-top:10px; display:block; text-align:center; border-radius:50px; font-weight:bold;}
.login_wrap .login_box .login_btn:hover{color:#fff; background:#3c5575;}
.login_wrap .idpw li{margin:5px; margin-left: 25px;}
.login_wrap .idpw li strong{display:block; float:left; width:70px; font-size:16px; padding-top: 3px;  color: #106197;}
.login_wrap .idpw li span img{ margin-top: 6px;}
.login_wrap .login_box input[type=checkbox],
.login_wrap .login_box input[type=radio] {height:18px; width:18px; display: block; margin:4px 5px 0 3px; float:left;}
.login_wrap .login_btnwrap{margin-top:10px;}
.login_wrap .login_btnwrap a{border: 1px solid #ddd; display:inline-block; border-radius:3px;padding: 6px 10px; min-width:127px; text-align: center; color:#333;}
.login_wrap .login_btnwrap a:hover{background:#efefef;}

.intro_wrap{position:relative; width:100%; z-index:100; height:100%; display: table;}
.intro_box2{width:600px; margin:0 auto; display:table-cell; vertical-align:middle;}
.intro_box2 .login_Enter{overflow: hidden;  padding:35px 0px 0px; width:600px; margin:0 auto;}
.intro_box2 .login_Enter .login_text{line-height:1.3;  padding-bottom:15px; font-size:30px; word-break: keep-all; letter-spacing:1.3px; font-weight:bold; text-align:center; color:#375074;}
.intro_box2 a{float:left; width:50%;padding:5px; padding:8px 10px 30px; outline: none;}
.intro_box2 dl{text-align:center;  padding:40px 0 55px;  border-radius:10px;color: #ffffff;box-shadow: 3px 3px 4px 4px gainsboro;}
.intro_box2 dl:hover{background:#626d8b;}
.intro_box2 dt{font-size:22px; font-weight:bold; padding:180px 0 2px;}
.intro_box2 dd{font-size: 15px;}
.intro_box2 .log01{background:linear-gradient(to bottom, #429fff, #004eee);}
.intro_box2 .log01 dt{background:url(./../image/log01.png) no-repeat center 20px ; background-size:110px;}
.intro_box2 .log02{background:linear-gradient(to bottom,#2ad1e2, #04cd88);}
.intro_box2 .log02 dt{background: url(./../image/log02.png) no-repeat center 20px; background-size:120px;  padding: 180px 0 2px;}


/*error*/
.error_wrap{width:100%;height:100%;text-align: center;display: table;}
.error_wrap .error_box {display:table-cell;vertical-align: middle; width: 450px;margin:0 auto;}
.error_wrap .error_box img	{width:200px; margin:0 auto; display:block;}
.error_wrap .error_box strong{display:block; font-size:18px; line-height:1.3;padding:15px 5px 5px;}
.error_wrap .error_box p{word-break:keep-all; text-align:center; margin:0 auto; line-height:1.5; font-size:14px; padding:5px;}
.error_wrap a {display: inline-block; border-radius: 3px; padding: 6px 10px; min-width:88px; text-align:center;}

/*view_error*/
.view_error {background:url(../image/error_bg.png) no-repeat; height:1009px; background-size:cover; overflow:hidden; width:100%; padding:40px;}
.view_error .error_left {float:left; padding:270px 0 0 240px; width:60%;}
.view_error .error_left .bg_tit {line-height:1.5;}
.view_error .error_left .bg_tit strong {font-size:47px; color:#1f3147;}
.view_error .error_left .bg_tit p {font-size:18px; color:#546270;}
.view_error .error_left .btn_wrap .btn_center {text-align:left; margin-top:20px;}
.view_error .error_left .btn_wrap .btn_center .btn {width:140px; color:#fff; padding:8px; margin-right:5px; font-size:14px;}

.view_error .error_right {float:right; padding:310px 0; width:40%;}
.view_error .error_right img {width:650px;}

/*사이트멥*/
#allmenu{position:fixed;top:0;left:0;z-index:100;min-width:1024px;width:100%;height:100%;min-height:100%;padding-top:100px;text-align:left;}
#allmenu .wrap_allmenu{background-color:#fff;}
#allmenu .inner_allmenu{width:1014px;margin:0 auto;}
#allmenu .title_wrap{position:absolute;left:0;top:0;width:100%;height:100px;
		background-image: -ms-linear-gradient(left, #067fd9 0%, #0433b9 50%, #0432b9 100%);
		background-image: -moz-linear-gradient(left, #067fd9 0%, #0433b9 50%, #0432b9 100%);
		background-image: -o-linear-gradient(left, #067fd9 0%, #0433b9 50%, #0432b9 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #067fd9), color-stop(0.5, #0433b9), color-stop(1, #0432b9));
		background-image: -webkit-linear-gradient(left, #067fd9 0%, #0433b9 50%, #0432b9 100%);
		background-image: linear-gradient(to right, #067fd9 , #0433b9, #0432b9);}

.sitemap_wrap{width:1120px;margin:0 auto; padding-top:66px;}
.site_map {padding:0 20px;}
.site_map .depth_01:first-child{border-top:0;}
.site_map .depth_01 a:hover{color:#1c65ca;}
.site_map .depth_01{overflow:hidden; border-top:1px solid #dadada;}
.site_map .depth_01 li:after{display:block;content:'';clear:both;}
.site_map .depth_01>li{padding:20px 0;}
.site_map .depth_01>li.en{display:none;}
.site_map .depth_01>li>a{font-weight:bold; float:left; font-size:22px;color:#146be3; margin:-5px 0 5px;}
.site_map .depth_02{float:right;width:826px;font-size:0;}
.site_map .depth_02:after{display:block;content:'';clear:both;}
.site_map .depth_02>li{display:inline-block;position:relative;width:33%; vertical-align:top;}
.site_map .depth_02>li:nth-child(-n+5){margin-top:0;padding-top:0;border-top:0;}
.site_map .depth_02>li:nth-child(6):before{display:block;content:'';position:absolute;left:0;top:0;width:826px;height:1px;}
.site_map .depth_02>li a{font-weight:bold; font-size:16px;color:#000; letter-spacing:-1px; float:left; margin-right:3px;}
.site_map .depth_02 .tit_wrap{width:100%;  overflow:hidden;}
.site_map .depth_02 .tit_wrap .favorite{margin-top:4px;}
.site_map .depth_02 .tit_wrap .help_btn{margin-top:4px;}
.site_map .depth_03{clear:both;}
.site_map .depth_03 li{padding-top:10px;overflow:hidden;}
.site_map .depth_03 li:first-child{margin-top:12px;}
.site_map .depth_03 li a{font-weight:400;font-size:14px;color:#6b6b6b; line-height:1.2; float:left; padding-right: 3px;}

.site_map button{margin:0 1px;}
.site_map .favorite{float:left; position:inherit; border:1px solid #dadada; color:#b5b5b5; border-radius:50px; width:18px; height:18px;text-align:center; font-size:14px;}
.site_map .on{color:#fff; background:#ffc535; border:1px solid #ffc535;}
.site_map .off{color:#fff; background:#ddd; border:1px solid #ddd;}

.site_map .help_btn{float:left; display:block; border-radius:50px; width:18px; height:18px;text-align:center; color:#fff; background: #a5a8b1; border:0;}
.site_map .help_btn strong{font-size: 11px;}


/*메인박스*/
.box_wrap{overflow:hidden;}
.box_wrap .box_50{width:50%; float:left;}
.box_wrap .map_wrap {height:450px; overflow:hidden; padding:0 20px;}
.box_wrap .map_wrap img{width:100%;}

/*main_wrap*/
.main_wrap{width:1800px; margin:0 auto;}

.main_wrap table thead th {background:#f0f5ff; color:#2e2e2e;}
.main_wrap table{border-top:0; font-size:14px;}
.main_wrap table.cm_table td,
.main_wrap table.cm_table th{padding:4px 0; font-size:12px;}

.error{color:#ff2364;}

.m_box{width:50%; float:left;}
.m_box .box{position:relative; padding:20px; background:#fff;border-radius:3px; overflow: hidden; box-shadow:3px 3px 3px 3px #d2d6db; height:355px;}
.m_box .sub_chart_box{position:relative; padding:20px 30px; background:#fff;border-radius:3px; overflow: hidden; box-shadow:3px 3px 3px 3px #d2d6db; height:310px; margin-bottom:15px}
.m_box .title{overflow:hidden; padding-bottom:8px;}
.m_box .title h4{font-weight:bold; float:left; font-size:20px;}
.m_box .title button{float:right; display:block; width:25px; height:25px; line-height:25px; font-size:17px; color:#a5a5a5;}
.m_box .title button:hover{color:#666970;}
.m_box .title p{clear:both; width:100%; background:#f5f5f5; padding:5px 10px;  border-radius:3px;}
.m_box h5{font-size:15px; position:relative; padding:0 0 3px 10px;}
.m_box h5:after {display:block; position: absolute;left:0px; top:9px; width: 3px; height: 3px; border-radius: 50%; background: #9e9f9f;content: '';}
.m_box .table-responsive{float:left; overflow:auto; width:100%;}

.m_box .padding_box {padding:10px;}

.wide_box{width:100%;}

.block_box2{overflow:hidden;}
.block_box2 li{width:50%; float:left;}
.block_box3{overflow:hidden;}
.block_box3 li{width:33.3%; float:left;}
.block_box3 li:nth-child(1){width:24%;}
.block_box3 li:nth-child(2){width:36%;}
.block_box3 li:nth-child(3){width:40%; padding-left:5px;}

.block_box3 .graph_wrap3 .graph_box {width:100%;}
.block_box3 .graph_wrap3 .table-responsive {width:33.3%;}
.block_box3 .graph_wrap3 .padding_box{width:33.3%; float:left;}

.blue{color:#2464e1;}
.rad{color: #ff1849;}

/* 그래프 스타일 css */
.graph_wrap{overflow:hidden; width:100%;}
.graph_wrap .table-responsive{width:55%;}
.graph_wrap .graph_box{width:45%;float:left; background:#fafafa; height:165px; /* padding:5px; */}
.graph_wrap .padding_box{padding:0 2px;}

/* notice */
.box_wrap .notice{width:100%;}
.lst_notice li{width:33.3%; float:left; border-right:1px solid #ddd;}
.lst_notice li:last-child{border-right:0;}
.notice .box{min-height:auto; overflow:hidden; height:183px;}

.lst_notice .date{float:left; width:85px; padding:12px 0 0; text-align:center; line-height:1; font-size:13px; color:#657c88}
.lst_notice .date strong{margin-bottom:-10px; display:block; font-size:40px; font-weight:300}
.lst_notice .txt{float:left; width:80%; line-height:22px}
.lst_notice a{position:relative; display:block; padding:20px 0px 20px 11px; text-decoration:none}
.lst_notice .tit{font-size:16px; font-weight:500; color:#333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.lst_notice .tit strong{margin-right:2px; display:inline-block; width:35px; text-align:center; font-size:12px; color:#fff; border-radius:22px}
.lst_notice .tit strong.type1{background-color:#0095db}
.lst_notice .tit strong.type2{background-color:#64b32f}
.lst_notice .article{margin-top:2px; font-size:14px; font-weight:400; color:#8f8f8f; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.lst_notice a:hover .tit,
.lst_notice a:hover .article{text-decoration:underline}
.lst_notice li:last-child a{padding-bottom:0;}

/* mapping */
.mapping{overflow:hidden;}
.mapping ul{width:33.3%;float:left;padding:0px 5px 0px 5px;}
.mapping p{overflow:hidden; background:#e6e8f2; color:#000; margin-bottom:5px; padding:22px 15px;  border-radius:5px;}
.mapping li{float:left; width:100%;}
.mapping li strong{width:60%; float:left; font-size:16px; line-height:1.4;}
.mapping li span{width:40%; float:right; text-align:right; font-weight:bold;}
.mapping .rad_bg strong{background: url(./../image/micon_01.png) no-repeat; padding-left:25px; background-size:22px;}
.mapping .blue_bg strong{background: url(./../image/micon_02.png) 0px 4px no-repeat; padding-left:28px; background-size:22px;}
.mapping .glay_bg strong{background: url(./../image/micon_03.png) 0px 0px no-repeat; padding-left:28px; background-size:22px;}

.mapping .animal_list{width:100%;}
.mapping .animal_list li{border-bottom:1px solid #ddd; padding:14px 8px;}
.mapping .rad_bg{background:#fef1f3;}
.mapping .rad_bg span{color:#ff114e;}
.mapping .blue_bg{background:#ebf2fe;}
.mapping .blue_bg span{color:#2464e1;}

.color_01{color:#175ddd;}
.color_02{color:#1593b3;}
.color_03{color:#ff125a;}
.color_04{color:#ff9418;}
.color_05{color:#1a48bf;}
.color_06{color:#f12e9d;}
.color_07{color:#fff5a2;}


@media (max-width:1800px) {
	
/*#wrapper {margin-bottom:190px;}*/

.main_wrap {width:100%;}


.box_wrap .metal_box li{font-size: 16px; height:63px; line-height: 20px;}
.mapping p {left:20%; height:65px; padding: 15px;}
.todo_list li strong{width:30%;padding:0px;}
.todo_list li p{width:70%;}

/* 메인 */
.mapping li strong{line-height:1.2;}


}

@media (max-width:1430px) {
/* 메인 */
.m_box {width:100%;}
.m_box .box {height:auto;}
.m_box .sub_chart_box {height:100% !important;}

.lst_notice .txt {width:75%;}

.block_box3 li {padding-bottom: 10px;}
.block_box3 li:nth-child(1){width:100%;}
.block_box3 li:nth-child(2){width:100%;}
.block_box3 li:nth-child(3){width:100%;}

.mapping p {height: auto;}
.mapping .animal_list li{padding:8px;}
}

@media (max-width:1250px) {
/*#wrapper {margin-bottom:160px;}*/
}

@media (max-width:1120px) {
.top_notic {margin-bottom: 5px;}

.sitemap_wrap{width:100%;}
.site_map .depth_02 {width:100%;}
.site_map .depth_02>li {width:50%; padding-top:0;}

.mapping p {height:65px;}

.lst_notice li {padding-left:5px;}
.lst_notice .date {width:50px;}
}


@media (max-width:1060px) {
/*#wrapper {margin-bottom:200px;}*/
}

@media (max-width:950px) {
/*#wrapper {margin-bottom:240px;}
.container_wrap {margin:110px 0 0;}*/
}


@media (max-width:768px) {
/*.container_wrap {padding:0 10px;}*/

.login_box{padding:50px 0 0;}

.top_notic strong {display:block;}
.box_wrap .m_box p {position:inherit; bottom:inherit; left:inherit; margin:5px auto 10px; height:auto;}
.box_wrap .m_box2 {width:100%;}

.lst_notice a {padding:10px 0;}

.site_map {padding:0;}
.site_map .depth_01>li>a {font-size:16px;}
.site_map .depth_02>li>a {font-size:14px;}
.site_map .depth_03 li {margin-top:5px;}
.site_map .depth_03 li:first-child {margin-top:5px;}

.modal-body .board_write {font-size: 13px;}

.login_wrap .idpw li span {width:15%;}
.login_wrap .login_box input {width: 85%;}

/* 메인 */
.m_box .box {overflow:hidden; padding:15px; min-height: auto;}
.m_box .padding_box { padding:5px 0px;}

.notice .box{height:auto;}

.block_box2 li {width:100%;}
.block_box3 .graph_wrap3 .padding_box {width:100%; padding:3px 0;}
.block_box3 .graph_wrap3 .table-responsive {width:100%;}

.lst_notice li {width:100%; border-right:0; border-bottom:1px solid #ddd; padding-left:0px;}
.lst_notice li:last-child{border-bottom:0;}
.lst_notice .date {width:65px;}


/*.container_wrap {margin:76px 0 0;}


#wrapper {margin-bottom:260px;}*/
}


@media (max-width:650px) {
.mapping ul {padding: 0 3px;}
.mapping li strong {width:100%;float: left;}
.mapping li span {width: 100%;float: left;text-align: left;}
.mapping p { height: 75px; padding:10px;}

.intro_box2 {width:100%; padding:10px;}
.intro_box2 .login_Enter {width:100%;}


/*#wrapper {margin-bottom:290px;}*/
}

@media (max-width:450px) {
.login_box {width:100%; padding:20px;}
.login_box input {width:160px;}
.login_btnwrap a {padding:6px 0px; min-width:90px}
.login_wrap .login_box .login_Enter {width:100%; padding:15px;}
.login_wrap .login_btnwrap a {font-size:12px; min-width:32%; padding: 6px 0;}

.intro_box2 a {width: 100%;}

.site_map .depth_02>li {width:50%;}

.modal_view {width:90%;}
.modal-content {min-width:100%;}

/*error*/
.error_wrap{width:100%;}
.error_wrap .error_box {width:100%; display:inherit; margin:25px auto;}
.error_wrap .error_box p {width:100%;}
.error_wrap .error_box img {width: 130px;}
/* 메인 */
.m_box .box {padding:10px;}
.m_box .title h4 { padding-bottom: 10px;}

.graph_wrap .table-responsive {width:100%;}
.table-responsive {margin-bottom: 5px;}
.graph_wrap .graph_box {width:100%;}
}

@media (max-width:395px) {
}


@media (max-width:375px) {
.mapping p {padding: 5px 10px;}



}