@charset "utf-8";

header > .top{height:45px;padding:10px 30px; }
header > .top > .fl{width:83px;height:26px;}
header > .top > .fr > ul{font-size:0px; padding-top: 5px }
header > .top > .fr > ul li{display:inline-block;padding-right:10px;padding-left:10px;font-size:12px;color:#666666;}
header > .top > .fr > ul li:first-child{border-right:1px solid #dadada;color:#000529;}
header > .top > .fr > ul li:last-child{padding-right:0px;padding-left:0px;}

/* ===== Content_S =====  */
.content{position:relative;overflow:hidden;width:100%;min-height:100%;margin:0 auto;}

.content > .form_container{overflow:hidden;padding:30px;background-color:#f6f7f8;}
.content > .form_container h1{font-weight:bold;font-size:36px;text-align:center;letter-spacing:-2px;}

.breadcrumbs_wrapper{position:relative;padding:15px 0px;line-height:1;font-size:0px;text-align:center;}
.breadcrumbs_wrapper > ul li{display:inline-block;font-size:13px;line-height:13px;}
.breadcrumbs_wrapper > ul li a{display:inline-block;width:16px;height:13px;background:url("../images/btn_home.png") no-repeat right top;text-indent:-999999px;}

.breadcrumbs_wrapper > ul li.active{color:#1187cf}
.breadcrumbs_wrapper > .breadcrumbs li:after{content:"＞";display:inline-block;line-height:1;padding-left:5px;padding-right:5px;}
.breadcrumbs_wrapper > .breadcrumbs li:first-child:after{padding-left:0px;}
.breadcrumbs_wrapper > .breadcrumbs li:last-child:after{display:none;}


/* #########################################
   ======== Responsive_breakpoint ========
  ######################################### */

/* =============================
  =========== Mobile ============
================================ */
@media (min-width:360px){

    /* ===== login_start ===== */
    .login_wrapper{position:relative;overflow:auto;height:100%;width:100%;margin:0 auto;}
    /* .login_top{height:45px;padding:0 15px;border-bottom:1px solid #e6e6e6;background:url("../images/m_logo.png") no-repeat left 15px center;background-size:176px auto;} */
    .login_top{height:45px;padding:0 15px;border-bottom:1px solid #e6e6e6;background:url("../images/m_logo_nids.png") no-repeat left 15px center;background-size:83px auto;}
    .login_con{position:relative;margin:0 auto; max-width: 580px;}
    .login_con > h1{margin-top:50px;margin-bottom:30px;font-size:18px;text-align:center;color:#131313;}
    .login_con > .con_box{max-width:580px;margin:0px 15px 0;padding:30px 15px;border:1px solid #dadada;text-align:center;}
    .login_con > .con_box > h2{padding-bottom:11px;font-size:18px;text-align:center;}
    .login_con > .con_box > p{padding-bottom:30px;font-size:12px;text-align:center;letter-spacing:-1px;}
    .loginbtn{width:100%;height:56px;margin-bottom:16px;border-radius:4px;color:#fff;font-size:15px;line-height:56px;text-align:center;background-color:#1f2f52;}
    .login_con > .con_box .lo_p{font-size:11px;}
    .login_con > .copy{margin-top:16px; margin-bottom:16px; font-size:12px;text-align:center;}
    /* ===== login_end ===== */

    /* graph_con start */
    .graph_con > .graph_list{position:relative;display:flex;flex-wrap:wrap;}
    .graph_con > .graph_list > .g_list_box{position:relative;width:100%;height:90px;margin-bottom:11px;padding:17px 22px;border-radius:3px;background:rgb(22,86,164);background:-webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));background:-o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);background:linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);-webkit-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);-moz-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);}
    .graph_con > .graph_list > .g_list_box > dl{font-weight:bold;color:#fff;letter-spacing:-1px;}
    .graph_con > .graph_list > .g_list_box > dl dt{padding-top:3px;padding-bottom:10px;font-size:13px;}
    .graph_con > .graph_list > .g_list_box > dl dd{font-size:28px;line-height:1;}
    .graph_con > .graph_list > .g_list_box > dl dd > span{padding-left:3px;font-size:10px;font-weight:normal}
    .graph_con > .graph_list > .g_list_box > span[class ^="i_"]{position:absolute;top:17px;right:15px;width:76px;height:56px;text-indent:-999999px;background-size:76px 56px;}
    .graph_con > .graph_list > .g_list_box > .i_good{background:url("../images/icon_m_good.png") no-repeat center;}
    .graph_con > .graph_list > .g_list_box > .i_normal{background:url("../images/icon_m_normal.png") no-repeat center;}
    .graph_con > .graph_list > .g_list_box > .i_bed{background:url("../images/icon_m_bed.png") no-repeat center;}
    .graph_con > .graph_list > .g_list_box > .i_serious{background:url("../images/icon_m_serious.png") no-repeat center;}
    /* graph_con end*/

    /* graph_cha_start */
    .g_cha_wrap{position:relative;}
    .g_cha_wrap > .row{display:flex;width:100%; flex-wrap: wrap; }
    .row > .cha_box{width:100%; margin-bottom:10px; border:1px solid #e1f2ff}

    .row > .cha_box > .cha_box_head{position:relative;width:100%;height:37px;padding:0 12px;font-weight:bold;font-size:13px;line-height:37px;background-color:#f0f0f1;}
    .row > .cha_box > .cha_box_head > span{position:absolute;right:12px;width:12px; text-indent:-99999px;background:url(../images/select_arrow.png) no-repeat center;background-size:8px 4px;}
    .row > .cha_box > .cha_box_con{position:relative;padding:14px 12px 25px;}
    .row > .cha_box > .cha_box_con > ul{margin-bottom:14px;}
    .row > .cha_box > .cha_box_con > ul li{display:inline-block;padding-right:4px;font-size:13px;font-weight:bold;color:#1187cf}
    .row > .cha_box > .cha_box_con > ul li span{font-weight:normal;}
    .row > .cha_box > .cha_box_con > p{position:absolute;bottom:14px;right:12px;font-size:12px;color:#999999;}
    .row > .cha_box > .cha_box_con > .graph_area{display:flex;justify-content:center;align-items:center;height:370px;text-align:center;}
    /* graph_cha_end */


    /* graph_con all start */
    .graph_wrap > .graph_con.all { position: relative; overflow: hidden; margin-bottom: 11px}
    .graph_con.all > .graph_list > .g_list_box{position:relative;width:100%;height:164px;margin-bottom:11px;padding:22px 18px;border-radius:3px;background:rgb(22,86,164);background:-webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));background:-o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);background:linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);-webkit-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);-moz-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);}
    .graph_con.all > .graph_list > .g_list_box > dl{color:#fff;}
    .graph_con.all > .graph_list > .g_list_box > dl dt{padding-top:0px;padding-bottom:8px;font-weight:bold;font-size:17px;line-height:1;}
    .graph_con.all > .graph_list > .g_list_box > dl dd{padding-bottom:7px;font-weight:normal;font-size:13px;line-height:1;}
    .graph_con.all > .graph_list > .g_list_box > dl dd:last-child{font-size:8px;padding-bottom:0;}
    .graph_con.all > .graph_list > .g_list_box > span[class ^="i_"]{position:absolute;top:22px;right:18px;width:76px;height:56px;text-indent:-999999px;background-size:76px 56px;}
    /* .graph_con.all > .graph_list > .g_list_box > .i_good{background:url("../images/icon_m_good.png") no-repeat center;}
    .graph_con.all > .graph_list > .g_list_box > .i_normal{background:url("../images/icon_m_normal.png") no-repeat center;}
    .graph_con.all > .graph_list > .g_list_box > .i_bed{background:url("../images/icon_m_bed.png") no-repeat center;}
    .graph_con.all > .graph_list > .g_list_box > .i_serious{background:url("../images/icon_m_serious.png") no-repeat center;} */
    .graph_con.all > .graph_list > .g_list_box > .v_graph{position:relative;margin-top:11px;display:flex;}
    .v_graph > .v_box{position:relative;overflow:hidden; width:25%;height:100%;min-height:55px;margin-right:6px;border-radius:8px;background-color:rgba(240,240,241,0.5);}
    .v_graph > .v_box:last-child{margin-right:0px;}
    .v_graph > .v_box > .v_box_tit{position:absolute;top:6px;left:7px;font-weight:bold;font-size:13px;line-height:1.1;letter-spacing:-1px;}
    .v_graph > .v_box > .v_box_tit >span{display:block;font-size:9px;font-weight:normal;}
    .v_graph > .v_box > .v_box_num{position:absolute;bottom:5px;left:7px;font-weight:bold;font-size:13px;}
    .v_graph > .v_box > .gbar{position:absolute;bottom:0;display:block;border-radius:8px;width:100%;height:100%;}
    .v_graph > .v_box > .col_good {background-color:rgba(51,204,255,0.5)}
    .v_graph > .v_box > .col_normal {background-color:rgba(0,255,153,0.5)}
    .v_graph > .v_box > .col_bed {background-color:rgba(251,216,125,0.5)}
    .v_graph > .v_box > .col_serious {background-color:rgba(255,153,102,0.5)}
    /* graph_con all end */

    /* legend start */
    .graph_wrap > .legend_wrap{position:relative; margin-bottom: 28px;}
    .graph_wrap > .legend_wrap > dl{margin-bottom:8px; letter-spacing: -0.6px;}
    .graph_wrap > .legend_wrap > dl > dt,.graph_wrap > .legend_wrap > dl > dd{display:inline-block;height:15px;}
    .graph_wrap > .legend_wrap > dl > dt{width:46px;font-weight:bold;font-size:12px;line-height:15px;color:#1187cf;}
    .graph_wrap > .legend_wrap > dl > dd{padding-right:3px;line-height:15px;font-size:11px;}
    .graph_wrap > .legend_wrap > dl > dd > span[class ^="squ_"]{display:inline-block;width:9px;height:9px;margin-right:2px;margin-bottom:3px;vertical-align:middle;text-indent:-999999px;}
    .graph_wrap > .legend_wrap > dl > dd > .squ_blue{background-color:#33ccff;}
    .graph_wrap > .legend_wrap > dl > dd > .squ_green{background-color:#00ff99;}
    .graph_wrap > .legend_wrap > dl > dd > .squ_yellow{background-color:#fbd87d;}
    .graph_wrap > .legend_wrap > dl > dd > .squ_red{background-color:#f04040;}
    /* legend end */
    /* ===== Graph_wrap end ===== */


    /* ===== NIDS MAP start ===== */
    /* 설정 satrt */
    .map_area {
        position: fixed;
        width:100%;
        padding: 15px 0;
    }
    .map_area .map_form{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0 15px;align-items:center;}

    .map_area .map_form .map_form_group_wrap{position:relative;display:flex;width:100%;}
    .map_area .map_form .map_form_group_wrap .map_form_group{position:relative;width:100%;margin-right:0px}

    .map_area .map_form .map_form_group_wrap .map_form_group .form_control{height:37px;font-size:15px;}
    .map_area .map_form .map_form_group_wrap .btn_i_wrap{position:relative;height:37px;top:0px;margin-bottom:0px;}

    /* maplegend start */
    .mlegend_wrap{position:relative;padding-left:15px;}

    .mlegend_wrap > ul > li{display:inline-block; height:15px; margin-bottom:8px; letter-spacing: -0.6px;}
    .mlegend_wrap > ul > li{padding-right:3px;line-height:15px;font-size:11px;}
    .mlegend_wrap > ul > li> span[class ^="squ_"]{display:inline-block;width:9px;height:9px;margin-right:2px;margin-bottom:3px;vertical-align:middle;text-indent:-999999px;}
    .mlegend_wrap > ul > li > .squ_blue{background-color:#33ccff;}
    .mlegend_wrap > ul > li > .squ_green{background-color:#00ff99;}
    .mlegend_wrap > ul > li > .squ_yellow{background-color:#fbd87d;}
    .mlegend_wrap > ul > li > .squ_red{background-color:#f04040;}
    /* maplegend end */
    .map_area .map_form > .checkBtn_wrap{display:flex;align-items:center;height:50px;vertical-align:top;}
    .check_btn{margin-right:8px;}

    .check_btn input[type="checkbox"]{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0 none;margin:0;overflow:hidden;clip:rect(0 0 0 0);}
    .map_form .check_btn label{display:inline-block;height:35px;padding:4px 9px;border:1px solid #dadada;border-radius:35px;font-size:13px;line-height:25px;color:#131313;}


    .check_btn input[type="checkbox"]:checked + label{color:#fff;background-color:#1187cf;}
    .check_btn label i,.check_btn label i:before{display:none}
    .check_btn input[type="checkbox"]:checked + label i{color:#fff;}
    /* 설정 end */

    /* map start*/
    .map{position:relative;width:100%;height:747px;background:url("../images/map.png") no-repeat center;background-size:cover;overflow:hidden;}
    .pin{position:relative;}
    .pin button{display:inline-block;position:absolute;width:26px;height:26px;border:2px solid #fff;border-radius:46px;-webkit-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);-moz-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);}
    .pin button::after{content:"";display:block;position:absolute;top:23px;left:8px;border-color:#fff transparent transparent transparent;border-style:solid;border-width:6px 3px 0px 3px;width:0;height:0;-webkit-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);-moz-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);}

    .map .pin button.cic_blue{background-color:#33ccff;}
    .map .pin button.cic_green{background-color:#00ff99;}
    .map .pin button.cic_yellow{background-color:#fbd87d;}
    .map .pin button.cic_red{background-color:#f04040;}

    .pin button > i{display: inline-block; width: 20px; font-size: 14px; color: #fff; text-align: center;}
    .map .windicon{position:absolute;width:34px;height:34px}
    .map .windicon .wind{display:block;overflow:hidden;width:34px;height:34px;border-radius:8px;background-color:rgba(255,255,255,1);-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3);box-shadow:0 1px 4px rgba(0,0,0,0.3);}
    .map .windicon .wind i{display:inline-block;width:34px;font-size:25px;text-align:center;}
    /* map end*/





    /* NIDS MAP end */

}

@media (min-width:360px) and (max-width:768px){

    .hidden_sm{display:none !important;}

    #main-sidebar2{position:fixed;top:0;bottom:0;overflow-y:hidden; background:#f3f3f3;}

    .sidenav .m_nav_header{position:relative;overflow:hidden;width:100%;max-width:320px;padding:10px 18px 10px;height:48px;}
    .sidenav .m_nav_header img{float:left;width:83px;height:26px;vertical-align:middle;}

    .sidenav .m_nav_header .m_closer{float:right;width:16px;height:28px;background:url("../images/m_close.png") no-repeat center;background-size:12px 12px;text-indent:-999999px;}
    .sidenav .m_nav_con ul{margin:0;padding:0;list-style:none}
    .sidenav .m_nav_con{position:relative;width:100%;padding-right:0px;padding-left:18px;background-color:#1f2f52;}
    .sidenav .m_nav_con .accordion{position:relative;display:block;width:100%;height:auto;overflow-y:auto;}

    .sidenav .m_nav_con .accordion li > a{display:block; overflow:hidden;position:relative;width:100%;height:48px;line-height:48px;font-size:15px;color:#fff;text-align:left; -o-transition:color .2s linear,background .2s linear;-moz-transition:color .2s linear,background .2s linear;-webkit-transition:color .2s linear,background .2s linear;transition:color .2s linear,background .2s linear;}
    .sidenav .m_nav_con .accordion li > a .submenu-indicator{position:absolute;top:20px;right:18px;font-size:20px;display:inline-block;width:15px;height:10px;background:url("../images/m_arrow_down.png") no-repeat center;background-size:10px auto;}
    .sidenav .m_nav_con .accordion li > a.submenu-indicator-minus .submenu-indicator{position:absolute;top:20px;right:18px;font-size:20px;display:inline-block;width:15px;height:10px;background:url("../images/m_arrow_up.png") no-repeat center;background-size:10px auto;}
    .m_nav_con ul ul.submenu,.m_nav_con ul ul.submenu li ul.submenu{width:100%;display:none;position:static;}
    .sidenav .m_nav_con .accordion li .submenu{position:relative;padding:17px 0 15px 17px;background:#2a395a;}
    .sidenav .m_nav_con .accordion li .submenu li{clear:both;width:100%;}
    .sidenav .m_nav_con .accordion li .submenu li a{position:relative;display:inline-block;width:100%;height:25px;font-size:12px;line-height:25px;}

    .sidenav .m_nav_con .accordion li ul li a:focus,
    .sidenav .m_nav_con .accordion li ul li a:hover,
    .sidenav .m_nav_con .accordion li ul li a.on{color:#f9bd01}

    .sidenav .m_nav_con .accordion li > .sub_menu li .gnb_2da:focus,.m_nav_con .accordion li > .sub_menu li .gnb_2da.active,.m_nav_con .accordion li > .sub_menu li .gnb_2da:hover{color:#f9bd01}

    .accordion-content,.gnb_1dli{cursor:pointer;font-size:16px;position:relative;letter-spacing:1px;}
    .gnb_2da:focus,.gnb_2da:hover{color:#f9bd01 !important;text-decoration:none;}

    .m_nav_con .accordion .gnb_1dli .sub_menu .gnb_2dli .gnb_2da:hover::before{display:none;}
    .sidenav .dflex{padding:22px 18px}
    .sidenav .dflex button{display:inline-block;width:50%;margin-right:6px;padding:8px;border:1px solid #dadada;border-radius:5px;font-size:12px;color:#131313;text-align:center;background-color:#fff;}
    .sidenav .dflex button:last-child{margin-right:0px;}


    /* =====================================
     =============== content  ===============
    ====================================== */
    .content{position:relative;overflow:hidden;width:100%;margin:0 auto;}
    .content > .m_header_wrap{width:100%;padding:0;}
    .content > .m_header_wrap > .mb_top{position:relative;height:45px;padding:10px 15px;text-align:center;background-color:#1f2f52;}
    .content > .m_header_wrap > .mb_top > .prev_page{position:absolute;left:15px;width:24px;height:24px;text-indent:-9999px;background:url("../images/m_back_btn.png") no-repeat left center;background-size:10px 16px;}

    .content > .m_header_wrap > .mb_top > h1{text-align:center;font-size:18px;color:#fff}
    .content> .m_header_wrap > .mb_top > .topbtn_wrap{position:absolute;right:15px;top:10px}
    .content > .m_header_wrap > .mb_top > .topbtn_wrap > .btn_ref{display:inline-block;width:24px;height:24px;background:url("../images/m_refresh_btn.png") no-repeat center;background-size:16px 15px;text-indent:-9999px;}
    .content > .m_header_wrap > .mb_top > .topbtn_wrap .m_opener{display:inline-block;width:24px;height:24px;background:url("../images/m_menu_btn.png") no-repeat center;background-size:17px 13px;text-indent:-9999px;}

    .content > .m_header_wrap > .breadcrumbs_wrappter{display:none;}

    /* =====================================
     =========== xshadow layer =============
    ====================================== */
    .cd_overlay{/* shadow layer visible when navigation is open */
        position:fixed;height:100%;width:100%;top:0;left:0;cursor:pointer;background-color:rgba(0,0,0,0.35);visibility:hidden;opacity:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:opacity 0.4s 0s,visibility 0s 0.4s;-moz-transition:opacity 0.4s 0s,visibility 0s 0.4s;transition:opacity 0.4s 0s,visibility 0s 0.4s;}
    .cd_overlay.is_visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.4s 0s,visibility 0s 0s;-moz-transition:opacity 0.4s 0s,visibility 0s 0s;transition:opacity 0.4s 0s,visibility 0s 0s;}


    /* ===== FormArea_start ===== */
    .form_content{position:relative;overflow:hidden;padding:15px;}
    .form_content.menu_list_close{position:relative;overflow:hidden;padding-bottom:0;}

    .form_content h2{display: block; font-size: 16px; margin-bottom: 10px; padding-top: 7px;}
    .form_group_wrap{position:relative;display:flex;flex-wrap:wrap;width:100%;align-items:center; border-bottom: 8px solid #ebebeb}
    .form_group{position:relative;width:100%;margin-bottom:10px;}
    .form_content .form_control{height:37px;font-size:15px;}

    .form_content .form_group .radio_wrapper > span {font-size:15px;}
    .form_content .form_group .radio_wrapper{display:flex; width:100%; border:1px solid #dadada; padding:8px 20px 8px 12px;background-color:#fff;}
    .form_content .form_group .radio_wrapper .radiobox{margin-left:45px; font-size: 15px;}
    .form_content .form_group .radio_wrapper .radiobox:last-child{margin-left:30px}
    .form_group .control_label{display:none}

    .form_content .form_group.end{width:calc(100% - 37px);padding-right:10px;margin-bottom:20px;}
    .form_content .form_group.end.in_col3{width:100%;padding-right:0px;margin-bottom:10px}
    .form_content .form_group.in_col3 > .form_group{width:20%}
    .form_content .form_group.in_col3 > #form_group_search{width:80%}

    .form_content .form_group.regiend{width:calc(100% - 60px);padding-right:10px}

    .form_content .form_list_close{position:relative;display:flex;justify-content:center;width:100%;border-top:1px solid #eae6e6;text-align:center;}
    .form_content .form_list_close span{display:inline-block;width:60px;height:36px;font-size:13px;line-height:36px;background:url("../images/btn_list_close.png") no-repeat right center;background-size:13px auto;}
    .form_content .form_list_close span.on{background:url("../images/btn_list_open.png") no-repeat right center;background-size:13px auto;}

    .btn_i_wrap{position:relative;height:37px;top:-4px;margin-bottom:10px;}
    .btn_i_wrap .btn {width: 37px; height: 37px; padding:7px; border-radius: 2px; text-align: center; }
    .btn_i_wrap .bg_yell {background-color: #f9bd01;}
    .btn_i_wrap i {display: inline-block; font-size:14px; color: #fff;  vertical-align: middle;}

    .btn_regi_wrap {position: relative; margin-bottom: 10px}
    .btn_regi_wrap .btn_regi {width: 60px; height: 37px; border-radius: 4px; text-align: center;
        background-color: #1f2f52; color: #fff}


    /* ------ datepicker_timepikcer ----- */
    .form_group.dateTime{display:flex;flex-wrap:wrap;width:100%;align-items:center;}
    .form_group.dateTime + .form_group{margin-top:-10px;}
    .form_group.dateTime .date_group{position:relative;width:57%;padding-bottom:10px;}
    .form_group.dateTime .time_group{position:relative;width:43%;margin-left:-1px;padding-bottom:10px;}
    .form_group.dateTime > .date_group > .date_i{position:absolute;top:5px;right:12px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/cal_icon.png") right center no-repeat;background-size:16px auto;}
    .form_group.dateTime > .time_group > .time_i{position:absolute;top:3px;right:10px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/time_icon.png") right center no-repeat;background-size:15px auto;}
    .form_group.dateTime > span{display:none;}

    .form_group.dateTime .date_group.only{position:relative;width:100%;padding-bottom:10px;}

    /* ===== FormArea_end ===== */


    /* ===== listWrap_start ===== */
    .list_wrap{position:relative;overflow:hidden;padding:17px 15px;}
    .list_wrap .list_con{position:relative;}
    .list_con > .list_top{overflow:hidden;height:31px;margin-bottom:10px;}
    .list_con > .list_top > .fl{font-size:17px;line-height:31px;}
    .list_con > .list_top > .fr .mbtn_line{display:inline-block;width:60px;padding:6px 13px;height:31px;border:1px solid #dadada;border-radius:4px;color:#131313;text-align:center;background-color:#fff;}

    .list_con > .list_top_form{overflow:hidden;}
    .list_con > .list_top_form >.s_tit{font-size:17px;line-height:31px;font-weight:bold;margin-bottom:16px;}
    .list_con > .list_top_form >.dflex{flex-wrap:wrap;}
    .list_con > .list_top_form >.dflex >.search_form button{position:absolute;width:31px;height:10px;top:0;right:4px; background-color: none;}


    /* type#1 tabel_start */
    .tbl_type1{position:relative;text-align: left}
    .tbl_type1 caption{display:none;}
    .tbl_type1 thead{display:none;}

    /* .tbl_type1 tbody td{padding:15px 3px;border-bottom:1px solid #fff;color:#606060;
     word-break:break-all;} */

    .tbl_type1 tbody tr{display:block;box-sizing:border-box;width:100%;padding:14px 11px;border-bottom:1px solid #fff;background-color:#f6f7f8;clear:both;}
    .tbl_type1 tbody tr td{display:inline-block;box-sizing:border-box;font-size:13px;padding:5px 5px 5px 0;text-align:left;border:0; color:#606060;word-break:break-all;}

    .tbl_type1 tbody tr td:nth-child(1){display: block; width:100%;}
    .tbl_type1 tbody tr td:nth-child(2){display: block; width:100%;font-size:17px;font-weight:bold;}
    .tbl_type1 tbody tr td.block {display: block;}

    .tbl_type1 tbody tr td.list_tit{width:32%;font-size:12px;box-sizing:border-box;}
    /* .tbl_type1 tbody tr td.list_tit.tvoc{width:50%;} */
    .tbl_type1 tbody tr td.list_tit > span{display:inline-block;font-size:12px;font-weight:bold;padding-right:15px;text-align:left !important;box-sizing:border-box;}
    .tbl_type1 tbody tr td.list_tit > span::before{content:"·";font-size:15px;padding-right:3px;vertical-align:middle;text-align:left !important;}
    /* type#1 tabel_end */

    /* type#2 tabel_start */
    .tbl_type2,.tbl_type2 thead,.tbl_type2 th,.tbl_type2 tbody,.tbl_type2 tr,.tbl_type2 td{display:block;}
    .tbl_type2 caption{display:none;}
    .tbl_type2 thead th{display:block; position: absolute; top: -9999px;left: -9999px;}
    .tbl_type1 tbody tr{display:block}

    .tbl_type2 tbody .end td{border-bottom:none;}
    .tbl_type2 tbody tr{display:block;box-sizing:border-box;margin-bottom:13px;padding:0;border-bottom:1px solid #fff;clear:both;}
    .tbl_type2 tbody tr td{position:relative;height:38px;padding-top:4px;padding-bottom:4px;padding-right:10px;padding-left:43%;border:none;border-bottom:1px solid #fff;line-height:28px;font-size:15px;color:#606060;text-align:left;background-color:#f6f7f8;word-break:break-all;}
    .tbl_type2 tbody tr td.m_input{height:44px;padding-top:2px;padding-bottom:2px;}
    .tbl_type2 tbody tr td.m_input .form_control{height:38px;font-size:15px;vertical-align:middle;}
    .tbl_type2 tbody tr td.tac.m_input{padding-top:5px;padding-bottom:5px;vertical-align:middle;}
    .tbl_type2 tbody tr td.m_input:before{padding-top:2px;line-height:38px;}
    .tbl_type2 tbody tr td:before{position:absolute;top:0;left:0;width:40%;height:100%;padding-top:4px;padding-left:20px;line-height:28px;white-space:nowrap;font-size:15px;font-weight:bold;text-align:left;background-color:#d0dceb;}
    .tbl_type2 tbody tr td.tac{text-align:left !important;}

    /* 토글 switch_start */
    .switch{position:relative;top:7px}
    .switch input[type='checkbox']{position:absolute;visibility:hidden;}
    .switch input[type='checkbox'] + label{display:block;position:relative;width:55px;height:18px;padding-left:0;margin-right:0;line-height:18px;overflow:visible;border-radius:10px;background-color:#c8c8c8;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
    .switch input[type='checkbox'] + label .icon{position:absolute;left:-1px;top:-3px;z-index:1;width:23px;height:23px;border-radius:50%;border:1px solid #ededed;background-color:#fff;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
    .switch input[type='checkbox'] + label:before,.switch input[type='checkbox'] + label:after{position:absolute;top:0;width:100%;letter-spacing:0.1px;line-height:30px;color:#fff;text-align:center;}
    .switch input[type="checkbox"] + label:before{left:-9px;top:-6px;content:'ON';font-size:0px;}
    .switch input[type="checkbox"] + label:after{right:-7px;top:-6px;content:'OFF';font-size:10px;}
    .switch input[type="checkbox"]:checked + label{background-color:#1187cf;}
    .switch input[type="checkbox"]:checked + label:after{font-size:0;}
    .switch input[type="checkbox"]:checked + label:before{font-size:11px;letter-spacing:-1px;}
    .switch input[type="checkbox"]:checked + label .icon{left:0;background-image:none;-webkit-transform:translateX(35px);-ms-transform:translateX(35px);transform:translateX(35px);}
    /* 토글 switch_end */

    /* type#2 tabel_end */

    /* pageing_start */
    .page_group{position:relative;width:100%;display:flex;justify-content:center;align-items:center;height:26px;margin:15px 0;}
    .pagination{display:flex;align-items:center;}
    .pagination > button{width:10px;height:8px;margin:9px 10px 9px}
    .pagination > button.pg_first{background:#fff url("../images/btn_page.png") no-repeat;background-position:0px 0px;}
    .pagination > button.pg_prev{background:#fff url("../images/btn_page.png") no-repeat;background-position:-10px 0px;}
    .pagination > button.pg_next{background:#fff url("../images/btn_page.png") no-repeat;background-position:-18px 0px;}
    .pagination > button.pg_last{background:#fff url("../images/btn_page.png") no-repeat;background-position:-27px 0px;}
    .pagination > a{color:black;padding:7px 11px 7px;line-height:1;text-decoration:none;}
    .pagination > a:nth-of-type(6),
    .pagination > a:nth-of-type(7),
    .pagination > a:nth-of-type(8),
    .pagination > a:nth-of-type(9),
    .pagination > a:nth-of-type(10){
        display: none;
    }
    .pagination > a.active,.pagination > a:hover{font-weight:bold;text-decoration:underline;}
    .page_group > .page_select select{display: none;}
    /* pageing_end */

    /* list_end */

    /* ===== listWrap_end ===== */

    footer > p{padding-bottom:10px;margin:0 auto;font-size:12px;color:#999999;text-align:center;}

    button#topBtn{z-index:4000;display:none;position:fixed;bottom:20px;right:15px;width:42px;height:42px;background:url("../images/btn_topup.png") no-repeat center;background-size:42px 42px;cursor:pointer;text-indent:-999999px;}

    /* Top_button end */
    footer {display:none}
}

@media (min-width:360px) and (max-width:991px){

    /* ===== Graph start ===== */

    /* graph_top start */
    .graph_wrap{position:relative;padding:28px 15px 15px;}
    .graph_wrap > .graph_con{position:relative;overflow:hidden;margin-bottom:30px;}
    .graph_con > .graph_top{display:flex;flex-wrap:wrap;margin-bottom:21px;}
    .graph_con > .graph_top > .blue{display:block;width:100%;margin-bottom:14px;font-size:13px;color:#1187cf;}
    .graph_con > .graph_top > .cbox_wrap{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:14px 11px 0;background-color:#f6f7f8;}
    .graph_con > .graph_top > .cbox_wrap > .checkbox{width:33.33333%;padding-bottom:14px;}
    /* graph_top end */

    /* ===== Graph end ===== */

    /* 마커팝업 start*/
    .mapWrapper{display: none;}

    .mapMobile_pop {
        position:fixed;
        left:0;
        bottom:12px;
        width:100%;
        padding:5px 6px;
    }
    .mapMobile_pop .mopop_wrap {
        width: 100%;
        height: auto;
        padding: 10px 12px 10px;
        border-radius: 2px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18);
        box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18);
    }
    .mapMobile_pop .mopop_wrap > .tit {
        font-size: 13px;
        font-weight: bold;
        color: #1187cf;
        line-height: 31px;
    }
    .mapMobile_pop .mopop_wrap > button {
        display: none;
    }
    .mapMobile_pop .mopop_wrap > .g_list_box {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 88px;
        margin-bottom: 6px;
        padding: 0 6px;
        border-radius: 3px;
        background: rgb(22,86,164);
        background: -webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));
        background: -o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);
        background: linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);
        -webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
        -moz-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
        box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
    }
    .mapMobile_pop .mopop_wrap > .g_list_box > p {
        font-weight: bold;
        font-size: 7px;
        line-height: 27px;
        color: #fff;
    }
    .mapMobile_pop .mopop_wrap > .g_list_box .v_graph {
        position: relative;
        display: flex;
        overflow: hidden;
    }
    .mapMobile_pop .mopop_wrap > .g_list_box .v_graph .v_box {
        position: relative;
        overflow: hidden;
        width: 25%;
        height: 55px;
        margin-right: 9px;
        border-radius: 5px;
        background-color: rgba(240,240,241,0.5);
    }

    /* 마커팝업 end*/

}

/* =============================
  ====== Tablet + 노트북 =======
================================ */
@media only all and (min-width:769px) {

    .sidenav{display:none;}
    .hidden_xl{display:none !important;}

    /* ===== Nav start ===== */
    #hd{z-index:100;display:block;position:relative;height:42px;}
    /* #hd.hd_zindex{z-index:100 !important;} */
    #gnb{z-index:1001;overflow:hidden;position:absolute;width:100%;padding-right:30px;padding-left:30px;background:url("../images/nav_bg.png") repeat-x left top;}

    #gnb_1dul{display:block;overflow:hidden;padding:0;zoom:1;text-align:left;}
    #gnb_1dul .gnb_1dli{z-index:10;position:relative;display:inline-block;width:140px;vertical-align:top;line-height:42px;text-align:left;}
    #gnb_1dul .gnb_1dli:nth-child(1){width:153px;}
    #gnb_1dul .gnb_1dli a span:after{content:'';display:inline-block;position:absolute;top:19px;width:24px;height:5px;padding-left:9px;padding-right:8px;background:url("../images/arrow_nav.png") no-repeat right top;background-size:7px 5px;}


    #gnb_1dul .gnb_1dli .gnb_1da{display:inline-block;height:42px;color:#fff !important;font-weight:bold;text-decoration:none;font-size:16px;}

    #gnb_1dul .gnb_1dli .gnb_1da.on{text-decoration:none;border-bottom:3px solid #f9bd01;}
    /* #gnb_1dul .gnb_1dli_over.gnb_1dli_on .gnb_1da{text-decoration:none;border-bottom:3px solid #f9bd01;} */
    #gnb_1dul .gnb_1dli .gnb_1da:hover{text-decoration:none;border-bottom:3px solid #f9bd01;}
    #gnb_1dul .gnb_1dli .gnb_2dul{display:none;position:relative;width:100%;padding:8px 0;}

    #gnb_1dul .gnb_1dli .gnb_2dul .gnb_2dli .gnb_2da{display:block;height:32px;text-align:left;font-size:13px;line-height:32px;letter-spacing:-1px;text-decoration:none;color:rgba(255,255,255,0.6);}

    #gnb_1dul .gnb_1dli .gnb_2dul .gnb_2dli .gnb_2da:focus,#gnb_1dul .gnb_1dli .gnb_2dul .gnb_2dli .gnb_2da:hover{color:#f9bd01 !important;text-decoration:none;}

    .gnb_1dli .gnb_2dul .gnb_2dli .gnb_2da:hover::before{content:"";position:absolute;top:-4px;width:80px;height:3px;background-color:#f9bd01;}
    .gnb_1dli:nth-child(2) .gnb_2dul .gnb_2dli .gnb_2da:hover::before{width:64px;}
    .selected{color:#f9bd01 !important;}
    /* ===== Nav end ===== */


    /* ====== listWrap_start ====== */
    .list_wrap{position:relative;overflow:hidden;padding:25px 30px;}
    .list_wrap .list_con{overflow:hidden;padding:0px 0px}

    .list_con > .list_top{overflow:hidden;height:27px;margin-bottom:10px;}
    .list_con > .list_top > .fl{font-size:15px;line-height:27px;}


    .list_con > .list_top_form{display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:31px;margin-bottom:10px;}
    .list_con > .list_top_form > .s_tit{font-size:15px;font-weight:bold;}

    .list_con > .list_top_form > .dflex >.form_group{position:relative;width:100%;height:31px;min-width:170px;margin-bottom:0;}
    .list_con > .list_top_form > .dflex >.form_group.search_form{min-width:220px;}


    .list_con > .list_top_form > .dflex >.form_group.end{margin-right:0px;}
    .list_con > .list_top_form > .dflex >.form_group .btn{position:absolute; top:0;right:4px;display:inline-block;font-size:14px;color:#4d5a81;vertical-align:middle;}


    /* type#1 tabel_start*/
    .table-scrollable {width:100%; overflow-x: auto; }
    .tbl_type1{position:relative;font-size:13px;text-align:center;white-space:nowrap}
    .tbl_type1 caption{display:none;}
    .tbl_type1 thead th{padding:15px 10px;background-color:#d0dceb;font-weight:bold;text-align:left;color:#404040;}ㅍ
                                                                                                                   .tbl_type1 tbody tr{color:#666;background-color:#fafbfb;}
    .tbl_type1 tbody tr:nth-child(2n+1){background-color:#f6f7f8;}
    .tbl_type1 tbody tr td{padding:15px 10px;border-bottom:1px solid #fff;text-align:left; color :#606060; word-break:break-all;}
    .tbl_type1 tbody tr td > span{display: none;}
    .tbl_type1 tbody .end td{border-bottom:none;}
    .tbl_type1 tbody tr td input,.tbl_type1 tbody tr td select {min-width:202px}
    /* type#1 tabel_end */

    /* type#2 tabel_start*/
    .table-scrollable {width:100%; overflow-x: auto; }
    .tbl_type2{position:relative;font-size:13px;text-align:center;white-space:nowrap}
    .tbl_type2 caption{display:none;}
    .tbl_type2 thead th{padding:15px 10px;background-color:#d0dceb;font-weight:bold;text-align:left;color:#404040;}
    .tbl_type2 tbody tr{color:#666;background-color:#fafbfb;}
    .tbl_type2 tbody tr:nth-child(2n+1){background-color:#f6f7f8;}
    .tbl_type2 tbody tr td{padding:7px 10px 7px;border-bottom:1px solid #fff;text-align:left; color :#606060; word-break:break-all;}
    .tbl_type2 tbody tr td > span{display: none;}
    .tbl_type2 tbody .end td{border-bottom:none;}
    .tbl_type2 tbody tr td input,.tbl_type2 tbody tr td select {min-width:202px}

    /* 토글 switch_start */
    .switch input[type='checkbox']{position:absolute;visibility:hidden;}
    .switch input[type='checkbox'] + label{display:block;position:relative;width:50px;height:16px;padding-left:0;margin-right:0;line-height:17px;overflow:visible;border-radius:10px;background-color:#c8c8c8;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
    .switch input[type='checkbox'] + label .icon{position:absolute;left:-1px;top:-3px;z-index:1;width:22px;height:22px;border-radius:50%;border:1px solid #ededed;background-color:#fff;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
    .switch input[type='checkbox'] + label:before,.switch input[type='checkbox'] + label:after{position:absolute;top:0;width:100%;letter-spacing:0.1px;line-height:30px;color:#fff;text-align:center;}
    .switch input[type="checkbox"] + label:before{left:-9px;top:-7px;content:'ON';font-size:0px;}
    .switch input[type="checkbox"] + label:after{right:-7px;top:-7px;content:'OFF';font-size:10px;}
    .switch input[type="checkbox"]:checked + label{background-color:#1187cf;}
    .switch input[type="checkbox"]:checked + label:after{font-size:0;}
    .switch input[type="checkbox"]:checked + label:before{font-size:11px;letter-spacing:-1px;}
    .switch input[type="checkbox"]:checked + label .icon{left:0;background-image:none;-webkit-transform:translateX(35px);-ms-transform:translateX(35px);transform:translateX(35px);}
    /* 토글 switch_end */

    /* type#2 tabel_end*/


    /* pageing_start */
    .page_group{position:relative;width:100%;display:flex;justify-content:center;align-items:center;height:26px;margin:15px 0;}
    .pagination{display:flex;align-items:center;}
    .pagination > button{width:10px;height:8px;margin:9px 10px 9px}
    .pagination > button.pg_first{background:#fff url("../images/btn_page.png") no-repeat;background-position:0px 0px;}
    .pagination > button.pg_prev{background:#fff url("../images/btn_page.png") no-repeat;background-position:-10px 0px;}
    .pagination > button.pg_next{background:#fff url("../images/btn_page.png") no-repeat;background-position:-18px 0px;}
    .pagination > button.pg_last{background:#fff url("../images/btn_page.png") no-repeat;background-position:-27px 0px;}
    .pagination > a{color:black;padding:7px 11px 7px;line-height:1;text-decoration:none;}
    .pagination > a.active,.pagination > a:hover{font-weight:bold;text-decoration:underline;}
    .page_group > .page_select select{width:57px;height:26px;padding-left:8px;margin-left:3px;border:1px solid #dadada}
    /* pageing_end */

    /* ====== listWrap_end ====== */

    /* ===== login_start ===== */
    /* .login_top{background:url("../images/login_top.png") no-repeat left 15px center;background-size:282px 16px;} */
    .login_top{background:url("../images/login_top_nids.png") no-repeat left 15px center;background-size:83px 26px;}

    .login_con{position:relative;margin:0 auto;max-width:620px;}
    .login_con > h1{margin-top:111px;margin-bottom:47px;font-size:36px;text-align:center;letter-spacing:-1px;color:#131313;}
    .login_con > .con_box{max-width:580px;margin:0px 20px 0;padding:52px 68px 0px;border:1px solid #dadada;text-align:left;}
    .login_con > .con_box > h2{padding-bottom:15px;font-size:36px;text-align:center;}
    .login_con > .con_box > p{padding-bottom:30px;font-size:13px;text-align:center;letter-spacing:-1px;}
    .login_con > .con_box > .form_group{position:relative;width:100%;min-width:100%;margin-right:0px;margin-bottom:23px;}
    .login_con > .con_box > .form_group.mb15{margin-bottom:40px !important;}
    .loginbtn{width:100%;height:60px;margin-bottom:16px;border-radius:4px;color:#fff;font-size:15px;line-height:60px;text-align:center;background-color:#1f2f52;}
    .login_con > .con_box .lo_p{font-size:11px;padding-bottom:54px;}
    .login_con > .copy{margin-top:32px;margin-bottom:32px;font-size:12px;text-align:center;}
    /* ===== login_end ===== */

    footer > p{margin:0 auto;font-size:12px;color:#999999;line-height:69px;text-align:center;}
    /* Top_button start */
    button#topBtn{display:none;}
    /* Top_button end */

}


@media only all and (min-width:769px) and (max-width:991px) {

    /* ===== FormArea_start ===== */
    .content > .form_container{overflow:hidden;padding:15px;background-color:#f6f7f8;}

    .form_content{position:relative;overflow:hidden;padding:0px;}
    .form_content h2{display: block; font-size: 16px; margin-bottom: 10px; padding-top: 7px;}
    .form_group_wrap{position:relative;display:flex;flex-wrap:wrap;width:100%;align-items:center;}
    .form_group{position:relative;width:100%;margin-bottom:10px;}
    .form_content .form_control{height:37px;font-size:15px;}

    .form_content .form_group .radio_wrapper > span {font-size:15px;}
    .form_content .form_group .radio_wrapper{display:flex; width:100%; border:1px solid #dadada; padding:8px 20px 8px 12px;background-color:#fff;}
    .form_content .form_group .radio_wrapper .radiobox{margin-left:45px; font-size: 15px;}
    .form_content .form_group .radio_wrapper .radiobox:last-child{margin-left:30px}
    .form_group .control_label{display:none}

    .form_content .form_group.end{width:calc(100% - 37px);padding-right:10px}
    .form_content .form_group.end.in_col3{width:100%;padding-right:0;margin-bottom:10px;}

    .form_content .form_group.regiend{width:calc(100% - 60px);padding-right:10px}

    .btn_i_wrap {position: relative; margin-bottom: 10px;}
    .btn_i_wrap .btn {width: 37px; height: 37px; padding:7px; border-radius: 2px; text-align: center; }
    .btn_i_wrap .bg_yell {background-color: #f9bd01;}
    .btn_i_wrap i {display: inline-block; font-size:14px; color: #fff;  vertical-align: middle;}

    .btn_regi_wrap {position: relative; margin-bottom: 10px;}
    .btn_regi_wrap .btn_regi {width: 60px; height: 37px; border-radius: 4px; text-align: center;
        background-color: #1f2f52; color: #fff}
    .form_content .form_list_close{display: none;}

    /* ------ datepicker_timepikcer ----- */
    .form_group.dateTime{display:flex;flex-wrap:wrap;width:100%;align-items:center;}
    .form_group.dateTime + .form_group{margin-top:-10px;}
    .form_group.dateTime .date_group{position:relative;width:57%;padding-bottom:10px;}
    .form_group.dateTime .time_group{position:relative;width:43%;margin-left:-1px;padding-bottom:10px;}
    .form_group.dateTime > .date_group > .date_i{position:absolute;top:5px;right:12px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/cal_icon.png") right center no-repeat;background-size:16px auto;}
    .form_group.dateTime > .time_group > .time_i{position:absolute;top:3px;right:10px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/time_icon.png") right center no-repeat;background-size:15px auto;}
    .form_group.dateTime > span{display:none;}
    .form_group.dateTime .date_group.only{position:relative;width:100%;padding-bottom:10px;}
    /* ===== FormArea_end ===== */

    .list_con > .list_top_form > .dflex >.form_group{position:relative;width:100%;height:31px;min-width:150px;margin-right:8px;margin-bottom:0;}
    .list_con > .list_top_form > .dflex >.form_group.search_form{min-width:210px;}
    .list_con > .list_top_form > .dflex >.form_group .btn{position:absolute;top:0;right:4px;display:inline-block;font-size:14px;color:#4d5a81;vertical-align:middle;}

}

/* =============================
  ========== 키오스크 ==========
================================ */
@media only all and (min-width:992px){

    /* ===== FormArea_start ===== */
    .form_content{position:relative;overflow:hidden;padding:0px;}
    .form_content h2{display: none;}
    .form_group_wrap{position:relative;display:flex;flex-wrap:wrap;width:100%;align-items:center;}
    .form_group{position:relative;width:23%;max-width:234px;margin-right:8px;margin-bottom:8px;}
    .form_content .form_group .radio_wrapper > span{display:none;}
    .form_content .form_group .radio_wrapper{display:flex;width:100%;border:1px solid #dadada;padding:8px 12px;background-color:#fff;}
    .form_content .form_group .radio_wrapper .radiobox:last-child{margin-left:15px}
    .form_group .control_label{display:block;font-size:12px;margin-bottom:6px;color:#666666;letter-spacing:-1px;line-height:1;}

    /* ------ datepicker_timepikcer ----- */
    .form_group.dateTime{display:flex;justify-content:center;width:48%;align-items:center;min-width:476px;}
    .form_group.dateTime.dateonly {min-width:493px;}
    .form_group.dateTime .date_group{position:relative;max-width:140px;}
    .form_group.dateTime .date_group.only {position:relative;min-width:234px;}
    .form_group.dateTime .time_group{position:relative;max-width:90px;padding-top:18px;margin-left:-1px;}
    .form_group.dateTime > .date_group > .date_i{position:absolute;top:18px;right:12px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/cal_icon.png") right center no-repeat;background-size:16px auto;}

    .form_group.dateTime > .time_group > .time_i{position:absolute;top:19px;right:10px;display:inline-block;width:16px;height:30px;vertical-align:middle;text-indent:-9999px;background:url("../images/time_icon.png") right center no-repeat;background-size:15px auto;}
    .form_group.dateTime > span{display: block; margin-top:10px;padding:10px 8px;}

    .btn_i_wrap {position: relative; width: 31px; height: 31px; margin-top:9px}
    .btn {width: 31px; height: 31px; border-radius: 2px; text-align: center;}
    .btn_i_wrap .bg_yell {background-color: #f9bd01;}
    .btn_i_wrap i {display: inline-block; font-size:15px; color: #fff;  vertical-align: middle;}

    .btn_regi_wrap {position: relative; width: 52px; height: 31px; margin-top:9px}
    .btn_regi_wrap .btn_regi {width: 52px; height: 31px; border-radius: 4px; text-align: center; background-color: #1f2f52; color: #fff}

    .form_content .form_list_close{display: none;}

    /* ===== FormArea_end ===== */

    /* ===== Graph_wrap start ===== */
    .graph_wrap{position:relative;padding:24px 30px;}

    /* graph_top start */
    .graph_wrap > .graph_con{position:relative;overflow:hidden;margin-bottom:51px;}
    .graph_con > .graph_top{position:relative;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:16px;margin-bottom:20px;}
    .graph_con > .graph_top > .blue{margin-right:17px;margin-bottom:0;font-size:13px;color:#1187cf;}
    .graph_con > .graph_top > .cbox_wrap > .checkbox{display:inline-block;padding-right:8px;padding-bottom:0;}
    /* graph_top end */


    /* graph_list start */
    .graph_con > .graph_list{position:relative;display:flex;flex-wrap:nowrap;}
    .graph_con > .graph_list > .g_list_box{position:relative;width:25%;height:120px;margin-right:9px;margin-bottom:0px;padding:23px 15px;border-radius:3px;background:rgb(22,86,164);background:-webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));background:-o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);background:linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);-webkit-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);-moz-box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);box-shadow:0px 6px 12px 0px rgba(0,0,0,0.06);}

    .graph_con > .graph_list > .g_list_box:last-child{margin-right:0px;}
    .graph_con > .graph_list > .g_list_box > dl{font-weight:bold;color:#fff;letter-spacing:-1px;}
    .graph_con > .graph_list > .g_list_box > dl dt{padding-top:10px;padding-bottom:13px;font-size:18px;}
    .graph_con > .graph_list > .g_list_box > dl dd{font-size:38px;line-height:1;}

    .graph_con > .graph_list > .g_list_box > dl dd > span{padding-left:3px;font-size:14px;font-weight:normal}
    .graph_con > .graph_list > .g_list_box > span[class ^="i_"]{position:absolute;top:23px;right:15px;width:101px;height:76px;text-indent:-999999px;}
    .graph_con > .graph_list > .g_list_box > .i_good{background:url("../images/icon_good.png") no-repeat center}
    .graph_con > .graph_list > .g_list_box > .i_normal{background:url("../images/icon_normal.png") no-repeat center}
    .graph_con > .graph_list > .g_list_box > .i_bed{background:url("../images/icon_bed.png") no-repeat center}
    .graph_con > .graph_list > .g_list_box > .i_serious{background:url("../images/icon_serious.png") no-repeat center}
    /* graph_list end*/


    /* graph_cha_start */
    .row > .cha_box > .cha_box_head{position:relative;width:100%;height:43px;padding:0 21px;font-weight:bold;font-size:13px;line-height:43px;background-color:#f0f0f1;}
    .row > .cha_box > .cha_box_head > span{position:absolute;right:12px; width: 12px; text-indent:-99999px;background:url(../images/select_arrow.png) no-repeat center;}
    .row > .cha_box > .cha_box_con{position:relative;padding:14px 21px 25px;}
    .row > .cha_box > .cha_box_con > ul{margin-bottom:25px;}
    .row > .cha_box > .cha_box_con > ul li{padding-right:6px;font-size:13px;font-weight:bold;color:#1187cf}
    .row > .cha_box > .cha_box_con > ul li span{font-weight:normal;}
    .row > .cha_box > .cha_box_con > p{position:absolute;top:14px;right:21px;font-size:11px;color:#999999;line-height:13px}
    .row > .cha_box > .cha_box_con > .graph_area{display:flex;justify-content:center;align-items:center;min-height:269px;text-align:center;}
    /* graph_cha_end */


    /* graph_con all start */
    .graph_wrap > .graph_con.all{position:relative;overflow:hidden;margin-bottom:0px;}
    .graph_con.all > .graph_list{position:relative;display:flex;flex-wrap:wrap;}
    .graph_con.all > .graph_list > .g_list_box{position:relative;flex:0 0 49.5%;width:49%;height:247px;margin-right:10px;margin-bottom:15px;padding:29px 27px 24px;border-radius:3px;background:rgb(22,86,164);background:-webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));background:-o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);background:linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);-webkit-box-shadow:0 6px 12px 0 rgba(0,0,0,0.06);-moz-box-shadow:0 6px 12px 0 rgba(0,0,0,0.06);box-shadow:0 6px 12px 0 rgba(0,0,0,0.06);}


    .graph_con.all > .graph_list > .g_list_box:nth-child(even){margin-right:0px}

    /* .graph_con.all > .graph_list > .g_list_box:nth-child(even){margin-right:0px;}
    .graph_con.all > .graph_list > .g_list_box:nth-last-of-type(1){flex-grow:0;width:49.8%}  */
    .graph_con.all > .graph_list > .g_list_box > dl{color:#fff;}
    .graph_con.all > .graph_list > .g_list_box > dl dt{padding-top:3px;padding-bottom:14px;font-weight:bold;font-size:24px;line-height: 1;}
    .graph_con.all > .graph_list > .g_list_box > dl dd{padding-bottom:7px;font-weight:normal;font-size:16px;line-height:1;}
    .graph_con.all > .graph_list > .g_list_box > dl dd:last-child{font-size:11px;padding-bottom:0;}
    .graph_con.all > .graph_list > .g_list_box > span[class ^="i_"]{position:absolute;top:29px;right:30px;width:101px;height:76px;text-indent:-999999px;}


    .graph_con.all > .graph_list > .g_list_box > .v_graph{position:relative;margin-top:22px;display:flex;}
    .v_graph > .v_box{position:relative;overflow:hidden;width:25%;height:96px;margin-right:11px; border-radius:10px;background-color:rgba(240,240,241,0.5);}
    .v_graph > .v_box:last-child{margin-right:0px;}
    .v_graph > .v_box > .v_box_tit{position:absolute;top:15px;left:10px;font-weight:bold;font-size:16px;letter-spacing:-1px;}
    .v_graph > .v_box > .v_box_tit >span{padding-left: 3px; font-weight:normal;}
    .v_graph > .v_box > .v_box_num{position:absolute;bottom:11px;left:10px;font-weight:bold;font-size:18px;}
    .v_graph > .v_box > .gbar{position:absolute;bottom:0;display:block;border-radius:10px;width:100%;height:100%;}
    /* graph_con all end */

    /* legend start */
    .graph_wrap > .legend_wrap{position:relative; margin-bottom: 28px;}
    .graph_wrap > .legend_wrap > dl{display: inline-block; margin-right:8px; margin-bottom:8px; letter-spacing: -0.6px;}
    /* legend end */

    /* ===== Graph_wrap end ===== */


    /* ===== NIDS MAP start ===== */
    .map_area{position:relative;padding:0 88px;}
    .map_area .map_form{flex-wrap:wrap;height:60px;padding:0;align-items:center;}
    .map_area .map_form .map_form_group_wrap{position:relative;display:flex;align-items:center;width:auto;}

    .map_area .map_form .map_form_group_wrap .map_form_group{position:relative;min-width:234px;margin-right:12px;}
    .map_area .map_form .map_form_group_wrap .map_form_group .form_control{height:31px;}
    .map_area .map_form .map_form_group_wrap .btn_i_wrap{position:relative;width:31px;height:31px;margin-top:0;}
    .map_area .map_form .map_form_group_wrap::after{content:"";display:inline-block;width:1px;height:20px;;margin-right:12px;background-color:#ddd;}
    .map_area .map_form > .checkBtn_wrap{height:31px;}
    .check_btn input[type="checkbox"]{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0 none;margin:0;overflow:hidden;clip:rect(0 0 0 0);}
    .check_btn label{display:inline-block;height:28px;padding:4px 10px;border:1px solid #dadada;border-radius:28px;font-size:13px;line-height:18px;color:#131313;}

    .check_btn input[type="checkbox"]:checked + label{color:#fff;background-color:#1187cf;}
    .check_btn label i{display:inline-block;padding-right:8px;font-size:18px;color:#1187cf;vertical-align:top;}
    .check_btn label i:before{display: inline-block}
    .check_btn input[type="checkbox"]:checked + label i{color:#fff;}

    .mlegend_wrap{padding-left:0px;}

    /* 설정 end */

    /* map start*/
    .map{position:relative;width:100%;height:747px;background:url("../images/map.png") no-repeat center;background-size:cover;}
    .pin{position:relative;}

    .pin button{display:inline-block;position:absolute;width:46px;height:46px;border:3px solid #fff;border-radius:46px;-webkit-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);-moz-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);}
    .pin button::after{content:"";display:block;position:absolute;top:42px;left:13px;border-color:#fff transparent transparent transparent;border-style:solid;border-width:10px 7px 0px 7px;width:0;height:0;-webkit-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);-moz-box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);box-shadow:0px 3px 24px 0px rgba(0,0,0,0.24);}

    .pin button > i{display: inline-block; width: 40px; font-size: 22px; color: #fff; text-align: center;}
    .map .windicon{position:absolute;width:29px;height:29px}
    .map .windicon .wind{display:block;overflow:hidden;width:29px;height:29px;border-radius:8px;background-color:rgba(255,255,255,1);-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3);box-shadow:0 1px 4px rgba(0,0,0,0.3);}
    .map .windicon .wind i{display:inline-block;width:29px;font-size:20px;text-align:center;}
    /* map end*/


    /* 마커팝업 start*/
    .mapMobile_pop{display:none}
    .mapWrapper {
        //position: absolute;
        top: 100px;
        left: 400px;
        width: 480px;
        padding: 0;
    }

    .mapWrapper .mappop_wrap {
        position: relative;
        width: 480px;
        height: auto;
        padding: 10px 12px;
        border-radius: 2px;
        background-color: #fff;
        -webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.18);
        box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.18);
    }
    .mapWrapper .mappop_wrap > .tit {
        font-size: 18px;
        font-weight: bold;
        color: #1187cf;
        line-height: 35px;
    }
    .mapWrapper .mappop_wrap > button {
        display: block;
    }

    .mapWrapper .mappop_wrap > .g_list_box {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 126px;
        margin-bottom: 6px;
        padding: 0 10px;
        border-radius: 3px;
        background: rgb(22,86,164);
        background: -webkit-gradient(linear,left top,right top,from(rgba(22,86,164,1)),to(rgba(26,108,194,1)));
        background: -o-linear-gradient(left,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);
        background: linear-gradient(90deg,rgba(22,86,164,1) 0%,rgba(26,108,194,1) 100%);
        -webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
        -moz-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
        box-shadow: 0 6px 12px 0 rgba(0,0,0,0.06);
    }
    .mapWrapper .mappop_wrap > .g_list_box > p {
        font-weight: bold;
        font-size: 16px;
        line-height: 33px;
        color: #fff;
    }

    .mapWrapper .mappop_wrap > .g_list_box .v_graph {
        position: relative;
        display: flex;
        overflow: hidden;
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box {
        position: relative;
        overflow: hidden;
        width: 25%;
        height: 84px;
        border-radius: 10px;
        margin-right: 9px;
        background-color: rgba(240,240,241,0.5);
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box:last-child {
        margin-right:0;
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box .v_box_tit {
        position:absolute;
        top:13px;
        left:10px;
        font-weight:bold;
        font-size:13px;
        letter-spacing:-1px;
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box .v_box_tit > span {
        display:inline-block;
        padding-left:5px;
        font-weight:normal;
        font-size:13px;
        font-weight:normal;
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box .v_box_num {
        position:absolute;
        bottom:11px;
        left:10px;
        font-weight:bold;
        font-size:18px;
    }
    .mapWrapper .mappop_wrap > .g_list_box .v_graph .v_box .gbar {
        position:absolute;
        bottom:0;
        display:block;
        border-radius:10px;
        width:100%;
        height:100%;
    }
    .mapWrapper .mappop_wrap .mpop.cha_box {
        display:block;
        width:100%;
        border:1px solid #e1f2ff;
        margin-right:9px;
    }
    .mapWrapper .mappop_wrap .mpop .cha_box_head {
        position:relative;
        width:100%;
        height:21px;
        padding-left:10px;
        font-weight:bold;
        font-size:13px;
        line-height:21px;
        background-color:#f0f0f1;
    }
    .mapWrapper .mappop_wrap .mpop .cha_box_con {
        width:100%;
        height:150px;
        padding:0 30px;
    }


    /* 마커팝업 end*/
    /* ===== NIDS MAP end ===== */

}

@media only all and (min-width:992px) and (max-width:1072px){
    .graph_con.all > .graph_list > .g_list_box{flex:0 0 49%}
}

/* =============================
 ========== 데스크탑 ==========
================================ */
@media only all and (min-width:1200px) {

    .wrapper{position:relative;width:100%;min-height:100%;min-width:1075px;margin:0 auto;}

    /* ===== FormArea_start ===== */
    .form_content{position:relative;overflow:hidden;padding:0 60px;}
    .form_group_wrap{position:relative;display:flex;flex-wrap:wrap;justify-content:center;width:100%; align-items: center;}
    .form_content .form_group{position:relative;width:14%;max-width:234px;margin-right:8px;margin-bottom:8px;}
    .form_content .form_group.in_col3{width:10%;max-width:200px;margin-right:8px;margin-bottom:8px;}
    .form_content .form_group:last-child{margin-right:0;}

    /* ------ datepicker_timepikcer ----- */
    .form_group.dateTime{display:flex;justify-content:center;width:32%;align-items:center;min-width:476px;}

    /* ===== FormArea_start end ===== */

    /* maplegend start */
    .mlegend_wrap{position: absolute; top: 28px; right: 88px; padding-left:0px}
    .mlegend_wrap > ul > li{display:inline-block;height:15px;}
    .mlegend_wrap > ul > li{padding-right:3px;line-height:15px;font-size:11px;}
    .mlegend_wrap > ul > li> span[class ^="squ_"]{display:inline-block;width:9px;height:9px;margin-right:2px;margin-bottom:3px;vertical-align:middle;text-indent:-999999px;}
    .mlegend_wrap > ul > li > .squ_blue{background-color:#33ccff;}
    .mlegend_wrap > ul > li > .squ_green{background-color:#00ff99;}
    .mlegend_wrap > ul > li > .squ_yellow{background-color:#fbd87d;}
    .mlegend_wrap > ul > li > .squ_red{background-color:#f04040;}
    /* maplegend end */


    /* ====== listWrap_start ====== */
    .list_wrap .list_con{overflow:hidden;padding:0px 39px}
    /* ====== listWrap_end ====== */


    /* ===== Graph_wrap start ===== */
    .graph_wrap{position:relative;padding:24px 88px;}
    .graph_con > .graph_list > .g_list_box{padding:23px 30px;}
    .graph_con > .graph_list > .g_list_box > span[class ^="i_"]{right:30px;}

    /* graph_cha_start */
    .g_cha_wrap{position:relative;}
    .g_cha_wrap > .row{display:flex;width:100%; flex-wrap: nowrap; }
    .row > .cha_box{width:50%; margin-bottom:10px; border:1px solid #e1f2ff;margin-right:9px;}
    .row > .cha_box:nth-of-type(even){margin-right:0px;}

    .row > .cha_box > .cha_box_head{position:relative;width:100%;height:43px;padding:0 21px;font-weight:bold;font-size:13px;line-height:43px;background-color:#f0f0f1;}
    .row > .cha_box > .cha_box_head > span{position:absolute;right:21px; width: 12px; text-indent:-99999px;background:url(../images/select_arrow.png) no-repeat center;}
    /* graph_cha_end */

    /* ===== Graph_wrap end ===== */

}


@media only all and (min-width:1920px) {

    /* graph_con all start */
    .graph_wrap.g_3{position:relative;padding:60px 88px;}

    /* .graph_con.all > .graph_list > .g_list_box{position:relative;width:32.3%;} */
    /* .graph_con.all > .graph_list > .g_list_box:nth-child(even){margin-right:9px;} */
    /* .graph_con.all > .graph_list > .g_list_box:nth-of-type(3),.graph_con.all > .graph_list > .g_list_box:nth-of-type(6),.graph_con.all > .graph_list > .g_list_box:nth-of-type(9){margin-right:0px;}
    .graph_con.all > .graph_list > .g_list_box:nth-last-of-type(1),.graph_con.all > .graph_list > .g_list_box:nth-last-of-type(2){flex-grow:0;width:33%;margin-right:9px;}
    .graph_con.all > .graph_list > .g_list_box:nth-last-of-type(1){margin-right: 0px;} */

    .graph_con.all > .graph_list > .g_list_box{flex:0 0 32.9%}
    .graph_con.all > .graph_list > .g_list_box:nth-child(2n){margin-right:10px}
    .graph_con.all > .graph_list > .g_list_box:nth-child(3n){margin-right:0px;}


    /* graph_con all end */

    /* legend start */
    .graph_wrap > .legend_wrap{position: absolute; top: 27px; left: 88px; margin-bottom: 0px;}
    /* legend end */

}