/* common */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;700&display=swap');
html, body{font-family: 'Nanum Gothic', sans-serif; width: 100%;}
.container{position: relative; width: 100%; height: 100vh; font-family: 'Nanum Gothic', sans-serif;}
.container:after{content: ""; display: block; clear: both;}
.inner{position: relative; margin: 0 auto; padding: 0 30px; width: 1280px;}
.inner:after{content:""; clear: both; display: block;}
a{color: inherit}
.mt0{margin-top: 0 !important;}

/* popup confirm - default*/
.popup_container{position: fixed; z-index: 700; top: 0; left: 0; right: 0; bottom: 0; }
.dim{position: absolute; z-index: 700; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6)}
.popup_content{position: absolute; z-index: 750; top: 50%; left: 50%; padding: 42px 40px 30px 40px; width: 500px; border-radius: 5px; background: #fff; transform: translate(-50%, -50%)}
.popup_content .popup_title{position: absolute; z-index: 500; top: 24px; left: 50%; display: inline-block; padding: 0 10px; height: 40px; line-height: 40px; font-weight: 600; background: #fff; transform: translateX(-50%)}
.popup_content .popup_txt_box{overflow-y: auto; position: relative; z-index: 450; padding: 40px 30px; height: 200px; border-radius: 10px; border: 1px solid #333;}
.popup_content .popup_txt_box p{position: relative; padding-left: 20px; font-size: 16px;}
.popup_content .popup_txt_box p+p{margin-top: 20px; }
.popup_content .popup_txt_box p:before{content: ""; display: block; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border: 1px solid #333; background: #fff; transform: translateY(-50%)}
.popup_content .popup_btn_box{margin-top: 20px; font-size: 0;text-align: center;}
.popup_content .popup_btn_box button{display: inline-block; width: 150px; height: 46px; color: #fff; font-size: 16px; text-align: center; line-height: 46px; border-radius: 5px; background: #bebebe;}
.popup_content .popup_btn_box button+button{margin-left: 46px;}

/* popup alert */
.popup_alert .popup_txt_box{padding-left: 0; padding-right: 0; height: auto; text-align: center; border: 0;}
.popup_alert .popup_txt_box p:before{display: none;}
.popup_alert .popup_txt_box p.alert_title{font-size: 20px; font-weight: 700;}

/* popup loading */
.popup_load{text-align: center; }
.popup_load img{display: inline-block; transform: rotate(360deg); animation: loading 3s ease-in-out infinite;}

/* popup control */
.popup_content.control_popup{padding-top: 80px}
.popup_content.control_popup .popup_title{font-size: 20px;}
.popup_content.control_popup .status_nav{position: relative;}
.control_popup_row{font-size: 0;}
.control_popup_row.desc_row{margin-top: 10px;}
.control_btn{display: inline-block; vertical-align: middle; margin-top: 0;}
.control_popup_select{display: inline-block; vertical-align: middle; padding-left: 10px; width: 25%; height: 46px; line-height: 46px; background: url('../image/ic-volume_down.png') no-repeat; background-position: 90% 50%;}
.popup_content .control_btn{margin-top: 0; margin-left: 10%; width: 65%;}
.popup_content .control_btn button{width: 45%; color: #666; font-weight: 600; border: 2px solid #c5c5c5; border-radius:0; background: #fff;}
.popup_content .control_btn button+button{margin-left: 10%;}
.popup_content .control_btn button.on{color: #fff; border-color: #0068b7; background: #0068b7}
.control_popup_select.wind_control{margin-left: 10%; width: 65%; background-position: 95% 50%;}
.popup_desc{display: block;  font-size: 14px; letter-spacing: -1px; line-height: 16px;}
.popup_desc.last{margin-top: 10px;}


/* pagination */
.pagination{margin: 20px 0; font-size: 0; text-align: center;}
.pagination a{display: inline-block; width: 30px; height: 30px; color: #333; font-size: 16px; font-weight: 600; line-height: 30px; border: 1px solid #c5c5c5; border-right: 0; transition: all 0.2s;}
.pagination a.on,
.pagination a:hover{color: #fff; border-color: #bd9236; background: #bd9236;}
.pagination .arrow{letter-spacing: -5px;}
.pagination .prev{text-indent: -5px;}
.pagination .next{text-indent: -5px; border-right: 1px solid #c5c5c5;}
.search_box{float: none; clear: both; padding-top: 26px; }
.search_box:after{content: ""; display: block; clear: both;}
.search_input_box{float: left;  padding-left: 40px; width: 167px; height: 37px; border-radius: 20px; background: #828282 url('../image/ic-search_left.png') no-repeat 10px center ;}
.search_input_box [type="text"]{display: block; width: 110px; height: 37px; color: #fff; font-size: 1rem; line-height: 37px; background: transparent}
.fliter_sec_name{display: inline-block; vertical-align: middle; color: #333; font-weight: 700; line-height: 37px;}
.search_filter{float: left; position: relative; margin-left: 10px; } 
.search_filter.type02{width: 210px;}
.search_filter label{overflow: hidden; display: inline-block; vertical-align: middle; padding-right: 10px; width: auto;} 
.search_filter [type="radio"]{display: none;} 
.search_filter .filter_name{position: relative; display: inline-block; padding-left: 30px; height: 37px; color: #333; font-size: 16px; font-weight: 700; letter-spacing: -1px; line-height: 39px; } 
.search_filter .filter_name+.filter_name{margin-left: 20px; }
.search_filter .filter_name:after{content: ""; display: block; position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border: 4px solid #333; border-radius: 100%; transform: translateY(-50%)}
.search_filter :checked+.filter_name:after{border-color: #00b41e}
.search_filter .filter_name.type02{position: absolute; top:0; padding: 0; color: #fff; font-size: 14px; font-weight: 500; text-align: center; transition: background 0.2s;}
.search_filter .filter_name.type02:after{display: none;}
.search_filter label:nth-of-type(1) .filter_name.type02{left: 36px; z-index: 10; width: 60px;border-radius:20px; background: #c5c5c5}
.search_filter label:nth-of-type(2) .filter_name.type02{left: 66px; z-index: 8; padding-left: 20px; width: 80px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: #828282 }
.search_filter label:nth-of-type(3) .filter_name.type02{left: 116px; padding-left: 20px; width: 80px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: #515151;}
.search_filter01:checked~label:nth-of-type(1) .filter_name.type02,
.search_filter02:checked~label:nth-of-type(2) .filter_name.type02,
.search_filter03:checked~label:nth-of-type(3) .filter_name.type02{background: #0068b7}
.search_box .search_btn{float: right; height: 37px;}
.search_box .search_btn button{display: inline-block; width: 36px; height: 36px; font-size: 0; border: 0; border-radius: 100%; outline:0; background: #7bd0f5 url('../image/ic-search_left.png') no-repeat center center;}

/* table */
.result_table{float:none; clear: both; margin-top: 10px; margin-bottom: 20px;}
.subtitle+.result_table{padding-top: 20px;}
.result_table table{display: table; width: 100%; border-collapse: collapse;}
.result_table thead{}
.result_table thead th{display: table-cell; vertical-align: middle; height: 36px; color: #fff; font-size: 0; background: #828282}
.result_table thead th+th{border-left: 1px solid #fff;}
.result_table thead th .class_name{display: inline-block; vertical-align: middle; margin-right: 6px; font-size: 16px; }
.result_table thead th .sort_group{display: inline-block; vertical-align: middle; margin-top: -4px;}
.result_table thead th .sort_group button{display: block; width: 10px; height: 10px; font-size: 0; cursor: pointer;}
.result_table thead th .sort_group .up_sort{margin-bottom: 5px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; background: transparent}
.result_table thead th .sort_group .down_sort{width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; background: transparent}
.result_table thead th .sort_group .up_sort:hover{border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #7bd0f5;}
.result_table thead th .sort_group .down_sort:hover{border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #7bd0f5;}
.result_table tbody{}
.result_table tbody td{display: table-cell; vertical-align: middle; height: 48px; text-align: center; border-bottom: 1px solid #c4a919;}
.result_table tbody td span{display: inline-block; vertical-align: middle; font-size: 16px; font-weight: 600; line-height: 1.2}
.stat_circle{display: inline-block; vertical-align: middle; margin-top: -2px; width: 20px; height: 20px; border-radius: 100%; background: #e5e5e5;}
.stat_circle.stat01{background: #0068b7}
.stat_circle.stat02{background: #00b41e}
.stat_circle.stat03{background: #f0b343}
.stat_circle.stat04{background: #910000}

/* table type02 (div coding) */
.research_table{float: none; clear: both; margin-top: 10px; margin-bottom: 20px; width: 100%; }
.research_table .table_row{display: table; width: 100%; text-align: center; font-size: 0;}
.research_table .table_item{display: table-cell; table-layout: fixed; vertical-align:middle; height: 50px; font-size: 0.825rem; }
.research_table .table_row.header .table_item{height: 36px; color: #fff; font-size: 0.825rem; letter-spacing: -1px; border-left: 1px solid #fff; background: #828282}
.research_table .table_row.header .table_item:first-child{border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.research_table .table_row.header .table_item:last-child{border-top-right-radius: 20px; border-bottom-right-radius: 20px;}

.research_table .table_row .table_item.col1{width: 5%;}
.research_table .table_row .table_item.col2{width: 8%;}
.research_table .table_row .table_item.col3{width: 10%;}
.research_table .table_row .table_item.col4{width: 12%;}
.research_table .table_row .table_item.col5{width: 18%;}

.research_table .table_row.body{border-bottom: 1px solid #c4a919;}
.research_table .table_row.body .table_item{font-size: 0;}
.research_table .table_row.body p{letter-spacing: -1px; color: #333; font-size: 14px; font-weight: 700; word-break: keep-all;}

.research_table .table_row.body.disconn{color: #828282;}
.research_table .table_row.body.disconn p{color: #828282;}

.research_table .table_row .conn_stat{display: inline-block; width: 36px; height: 36px; background: url('../image/ic-connect.png') no-repeat; background-size: contain;}
.research_table .table_row.disconn .conn_stat{background: url('../image/ic-connect_fail.png') no-repeat; background-size: contain;}

/* 미세먼지 수치 */
.research_table .table_row .conn_stat_txt{display: inline-block; width: 50%; text-align: center;}
.research_table .table_row .conn_stat_txt i{display: inline-block; vertical-align: middle; margin-right: 5px; width: 20px; height: 20px; border-radius: 100%;}
.research_table .table_row .conn_stat_txt span{display: inline-block; vertical-align: middle;}
.research_table .table_row .conn_stat_txt .stat01{background: #0068b7}
.research_table .table_row .conn_stat_txt .stat02{background: #00b41e}
.research_table .table_row .conn_stat_txt .stat03{background: #f0b343}
.research_table .table_row .conn_stat_txt .stat04{background: #910000}

/* 풍량제어 */
.wind_gauge{display: inline-block; vertical-align: middle; width: 34px; height: 25px; background-size: contain;}
.metro_select{display: inline-block; vertical-align: middle; margin-left: 10px; width: 50px; height: 26px; }
.metro_select .select2{border:1px solid #E5E5E5;display: block; padding-left: 10px; width: 100%; height: 26px; background: #ffffff url('../image/ic-volume_down.png') no-repeat 28px 8px; background-size: 16px 10px;}.wind_bar1{background: url('/resources/image/volume_1.png') no-repeat;}
.metro_select select{display: block; padding-left: 10px; width: 100%; height: 26px; border: 0; background: #c5c5c5 url('../image/ic-volume_down.png') no-repeat 28px 8px; background-size: 16px 10px;}.wind_bar1{background: url('/resources/image/volume_1.png') no-repeat;}

.wind_bar0{background: url('/resources/image/volume_0.png') no-repeat;}
.wind_bar1{background: url('/resources/image/volume_1.png') no-repeat;}
.wind_bar2{background: url('/resources/image/volume_2.png') no-repeat;}
.wind_bar3{background: url('/resources/image/volume_3.png') no-repeat;}
.wind_bar4{background: url('/resources/image/volume_4.png') no-repeat;}
.wind_bar5{background: url('/resources/image/volume_5.png') no-repeat;}
.wind_bar6{background: url('/resources/image/volume_6.png') no-repeat;}

/* 모드제어 */
.mode_chg{display: none;}
.mode_chg_btn{display: inline-block; vertical-align: middle; width: 30px; height: 30px; font-size: 20px; font-weight: 600; line-height: 30px; border: 2px solid #333; transition: background 0.2s; background: #c5c5c5;}
.mode_chg_btn+.mode_chg_btn{border-left: 0;}
.mode_chg.chg01:checked~.mode_chg_btn.auto,
.mode_chg.chg02:checked~.mode_chg_btn.manual{background: #12c31d}

/* 전원제어 */
.power_control{display: inline-block; position: relative; width: 45px;}
.power_control [type="checkbox"]{display: none;}
.power_control .power_btn{position: absolute; z-index: 10; top: 50%; left: 0; margin-left: -10px; width: 22px; height: 22px; border-radius: 100%; transform: translateY(-50%); transition: left 0.2s, background 0.2s; background: #818181;}
.power_control .power_txt{position: absolute; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; padding: 0 7px; color: #fff; font-size: 14px; line-height: 20px;}
.power_control .power_txt.on{display: none; text-align: left;}
.power_control .power_txt.off{text-align: right;}
.power_control :checked~.power_btn{left: initial; left: 100%; margin-left: -15px; background: #12c31d;}
.power_control :checked~.power_txt.on{display: block}
.power_control :checked~.power_txt.off{display: none;}
.power_control .power_gauge{width: 100%; height: 20px; border-radius: 7px; background: #c5c5c5}

/* nav */
.left_nav{float: left; margin-top: 30px;width: 228px; border: 2px solid #c5c5c5; }
.left_nav .nav_top{position: relative; padding: 20px 0 20px 30px ;}
.left_nav .nav_top .logo.main{display: block; width: 118px; height: 35px;}
.left_nav .nav_top .logo.small{display: none; width: 40px; height: 40px;}
.left_nav .nav_top .logo img{display: block; width: 100%;}
.left_nav .nav_top .hamburger,
.left_nav .nav_top .hamburger_m{display: block; position: absolute; top: 50%; right: 12px; width: 30px; height: 18px; font-size: 0; transform: translateY(-50%); background: url('../image/menu.png') no-repeat; cursor: pointer; }
.left_nav .nav_top .hamburger_m{display: none; }

.nav_content{overflow: hidden; position: absolute; top: 109px; left: 30px; width: 228px; height: 848px; border: 2px solid #c5c5c5; border-top: 0;}
.nav_content .nav_admin_box{overflow: hidden; height: 160px; color: #fff; font-family: "Noto_Sans_KR", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -1px; text-align: center; background: #0068b7;}
.nav_content .admin_pic_box{margin: 30px auto 5px; width: 82px; height: 82px;  transition: all 0.2s;}
.nav_content .admin_pic_box img{display: block; width: 100%; }
.nav_content .nav_item_list{}
.nav_content .mobile_close{display: none;}
.nav_content .nav_item{margin-top: 34px; height: 128px; background-image: url("../image/nav_off.png"); background-repeat: no-repeat; background-position: center center; background-size: 120px 128px;  transition: all 0.2s;}
.nav_content .nav_item:hover,
.nav_content .nav_item.on{background-image: url("../image/nav_on.png"); }
.nav_content .nav_item:first-child{margin-top: 40px; }
.nav_content .nav_item:last-child{margin-bottom: 34px; }
.nav_content .nav_item a{display: block; overflow: hidden; margin: 0 auto; width: 120px; height: 128px; text-align: center; transition: all 0.2s;}
.nav_content .nav_item a .icon{display: block; margin: 0 auto;}
.nav_content .nav_item a .icon.dashboard{margin-top: 24px; width: 38px; height: 50px; }
.nav_content .nav_item a .icon.control{margin-top: 20px; margin-bottom: 4px; width: 54px; height: 48px; }
.nav_content .nav_item a .icon.event{margin-top: 20px; margin-bottom: 8px; width: 41px; height: 46px}
.nav_content .nav_item a .icon.setting{margin-top: 30px; margin-bottom: 8px; width: 37px; height: 37px; }
.nav_content .nav_item a .icon img{display: block; width: 100%; }
.nav_content .nav_item a .nav_txt{color: #333; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.5px;}

/* 꺽은선 그래프 영역 */
.line_graph_box{float: none; clear: both; margin-bottom: 20px; padding-top: 20px; font-size: 0; text-align: left; }
.line_graph_box .line_left{display: inline-block; vertical-align: top; width: 20%;}
.line_graph_box .line_left label{display: inline-block; vertical-align: middle; width: 33%; text-align: center; line-height: 30px; }
.line_graph_box .line_left label+label{border-left: 0;}
.line_graph_box .line_left label [type="radio"]{display: none;}
.line_graph_box .line_left label span{display: block; font-size: 16px; background: #eee;}
.line_graph_box .line_left label :checked+span,
.line_graph_box .line_left label:hover span{color: #fff; background: #0068b7}
.line_graph_box .line_right{display: inline-block; vertical-align: top; width: 80%;}
.line_graph_box .line_right .line_graph{width: 100%; height: 200px; background: #ddd;}

/*  */
.left_nav.on{position: absolute; z-index: 100; float: none; margin: 0; border-bottom: 0;}
.left_nav.on+.nav_content{display: none;}
.left_nav.on~.content{float: none; position: relative; z-index: 50; width: 100%; border-left: 2px solid #c5c5c5;}
.left_nav.on~.content .slide{width: 100% !important;}
.left_nav.on~.content .content_box .graph_box{padding-right: 160px; text-align: center;}
.left_nav.on~.content .conn_info .stat_bar_box .stat_bar{width: 33%}
.left_nav.on~.content .conn_info .stat_bar_box .stat_bar:nth-child(2){left: 50%; transform: translateX(-50%)}

.content{float: left; margin-top: 30px; margin-bottom: 30px; width: calc(100% - 228px); border: 2px solid #c5c5c5; border-left: 0;}
.content .content_title{position: relative; z-index: 100; text-align: center; border-bottom: 2px solid #c5c5c5; }
.content .title{height: 75px; font-size: 26px; line-height: 75px;}
.content .private_menu{position: absolute; top: 50%; right: 28px;  font-size: 0; transform: translateY(-50%);}
.content .private_menu li{position: relative; display: inline-block; vertical-align: middle; margin-left: 8px;} 
.content .private_menu li img{display: block; width: 100%;}
.content .private_menu li.help{width: 37px; height: 37px; }
.content .private_menu li.alarm{width: 29px; height: 34px; }
.content .private_menu li.alarm .badge{position: absolute; display: none; top: 0; right: -4px; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 600; border-radius: 6px; background: #f01717}
.content .private_menu li.alarm .badge.show{display: block}
.content .private_menu li.personal{display: none; width: 37px; height: 37px; }
.content .private_menu li.more{margin-left: 18px; width: 6px;}
.content .private_menu li.more .more_nav{display: none; position: absolute; z-index: 200; top: 100%; right: -20px; margin-top: 14px;  width: 100px; border: 1px solid #e5e5e5; background: #fff;}
.content .private_menu li.more .more_nav.show{display: block; }
.content .private_menu li.more .more_nav li{margin-left: 0; height: 22px; font-size: 12px; line-height: 22px; cursor: pointer;}
.content .content_box{position: relative; z-index: 50; overflow-y: auto; height: 846px;}

/* main */
.content_box .btn{position: absolute; }
.content_box .btn.left{left: 25px; }
.content_box .btn.top{top: 24px; }
.content_box .btn.right{right: 24px; }
.content_box .btn.double{background: url('../image/dash.png') no-repeat; background-position: center left; background-size: 33px 22px;}
.content_box .btn.single{background: url('../image/dash1.png') no-repeat; background-position: center right; background-size: 22px 22px;}
.content_box .btn.dashboard,
.content_box .btn.control{z-index: 100; height: 22px; font-size: 18px; font-weight: 600; line-height: 22px; }
.content_box .btn.dashboard{padding-left: 42px;}
.content_box .btn.control{padding-right: 38px;}

.content_box .box{overflow: hidden; position: relative; z-index: 10; padding-left: 60px; padding-right: 26px;}
.content_box .box01{padding-top: 124px;}
.content_box .box02{padding-top: 36px;}
.content_box .more_view{position: absolute; right: 24px; padding: 0 12px; height: 26px; font-size: 14px; line-height: 22px; border: 2px solid #0068b7; border-radius: 12px; background: #fff;}
.content_box .more_view .ic-more{display: inline-block; vertical-align: middle; margin-top: 2px; margin-left: 8px;}
.content_box .box .title{position: absolute; left: 60px; padding: 0 20px; height: 30px; color: #606060; font-size: 18px; letter-spacing: -1px; line-height: 30px; border-radius: 15px; background: #e6e6e6}

.content_box .box01 .title{top: 94px; }
.content_box .box01 .more_view{top: 96px;}
.content_box .box02 .title{top: 0px; }
.content_box .box02 .more_view{top: 2px;}
.content_box .graph_box{clear: both; float: none; padding-top: 20px; height: 210px; font-size: 0; background: #fff}
.content_box .graph_box .chart{position: relative; display: inline-block; vertical-align: middle; text-align: center;}
/* 해제그래프 좌우반전 */
.content_box .graph_box .chart.revert{
    -moz-transform: scaleX(-1);  
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1);   
    filter: FlipH; 
    -ms-filter: "FlipH";
}
.content_box .graph_box .chart.revert .text_box{
    -moz-transform: scaleX(-1);  
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1);  
    filter: FlipH; 
    -ms-filter: "FlipH";
}
.content_box .graph_box .chart_s{width: 72px; height: 79px; background: url('../image/circle_onoff.png') no-repeat; background-size: cover;}
.content_box .graph_box .chart_m{width: 153px; height: 118px; background: url('../image/circle_release.png') no-repeat; background-size: cover;}
.content_box .graph_box .chart_l{width: 154px; height: 167px; background: url('../image/circle_total.png') no-repeat; background-size: cover}
.content_box .graph_box .onoffchart{margin: 0 50px;}
.content_box .graph_box .mainchart{margin: 0 60px;}

.content_box .graph_box .chart_s .text_box{margin: 1px 0 0 1px; width: 72px;}
.content_box .graph_box .chart_m .text_box{position: absolute; top: 2px; left: 20px; width: 103px;}
.content_box .graph_box .chart_l .text_box{width: 154px; }

.content_box .graph_box .chart span{display: block; font-weight: 700; line-height: 1.1;}

.content_box .graph_box .chart_s span{padding-left: 8px; font-size: 14px; text-align: left; }
.content_box .graph_box .chart_s:before{content: ""; position: absolute; top: 50%; left: 100%; margin-left: 20px; width: 28px; height: 10px; transform: translateY(-50%); background: url('../image/left_arrow_2.png') no-repeat; background-size: contain;}
.content_box .graph_box .chart_s .chart_on{margin-top: 24px; color: #0068b7}
.content_box .graph_box .chart_m .chart_title{margin-top: 16px; font-size: 18px; }
.content_box .graph_box .chart_m .chart_count{font-size: 36px; letter-spacing: -2px;}
.content_box .graph_box .chart_m .chart_perview{font-size: 12px; font-weight: 600;}
.content_box .graph_box .chart_m canvas{position: relative; left: -5px; }

.content_box .graph_box .chart_l .chart_title{margin-top: 36px; margin-bottom: 6px; font-size: 20px;}
.content_box .graph_box .chart_l .chart_count{font-size: 50px; letter-spacing: -2px;}
.content_box .graph_box .chart_l:before,
.content_box .graph_box .chart_l:after{content: ""; display: block; position: absolute; top: 50%; width: 40px; height: 16px; transform: translateY(-50%); background: #fc0; } 
.content_box .graph_box .chart_l:before{right: 100%; margin-right: 22px; background: url('../image/left_arrow.png') no-repeat; background-size: contain}
.content_box .graph_box .chart_l:after{left: 100%; margin-left: 22px; background: url('../image/right_arrow.png') no-repeat; background-size: contain}

/* slide */
.content_box .status_box{position: relative;}
.status_box .status_nav{position: absolute; bottom: 100%; left: 50%; margin-bottom: 4px; width: 320px; height: 26px; font-size: 0; border-radius: 12px; background: #c5c5c5; transform: translateX(-50%)}
.status_box .status_nav a{display: inline-block; vertical-align: middle; font-size: 16px; line-height: 26px;}
.status_box .status_nav .prev,
.status_box .status_nav .next{width: 100px; height: 26px; color: #fff; text-align: center; letter-spacing: -1px;}
.status_box .status_nav .next{margin-left: 120px;}
.status_box .status_nav .chk{position: absolute; z-index: 50; top: 50%; left: 50%; width: 106px; height: 30px; text-align: center; border: 2px solid #333; border-radius: 12px; transform: translate(-50%, -50%); background: #fff;}

.content_box .status_box .status_slide_box{text-align: center; font-size:0;}
.content_box .status_box .status_slide_box .slide{padding-top: 42px; padding-bottom: 50px; }
.content_box .status_box .status{display: inline-block; }
.content_box .status_box .status+.status{margin-left: 40px; }
.content_box .status_box .status .status_circle{display: inline-block; vertical-align: middle; margin-right: 12px; width: 107px; height: 107px; line-height: 75px; text-align: center; color: #333; font-size: 18px; font-weight: 600; border-radius: 100%; border: 16px solid #ccc;  background: #fff;}
.content_box .status_box .status .status_circle.status_good{border-color: #0068b7}
.content_box .status_box .status .status_circle.status_normal{border-color: #00b41e}
.content_box .status_box .status .status_circle.status_bad{border-color: #f0b343}
.content_box .status_box .status .status_circle.status_verybad{border-color: #910000}
.content_box .status_box .status .status_info{display: inline-block; vertical-align: middle; }
.content_box .status_box .status .status_info .txt{color: #606060; letter-spacing: -1px;}
.content_box .status_box .status .status_info .txt.standard{font-size: 18px; font-weight: 700;}
.content_box .status_box .status .status_info .standard_point{display: block; font-size: 12px; font-weight: 600;}
.content_box .status_box .status .status_info .txt.now{display: inline-block; margin-top: 20px;font-size: 50px; font-weight: 800;}
.content_box .status_box .status .status_info .txt.now span{display: inline-block; font-size: 18px; font-weight: 600;}

/* 역사 관리자일 경우 */
.status_platform_list_personal{position: relative; margin-top: 30px; padding: 30px 0; font-size: 0; text-align: center;}
.status_platform_list_personal .title{left: 0 !important;}
.status_platform_list_personal .list_row{position: relative; margin-top: 20px; padding-left: 10%; padding-right: 10%;}
.status_platform_list_personal .list_row h3{position: absolute; top:0; left: 0; width: 15%; font-size: 18px; }
.status_platform_list_personal .list_row h3 span{display: inline-block; padding: 10px; height: 36px; color: #fff; font-size: 18px; border-radius: 20px; background: #999999}
.status_platform_list_personal .list_row .device_locale{display: inline-block; margin-bottom: 14px; width: 98px; height: auto; font-size: 16px; line-height: 36px; }
.status_platform_list_personal .list_row .device_locale i{display: block; position: relative; margin: 0 auto; width: 36px;}
.status_platform_list_personal .list_row .device_locale i:after{content: ""; display: block; position: absolute; top: 25px; left: 2px; width: 34px; height: 48px; background: #999;} 
.status_platform_list_personal .list_row .device_locale.stat01 i:after{background: #0068b7}
.status_platform_list_personal .list_row .device_locale.stat02 i:after{background: #00b41e}
.status_platform_list_personal .list_row .device_locale.stat03 i:after{background: #f0b343}
.status_platform_list_personal .list_row .device_locale.stat04 i:after{background: #910000}
.status_platform_list_personal .list_row .device_locale b{display: inline-block; width: 74px; font-size: 12px; font-weight: normal; line-height:16px;}
/* .status_platform_list_personal .list_row .device_locale+.device_locale{margin-left: 10px;} */
/* 역사 관리자일 경우 */

.swiper-pagination{position: static; margin-top: 30px; padding: 30px 0; font-size: 0; text-align: center;}
.swiper-pagination:after{content:""; display: block; clear: both;}
.swiper-pagination-bullet{position: relative; opacity: 1; z-index: 10; display: inline-block; width: 20px; height: 20px; background: #fff;}
.swiper-pagination-bullet-active{background: #910000}
.swiper-pagination-bullet+.swiper-pagination-bullet{margin-left: 15px;}
.swiper-pagination-bullet+.swiper-pagination-bullet:before{content: ""; position: absolute; top: 50%; right: 100%;width: 15px; height: 4px; transform: translateY(-50%); background: #c4a919;}
.swiper-pagination-bullet span{display: block; height: 20px; border: 4px solid #c4a919; border-radius: 100%; }
.swiper-pagination-bullet.status_good span{border-color: #0068b7}
.swiper-pagination-bullet.status_normal span{border-color: #00b41e}
.swiper-pagination-bullet.status_bad span{border-color: #f0b343}
.swiper-pagination-bullet.status_verybad span{border-color: #910000}
.swiper-pagination-bullet span:before{position: absolute; left: 50%; display: inline-block; height: 22px; color: #222; font-size: 12px; line-height: 22px; letter-spacing: -1px; border: 1px solid #d0d0d0; border-radius: 3px; transform: translateX(-50%); background: #fff;}
.swiper-pagination-bullet span:after{content: ""; display: block; position: absolute; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); background: url('../image/bg-cloud.png') no-repeat; background-size: cover;}
.swiper-pagination-bullet:nth-child(even) span:before{bottom: 100%; margin-bottom: 10px; }
.swiper-pagination-bullet:nth-child(even) span:after{bottom: 100%; margin-bottom: 3px; transform: translateX(-50%) rotate(180deg); }
.swiper-pagination-bullet:nth-child(odd) span:before{top: 100%; margin-top: 10px; }
.swiper-pagination-bullet:nth-child(odd) span:after{top: 100%; margin-top: 3px;}

/* 역사별 이름 말풍선 텍스트 추가 */
.swiper-pagination-bullet:nth-child(1) span:before{content: "전체통계"; width: 56px}
.swiper-pagination-bullet:nth-child(2) span:before{content: "개화"; width: 35px}
.swiper-pagination-bullet:nth-child(3) span:before{content: "김포공항"; width: 56px}
.swiper-pagination-bullet:nth-child(4) span:before{content: "공항시장"; width: 56px}
.swiper-pagination-bullet:nth-child(5) span:before{content: "신방화"; width: 45px}
.swiper-pagination-bullet:nth-child(6) span:before{content: "마곡나루"; width: 56px}
.swiper-pagination-bullet:nth-child(7) span:before{content: "양천향교"; width: 56px}
.swiper-pagination-bullet:nth-child(8) span:before{content: "가양"; width: 35px}
.swiper-pagination-bullet:nth-child(9) span:before{content: "증미"; width: 35px}
.swiper-pagination-bullet:nth-child(10) span:before{content: "등촌"; width: 35px}
.swiper-pagination-bullet:nth-child(11) span:before{content: "염창"; width: 35px}
.swiper-pagination-bullet:nth-child(12) span:before{content: "신목동"; width: 45px}
.swiper-pagination-bullet:nth-child(13) span:before{content: "선유도"; width: 45px}
.swiper-pagination-bullet:nth-child(14) span:before{content: "당산"; width: 35px}
.swiper-pagination-bullet:nth-child(15) span:before{content: "국회의사당"; width: 68px}
.swiper-pagination-bullet:nth-child(16) span:before{content: "여의도"; width: 45px}
.swiper-pagination-bullet:nth-child(17) span:before{content: "샛강"; width: 35px}
.swiper-pagination-bullet:nth-child(18) span:before{content: "노량진"; width: 45px}
.swiper-pagination-bullet:nth-child(19) span:before{content: "노들"; width: 35px}
.swiper-pagination-bullet:nth-child(20) span:before{content: "흑석"; width: 35px}
.swiper-pagination-bullet:nth-child(21) span:before{content: "동작"; width: 35px}
.swiper-pagination-bullet:nth-child(22) span:before{content: "구반포"; width: 45px}
.swiper-pagination-bullet:nth-child(23) span:before{content: "신반포"; width: 45px}
.swiper-pagination-bullet:nth-child(24) span:before{content: "고속터미널"; width: 68px}
.swiper-pagination-bullet:nth-child(25) span:before{content: "사평"; width: 35px}
.swiper-pagination-bullet:nth-child(26) span:before{content: "신논현"; width: 45px}

/* slide end */

.status_platform_case{margin-top: 30px; margin-bottom: 30px; text-align: center; font-size: 0;}
.status_platform_case p{display: inline-block; position: relative; padding-top: 22px; font-size: 12px;}
.status_platform_case p+p{margin-left: 18px; }
.status_platform_case p:last-child{margin-left: 10px; }
.status_platform_case p:before{content: ""; display: block; position: absolute; top: 0; left: 50%; width: 6px; height: 6px; border: 4px solid #e5e5e5; border-radius: 100%; transform: translateX(-50%);}
.status_platform_case p.good:before{border-color: #0068b7}
.status_platform_case p.normal:before{border-color: #00b41e}
.status_platform_case p.bad:before{border-color: #f0b343}
.status_platform_case p.verybad:before{border-color: #910000}

/* login */
.container.login .inner{height: 100%}
.loginbox{position: absolute; top: 50%; left: 50%; width: 250px; transform: translate(-50%, -50%);}
.login_logo{margin: 0 auto; width: 172px; }
.login_logo img{display: block; width: 100%; }
.login_txt{margin: 40px 0; width: 100%; color: #222; font-size: 18px; font-weight: 600; letter-spacing: -1px; text-align: center;}
.metro_input{position: relative; width: 100%; border : 3px solid #bd9236; border-radius: 5px;}
.metro_input input{height: 38px;}
.metro_input input::placeholder{color: #c5c5c5; font-weight: 700;}
.metro_input.id_input input,
.metro_input.pw_input input{padding-left: 46px; line-height: 38px; } 
.metro_input.id_input input{background: url('../image/ic-login.png') no-repeat 10px 8px;}
.metro_input.pw_input input{background: url('../image/ic-lock.png') no-repeat 10px 8px;}
.metro_input.type_btn{margin-top: 30px !important; background: #bd9236;}
.metro_input.type_btn input{display: block; width: 100%; height: 50px; color: #fff; line-height: 50px; font-weight: 700; text-align: center; background: transparent}
.metro_input+.metro_input{margin-top: 10px;}
.metro_input .login_error_txt{position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 10px; width: 100%; color: #f01717;font-size: 14px; font-weight: 600; }

/* dashboard */
.content_box .dashboard_box01{margin: 0 auto; padding-right: 0; width: calc(100% - 44px)}
.content_box .dashboard_box02{margin: 0 auto; padding-left: 0; padding-right: 0; width: calc(100% - 44px); border-top: 2px solid #c5c5c5;}
.box01.dashboard_box01 .title{top: 94px; left: 0;}
.box02.dashboard_box02 .title{top: 16px; left: 0;}

/* 역사별 연결 상태 통계 */
.content_box .box.box01.average{padding-left: 0;}
.content_box .subtitle{float: left; text-align: center; padding: 0 20px; height: 30px; color: #606060; font-size: 18px; line-height: 30px; border-radius: 15px; background: #e6e6e6;}
.conn_info{overflow: hidden;}
.conn_info .stat_bar_box{clear: both; float: none; display: block; position: relative; margin: 0 auto; width: 90%; height: 80px; text-align: center; }
.conn_info .stat_bar_box .stat_bar{position: absolute; top: 20px; width: 340px; height: 40px; color: #828282; font-size: 22px; letter-spacing: -1px; line-height: 32px; border: 4px solid #c5c5c5; border-radius: 20px; background: #fff;}
.conn_info .stat_bar_box .stat_bar:nth-child(1){left: 0; border-color: #0068b7;}
.conn_info .stat_bar_box .stat_bar:nth-child(2){left: 260px; border-color: #12c31d}
.conn_info .stat_bar_box .stat_bar:nth-child(3){right: 0;}

.status_info.right{margin-left: 10px; padding-left: 10px; border-left: 1px solid #c5c5c5;}
.content_box .status_box .status .status_info.right .txt.standard{text-align: left;}
.content_box .status_box .status .status_info.status_txt01 .txt.now{display: inline-block; vertical-align: middle; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; font-size: 40px; border-left: 1px solid #c5c5c5; text-align: left;}
.content_box .status_box .status .status_info.status_txt01 .txt_average{display: inline-block; vertical-align: middle; margin-left: 40px; font-size: 20px;}
.content_box .status_box .status .status_info.status_txt01 .txt_average span{display: block; padding-left: 5px; padding-right: 5px; padding-bottom: 4px; width: 100%;letter-spacing: -2px;}
.content_box .status_box .status .status_info.status_txt01 .txt_average span+span{padding-top: 4px; border-top: 1px solid #c5c5c5;}
.content_box .status_box .status .status_info.status_txt01 .txt_average span i{display: inline-block; margin-right: 10px; width: 50px; font-size: 30px; font-weight: 700; text-align: right;}

/* 청정기 제어 */
.content_box .box.purifier{padding-top: 90px; padding-left: 0;}
.status_box.type02 .status_nav{margin-bottom: 30px; width: 400px;height: 40px; border-radius: 20px; background: #e6e6e6;}
.status_box.type02 .status_nav .prev,
.status_box.type02 .status_nav .next{height: 40px; color: #333; line-height: 40px;}
.status_box.type02 .status_nav .prev{margin-left: 0; width: 150px}
.status_box.type02 .status_nav .next{margin-left: 100px; width: 150px;}
.status_box.type02 .status_nav .chk{width: 120px; height: 56px; border-radius: 26px; line-height: 52px}
.purifier .stat01{border-color: #0068b7}
.purifier .stat02,
.purifier .connect{border-color: #00b41e}
.purifier .stat03{border-color: #f0b343}
.purifier .stat04{border-color: #910000}
.all_control{top: 18px !important; padding: 0 20px !important; height: 40px !important; color: #fff; font-weight: 400 !important; border-radius: 10px; line-height: 40px !important; background: #0068b7;}

/* 청정기 제어 - 청정기 상세 */
.puri_info_box{float: none; clear: both; margin-bottom: 20px; padding-top: 20px; padding-left: 78px; padding-right: 48px; font-size: 0; text-align: left;}
.puri_info_box>div{display: inline-block; vertical-align: top; position: relative;}
.puri_info_left{ width: 135px; font-size: 16px; text-align: center; }
.puri_info_right{margin-left: 40px; padding-top: 16px; padding-bottom: 16px; padding-left: 28px; width: calc(100% - 176px); height:158px; font-size: 18px; border: 5px solid #c5c5c5; border-radius: 10px; background: #fff;}
.puri_info_right.full_right{margin-left: 0; width: 100%;}

/* 청정기 제어 - 청정기 상세 - 왼쪽 */
.device_detail{display: block; width: 100%; height: 135px; border: 5px solid #c5c5c5; border-radius: 100%; background: #fff}
.device_detail .ic_device{display: table; width: 100%; height: 86px; max-height: 86px; text-align: center; line-height: 86px; }
.device_detail .ic_device span{display: table-cell; vertical-align: middle; overflow: hidden; width: 100%; height: 86px; text-align: center}
.device_detail .ic_device img{display: block; margin: 0 auto; height: 54px;}
.device_detail .device_name{display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; color: #666; font-weight: 700; letter-spacing: -1px; line-height: 18px;}
.puri_info_box .power_control{margin-top: 10px;}
.device_detail .device_name{display: block;margin-left: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px; color: #666; font-weight: 800; letter-spacing: -1px; line-height: 18px;}

/* 청정기 제어 - 청정기 상세 - 오른쪽 */
.puri_info_box .puri_mod_conn{position: absolute; top: 26px; right: 20px; font-size: 0;}
.puri_mod_btn_box{float: right; font-size: 0;}
.puri_mod_btn_box button{display: inline-block; padding: 0 10px 0 30px; height: 36px; color: #666; font-size: 16px; font-weight: 600; border: 3px solid #c5c5c5; border-radius: 20px; line-height: 36px; background: #fff;}
.puri_mod_btn_box button+button{margin-left: 10px;}
.puri_mod_btn_box button.restart{background: url('../image/ic-btn-restart.png') no-repeat 6px center;}
.puri_mod_btn_box button.refresh{background: url('../image/ic-btn-refresh.png') no-repeat 6px center;}
.ic_puri_mod_conn{display: inline-block; vertical-align: middle; width: 36px; height: 36px; background: url('../image/ic-connect.png') no-repeat; background-size: contain;}
.ic_puri_mod_conn.disconn{background: url('../image/ic-connect_fail.png') no-repeat;}
.puri_mod_badge{display: inline-block;  vertical-align: middle; margin-left: 10px; padding: 0 16px; height: 30px; color: #fff; font-size: 16px; line-height: 30px; border-radius: 20px; background: #c5c5c5; }
.puri_mod_badge.stat01{background: #0068b7}
.puri_mod_badge.stat02{background: #00b41e}
.puri_mod_badge.stat03{background: #f0b343}
.puri_mod_badge.stat04{background: #910000}
.puri_info_box .puri_mod_row.last{margin-top: 6px;}
.puri_info_box .puri_mod_row .puri_mod_row_col{display: inline-block; vertical-align: middle; width: 170px;}
.puri_info_box .puri_mod_row .puri_mod_row_col.col2{width: calc(100% - 180px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.puri_info_box .puri_mod_row .puri_mod_row_col.col3{width: 208px;}
.puri_info_box .puri_mod_row .puri_mod_row_col+.puri_mod_row_col{margin-top: 6px;}
.puri_info_box .puri_mod_row.puri_mod_position .puri_mod_row_col{display: inline-block; vertical-align: middle; width: 200px;}
.puri_info_box .puri_mod_row.puri_mod_position .puri_mod_row_col.col2{width: calc(100% - 210px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.puri_info_box .puri_mod_row.puri_mod_position .puri_mod_row_col.col3{width: 235px;}
.puri_info_box .puri_mod_row.puri_mod_position .puri_mod_row_col.col4{width: 140px !important;}
.puri_info_box .puri_mod_row.puri_mod_position .puri_mod_row_col+.puri_mod_row_col{margin-top: 6px;}
.puri_info_box .puri_mod_row span{font-size: 16px; letter-spacing: -1.5px; line-height: 22px; }
.puri_info_box .puri_mod_row .tit_txt{display: inline-block; vertical-align: middle; color: #333;  font-weight: 700;}
.puri_info_box .puri_mod_row .tit_txt .acc{margin-right: 2px; color: #12c31d; font-size: 30px;}
.puri_info_box .puri_mod_row .info_txt{display: inline-block; vertical-align: middle; color: #666; font-weight: 600;}
.puri_info_box .puri_mod_row .puri_mod_btn{display: block; padding-left: 30px; height: 25px; color: #c5c5c5; font-size: 16px; line-height: 25px; background: url('../image/ic-device-mod.png') no-repeat; background-position: center left;}
.puri_mod_wind_box{display: inline-block; vertical-align: middle;}
.puri_mod_mode_box{display: inline-block; vertical-align: middle; font-size: 0;text-align: center;}
.puri_mod_position{position: absolute;}
.puri_mod_position:nth-of-type(2){top: 20px;}
.puri_mod_position:nth-of-type(3){top: 48px;}
.puri_mod_position:nth-of-type(4){margin-top:0 !important;top: 105px;}
.puri_info_box .puri_mod_position .puri_mod_row_col.col2{text-overflow: initial !important;overflow: initial !important;}

/* 이벤트 */
.box.event{border-top: 0;}
.event .metro_select{margin-top: 5px; width: 100px; }
.event .metro_select select{background-position: 76px 8px}

/* 설정 */
.setting_box{margin: 0 auto; padding-top: 160px; width: 740px; }
.setting_box:after{content: ""; clear: both; display: block; }
.setting_box .setting_item{float: left; margin-left: 20px; margin-bottom: 20px; width: 360px; height: 150px; font-size: 0; text-align: center; border: 1px solid #c5c5c5; border-radius: 10px; box-shadow: 6px 6px 8px rgba(0,0,0,0.2);}
.setting_box .setting_item:nth-child(2n+1){margin-left: 0;}
.setting_box .setting_item a{display: table; width: 100%; cursor: pointer;}
.setting_box .setting_item span{display: table-cell; vertical-align: middle; width: 50%; height: 150px; text-align: center;}
.setting_box .setting_item .setting_icon.icon01 img{width: 110px;}
.setting_box .setting_item .setting_icon.icon02 img{width: 82px;}
.setting_box .setting_item .setting_icon.icon03 img{width: 110px;}
.setting_box .setting_item .setting_icon.icon04 img{width: 82px;}
.setting_box .setting_item .setting_icon.icon05 img{width: 58px;}
.setting_box .setting_item .setting_menu{color: #606060; font-size: 26px; line-height: 1.2;}

/* 셋팅 역사관리 */
.setting_content{margin-top: 80px; padding: 0 25px;}
.setting_content:after{content: ""; display: block; clear: both;}
.set_left_box{float: left; width: 282px;}
.set_right_box{float: right; width: calc(100% - 312px);}

.set_sec_title_box{margin-bottom: 24px; }
.set_sec_title_box:after{content: ""; clear: both; display: block;}
.set_sec_title,
.set_sec_btn{ padding: 0 20px; height: 30px; font-size: 18px; letter-spacing: -1px; line-height: 32px; border-radius: 20px; }
.set_sec_title{float: left; color: #606060; background: #e6e6e6 }
.set_sec_sub_title{float: left; margin-left: 16px; color: #909090; line-height: 30px; letter-spacing: -1px;}
.set_sec_btn{float: right;color: #fff; background: #515151}
.set_sec_title_box .search_filter{float: right; width: 200px;}
.set_sec_title_box .filter_name.type02{margin-left: 20%; width: 60% !important;}

.set_con_box{margin-bottom: 20px; background: #fff;}
.set_con_box.line_box{border: 1px solid #ccc; border-radius: 10px;}
.set_con_box .metro_list_set{padding-top: 36px; overflow-y: auto; height: 680px;}
.set_con_box .metro_list_set ul{margin: 0 auto; width: 60px; text-align: center;}
.set_con_box .metro_list_set ul li{cursor: pointer}
.set_con_box .metro_list_set ul li.metro_HQ{color: #fff; margin-bottom: 30px; width: 100%; height: 30px; font-size: 18px; line-height: 30px; border: 0; border-radius: 5px; background: #eee;}
.set_con_box .metro_list_set ul li.metro_HQ.on{background: #eee;background: #d5c25c;}
.set_con_box .metro_list_set ul li{position: relative; margin: 0 auto 15px; width: 21px; height: 21px; border: 4px solid #c4a91a; border-radius: 100%; }
.set_con_box .metro_list_set ul li.on:not(.metro_HQ){background: #910000}
.set_con_box .metro_list_set ul li:not(.metro_HQ):after{content: ""; position: absolute; top: 100%; left: 50%; margin-top: 4px; margin-left: -2px; width: 4px; height: 15px; background: #c4a91a;}
.set_con_box .metro_list_set ul li:last-child:after{display: none;}
.set_con_box .metro_list_set ul li .word{display: block; position: absolute; top: 50%; height: 20px; transform: translateY(-50%); font-size: 12px; line-height: 20px; border: 1px solid #eee; border-radius: 5px; background: #fff;}
.set_con_box .metro_list_set ul li .word:before{content: ""; display: block; position: absolute; top: 50%; margin-top: -4px; width: 8px; height: 8px;background: url('../image/bg-cloud.png') no-repeat;}
.set_con_box .metro_list_set ul li .word.word2{width: 35px;}
.set_con_box .metro_list_set ul li .word.word3{width: 45px;}
.set_con_box .metro_list_set ul li .word.word4{width: 56px;}
.set_con_box .metro_list_set ul li .word.word5{width: 68px;}
.set_con_box .metro_list_set ul li:nth-child(even) .word{right: 100%; margin-right: 12px; }
.set_con_box .metro_list_set ul li:nth-child(odd) .word{left: 100%; margin-left: 12px; }
.set_con_box .metro_list_set ul li:nth-child(even) .word:before{left: 100%; transform: rotate(90deg); }
.set_con_box .metro_list_set ul li:nth-child(odd) .word:before{right: 100%; transform: rotate(270deg);}

.set_con_row{font-size: 0; text-align: left;}
.set_con_row+.set_con_row{margin-top: 20px}
.set_con_row .set_con_col{display: inline-block; width: 25%;}
.set_con_row .set_con_col.col1{width: 33%}
.set_con_row .set_con_col.col2{width: 50%}
.set_con_row .set_con_col.col3{width: 75%}
.set_con_row .set_con_col.col4{width: 100%}
.set_right_box .line_box{padding: 20px 0 20px 20px;}
.set_con_box .tit_txt,
.set_con_box .info_txt{display: inline-block; vertical-align: middle; letter-spacing: -1px;}
.set_con_box .tit_txt{color: #333; font-size: 16px; font-weight: 700;}
.set_con_box .info_txt{margin-left: 5px; color: #666; font-size: 14px; font-weight: 400;}
.info_txt_input{display: inline-block; vertical-align: middle; margin-left: 0.5rem; font-size: 1rem; line-height: 1}
.info_txt_input.full_input{width: 80%}
.set_con_box .table_row.header .table_item{height: 26px; font-size: 15px; line-height: 26px; }
.set_con_box .table_row.body .table_item{height: 36px; line-height: 36px; }
.set_con_box .table_row.body .table_item .btn_more{display: block; position: relative; line-height: 36px;}
.set_con_box .table_row.body .table_item .btn_more img{position: absolute; top: 50%; left: 50%; width: 4px; height: 17px; transform: translate(-50%, -50%)}
.set_con_box .research_table.col3 .table_item:nth-child(1){width: 15%;}
.set_con_box .research_table.col3 .table_item:nth-child(2){width: 20%;}
.set_con_box .research_table.col3 .table_item:nth-child(3){width: 65%;}
.set_con_box .research_table.col5 .table_item:nth-child(1){width: 20%;}
.set_con_box .research_table.col5 .table_item:nth-child(2){width: 15%;}
.set_con_box .research_table.col5 .table_item:nth-child(3){width: 30%;}
.set_con_box .research_table.col5 .table_item:nth-child(4){width: 30%;}
.set_con_box .research_table.col5 .table_item:nth-child(5){width: 5%;}

/* 사용자 관리 */
.user_set .puri_mod_row{font-size: 0}
.user_set .puri_mod_row+.puri_mod_row{margin-top: 15px;}
.user_set .puri_mod_row_col{width: 50% !important} 
.user_set .puri_mod_row_col.full_col{width: 100% !important;}
.user_set .puri_mod_row_col.col3{width: 33% !important} 
.user_set .metro_select{float: left; width: auto; height: auto}
.user_set .metro_select select{width: 120px; height: 36px; background-position: 95% 14px;}
.user_set_btn_center{text-align: center;}
.user_set_btn_center button{float: none; padding: 0 20px; height: 30px; font-size: 18px; letter-spacing: -1px; line-height: 32px; border-radius: 20px; color: #fff; background: #515151}

.user_set .puri_info_box input:not([readonly]){border: 1px solid #e5e5e5;}
.user_set .puri_mod_row .tit_txt.input_pw{display: inline-block ;width: 20%; }
.user_set .puri_mod_row_col .info_txt_input.input_pw{width: 75%; }

@media screen and (max-width: 820px){

    .pt50{padding-top: 3rem !important;}

    .research_table{padding-top: 20px;}

    .inner{width: 100%; padding: 0 ; }
    .left_nav{position: absolute; z-index: 100; margin: 0; width: 20%; border: 0;}
    .left_nav .nav_top{ padding: 17px 0 17px 5%;}
    .left_nav .nav_top .logo.main{width: 60%; height: auto;}
    .left_nav .nav_top .hamburger{display: none;}
    .left_nav .nav_top .hamburger_m{display: block; }
    .left_nav.on~.content{border-left: 0;}
    .left_nav.on~.content .content_box .graph_box{padding-right: 0;}
    .nav_content{position: fixed; z-index: 200; top: 0; left: -100%; bottom: 0; width: 100%; height: 100vh; background: #fff;}
    .nav_content.on{left: 0;}
    .nav_content .mobile_close{display: block; position: absolute; top: 20px; right: 20px; width: 1.625rem; height: 1.625rem; font-size: 0; background: url('../image/ic-mobile-close.png') no-repeat; background-size: cover;}
    .nav_content .nav_item_list{margin-top: 3rem; text-align: center;}
    .nav_content .nav_item{display: inline-block; margin-top: 1.5rem; width: 25%; }
    .nav_content .nav_item:first-child{margin-top: 1.5rem;}
    .nav_content .nav_item a{width: 100%; }

    .content{position: relative; z-index: 50; margin: 0; width: 100%; border: 0;}
    .content .content_title{height: 60px; line-height: 60px; }
    .content .title{height: 60px; font-size: 20px; line-height: 60px;}
    .content .private_menu{height: 60px; line-height: 60px;}
    .content .private_menu li.help{width: 26px; height: 26px; }
    .content .private_menu li.alarm{width: 22px; height: 28px; }
    .content .private_menu li.alarm .badge{height: 16px; line-height: 14px; }
    .content .private_menu li.personal{width: 26px; height: 26px; }
    .content .private_menu li.more{width: 4px; height: 24px; }

    .content .content_box{height: auto;}
    .content_box .graph_box{height: auto; }
    .dashboard .graph_box{padding-bottom: 30px; height: auto; }
    .content_box .graph_box .onoffchart{margin: 0 1.5rem; }
    .content_box .graph_box .mainchart{margin: 0 1.5rem; }
    .content_box .graph_box .chart_s{width: 5rem; height: 5.25rem;}
    .content_box .graph_box .chart_m{width: 9.525rem; height: 7rem;}
    .content_box .graph_box .chart_l{width: 10rem; height: 10.4rem}
    .content_box .graph_box .chart_s:before{margin-left: 0.825rem; width: 1.25rem;}
    .content_box .graph_box .chart_l:before{margin-right: 0.825rem; width: 1.8rem;}
    .content_box .graph_box .chart_l:after{margin-left: 0.825rem; width: 1.8rem;}
    .content_box .graph_box .chart_s .text_box{width: 100%;}
    .content_box .graph_box .chart_m .text_box{width: 68%}
    .content_box .graph_box .chart_l .text_box{width: 100%;}
    .content_box .graph_box .chart_s .chart_on{margin-top: 1.625rem}
    .content_box .graph_box .chart_m .chart_title{margin-top: 1rem}
    .content_box .box{padding: 0 30px;}
    .content_box .box01{padding: 120px 0;}
    .content_box .box .title{left: 30px; }
    .content_box .box.box02.dashboard{padding-top: 50px}
    .box01.dashboard .title{left: 0;}
    .box02.dashboard .title{left: 0;}
    

    .content_box .box.box02{padding-top: 100px; padding-bottom: 50px;}
    .status_platform_list{margin: 0 auto; padding-bottom: 0; width: 60%;}
    .swiper-pagination{position: relative; margin: 30px auto 0; width: 80%;}
    .swiper-pagination:before{content: ""; display: block; position: absolute; z-index: 5; margin-right: -10px; width: 150px; height: 116px; background: transparent; top: 38px; right: 0; border: 4px solid #c4a919; border-left: 0; border-top-right-radius: 30px;}
    .status_platform_list div,.swiper-pagination-bullet{margin-bottom: 100px; }
    .swiper-pagination-bullet{float :left; cursor: initial !important}
    .swiper-pagination-bullet:nth-child(13)~.swiper-pagination-bullet{float: right;}
    .swiper-pagination-bullet:nth-child(13)~.swiper-pagination-bullet:before{right: initial; left: 100%;}
    .swiper-pagination-bullet:nth-child(14){clear: left; margin-right: 16px;}
    
    .status_platform_case{margin-top: 0;}

    .content_box .box.box01.average{padding-top: 100px; padding-right: 0;}
    .conn_info .stat_bar_box{margin: 0; width: 100%;}
    .conn_info .stat_bar_box .stat_bar{width: 33%;}
    .conn_info .stat_bar_box .stat_bar:nth-child(2){left: 50%; transform: translateX(-50%)}
    .content_box .status_box .status+.status{margin-left: 10px;}
    .content_box .status_box .status .status_info .txt.now{font-size: 2rem;}
    .content_box .status_box .status .status_info.status_txt01 .txt.now{font-size: 2rem}
    .content_box .status_box .status .status_info.status_txt01 .txt_average{margin-left: 0; font-size: 1rem}

    .result_table tbody td span{font-size: 0.825rem; letter-spacing: -1px;}

    .line_graph_box .line_left label{display: block; width: 90%;}

    /* 청정기 */
    .content_box .box.purifier{padding-left: 1.5rem;}
    .search_input_box{width: 60%;}
    .search_btn{margin-top: 1rem}

    /* 청정기 제어 테이블 모바일에서 가림 속성 */
    .search_filter.type02{margin-top: 1rem; margin-left: 0; width: 40%}
    .search_filter.type02.mobile{clear: both;}
    .search_filter.type02+.type02{margin-left: 1.5rem;}
	.research_table .table_row .table_item.tablet{display: none;}
    .research_table.purifier:not(.research_table.purifier.setting) .table_row .table_item:nth-child(10){border-bottom-right-radius: 0; border-top-right-radius: 0;}
    

    /* 청정기 제어 상세 */
    .puri_info_box{padding-left: 0; padding-right: 0; }
    .puri_info_right{margin-left: 1rem; padding-left: 16px; width: calc((100% - 1rem) - 136px)}
    .puri_info_box .puri_mod_conn{top: 16px; right: 16px;}
    .puri_info_box .puri_mod_row .puri_mod_row_col{width: 9rem }
    .puri_mod_badge{margin-left: 0.5rem}
    .puri_info_box .puri_mod_row span{font-size: 14px; }
    .puri_info_box .puri_mod_row .puri_mod_row_col.col3{width: 11rem}

    /* 이벤트 페이지 */
    .event .search_box{padding-top:0;}

    /* 셋팅 페이지 */
    .setting_box{padding: 5rem 1rem; width: 100%;}
    .setting_box .setting_item{width: 48%; margin-left: 4%}
    .set_right_box .line_box{padding-left: 2%}
    .set_con_row .set_con_col.col1{width: 35%;}
    .set_con_row .set_con_col.col1:last-child{width: 30%;}
    .set_con_box .tit_txt{font-size: 0.825rem;}
    .set_con_box .info_txt{margin-left: 0.2rem; font-size: 0.7rem;}
    .set_con_box .table_row p{font-size: 0.825rem !important;}
    .set_sec_sub_title{font-size: 0.825rem}
    .set_con_box .info_txt{display: block; margin-top: 0.25rem}
    .info_txt_input{font-size: 0.825rem;}
    .set_sec_title_box .filter_name.type02{height: 30px; line-height: 30px; }

    .user_set .puri_info_right{height: auto;}
    .user_set .search_input_box{float:none; clear:both; margin-bottom: 1rem;}
    .user_set .search_btn{float: left; margin-top: 0; margin-left: 1rem;}
    .user_set .puri_mod_row span{display: block !important; }
	.user_set .puri_mod_row .tit_txt.input_pw{display: inline-block !important;}
	.user_set .puri_mod_row_col .info_txt_input.input_pw{width: 70%; }
	.fliter_sec_name{line-height: 30px;}
}
@media screen and (max-width: 425px){
	.content_box .graph_box .chart_s:before,
	.content_box .graph_box .chart_l:before,
	.content_box .graph_box .chart_l:after{display: none;}
	/* 20201208 수정사항 반영 */
    .swiper-pagination{overflow: hidden; margin: 0; padding: 9vw 8vw 0; width: 100%; text-align: left;}
    .swiper-pagination:before{content: ""; display: block; position: absolute; top: 10.5vw; right: 0; margin-right: 0; width: 150px; height: 27.5vw; background: transparent; border: 4px solid #c4a919; border-left: 0; border-top-right-radius: 30px;}
    .swiper-pagination-bullet{margin-bottom: 23.5vw; width: 4.7vw; height: 4.7vw;}
    .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left: 2.35vw}
    .swiper-pagination-bullet+.swiper-pagination-bullet:before{width: 2.35vw}
    .swiper-pagination-bullet span{width: 4.7vw; height: 4.7vw;}
    .swiper-pagination-bullet span:before{text-align: center;}
    .swiper-pagination-bullet:nth-child(14){margin-right: 0;}
    .swiper-pagination-bullet:nth-child(13)~.swiper-pagination-bullet{float: left;}
    .swiper-pagination-bullet:nth-child(11),
    .swiper-pagination-bullet:nth-child(12),
    .swiper-pagination-bullet:nth-child(13),
    .swiper-pagination-bullet:nth-child(14),
    .swiper-pagination-bullet:nth-child(15),
    .swiper-pagination-bullet:nth-child(16),
    .swiper-pagination-bullet:nth-child(17),
    .swiper-pagination-bullet:nth-child(18),
    .swiper-pagination-bullet:nth-child(19){float: right !important; margin-left: 0; margin-right: 2.35vw;}
    .swiper-pagination-bullet:nth-child(13):before,
    .swiper-pagination-bullet:nth-child(14):before,
    .swiper-pagination-bullet:nth-child(15):before,
    .swiper-pagination-bullet:nth-child(16):before,
    .swiper-pagination-bullet:nth-child(17):before,
    .swiper-pagination-bullet:nth-child(18):before,
    .swiper-pagination-bullet:nth-child(19):before{right: 100% !important; left: initial !important;}
    .swiper-pagination-bullet:nth-child(19):after{content: ""; display: block; z-index: -5; position: absolute; top: 1.8vw; left: -9.5vw; width: 32px; height: 27.2vw; border: 4px solid #c4a919; border-right: 0; border-top-left-radius: 30px; background: transparent; }
    .swiper-pagination-bullet:nth-child(20){margin-left: 30px !important;}
    .swiper-pagination-bullet:nth-child(20):before,
    .swiper-pagination-bullet:nth-child(21):before,
    .swiper-pagination-bullet:nth-child(22):before,
    .swiper-pagination-bullet:nth-child(23):before,
    .swiper-pagination-bullet:nth-child(24):before,
    .swiper-pagination-bullet:nth-child(25):before,
    .swiper-pagination-bullet:nth-child(26):before{right: 100% !important; left: initial !important;}
    .swiper-pagination-bullet:nth-child(11){clear: both !important;}
    .swiper-pagination-bullet:nth-child(20){clear: both !important;}
    
    /* popup */
    .popup_content{width: 95vw;}
    .popup_content .popup_btn_box button{width: 30vw}
    .popup_content .popup_btn_box button+button{margin-left: 10vw;}

    .left_nav .nav_top{padding: 0; width: 100%; height: 60px;}
    .left_nav .nav_top .hamburger_m{left: 20px;}
    .left_nav .nav_top .logo.main{display: none;}
    .nav_content .nav_item{width: 50%;}

    .content .title{font-size: 0.925rem; letter-spacing: -1px; }

    .content_box .status_box .status+.status{margin-top: 30px; margin-left: 0; }
    .content .private_menu{right: 20px;}
    .content .private_menu li.more{margin-left: 1rem; height: 1.25rem; }

    .status_platform_list_personal .list_row .device_locale:nth-of-type(7n+1){margin-left: 0;}
    
    .content_box .box{padding: 0 1.5rem}
    .content_box .dashboard_box01{width: 100%;}
    .content_box .dashboard_box02{width: 100%; padding-top: 2.5rem !important; }
    .content_box .box01{padding-top: 10rem;}
    .content_box .graph_box{position: relative; height: 85vw; text-align: center}
    .content_box .graph_box .onoffchart{margin: 0 1.5rem; }
    .content_box .graph_box .mainchart{margin: 0 1.5rem; }
    .content_box .graph_box .chart_s{position: absolute; top: 10%; left: 0; margin: 0;width: 5rem; height: 5.25rem;}
    .content_box .graph_box .chart_m{position: absolute; width: 9.525rem; height: 7rem;}
    .content_box .graph_box .chart_l{width: 10rem; height: 10.4rem}
    .content_box .graph_box .conn{top: 55%; left: 0; }
    .content_box .graph_box .disconn{top: 55%; right: 0;}
    .content_box .graph_box .chart_s:before{top: 100%; left: 50%; margin-top: 2rem; margin-left: 0; width: 1.25rem; transform: rotate(75deg)}
    .content_box .graph_box .chart_l:before{top: 95%; right: 75%; margin-right: 0.825rem; width: 1.8rem; transform: rotate(-45deg)}
    .content_box .graph_box .chart_l:after{top: 95%; left: 75%; margin-left: 0.825rem; width: 1.8rem; transform: rotate(45deg)} 
    
    .status_platform_list{width: 100%; }
    .content_box .status_box .status .status_circle.average{display: block; margin: 0 auto 1rem auto;}

    .result_table thead th .class_name{font-size: 0.6rem;}
    .result_table tbody td span{font-size: 0.725rem}

    .conn_info .stat_bar_box{padding-bottom: 3rem; height: auto;}
    .conn_info .stat_bar_box .stat_bar{position: relative; margin-bottom: 10px; width: 100%; }
    .left_nav.on~.content .conn_info .stat_bar_box .stat_bar{width: 100%;}
    .content_box .status_box .status .status_info.status_txt01 .txt.now{border-left: 0;}
    .content_box .status_box .status .status_info.status_txt01 .txt_average{margin-left: 0.5rem;}

    .content_box .box.box01.average{padding-left: 30px; padding-right: 30px;}
    .content_box .average .status_box .status_nav{margin-bottom: 1rem}
    .line_graph_box .line_left{display: block; width: 100%; text-align: center;}
    .line_graph_box .line_left label{display: inline-block; width: 33%;}
    .line_graph_box .line_right{display: block; margin-top: 10px;  width: 100%;}

    /* 청정기 */
    .content_box .box.purifier{padding-top: 8rem}
    .search_input_box{margin-right: 1.2rem; width: 55%;}
    .fliter_sec_name{width: 20%; font-size: 1rem; text-align: center;}
    .search_btn{float: none !important; margin-top: 0;}
    .search_filter.type02{width: 50%}
    .search_filter.type02+.type02{margin-left: 0;}
    .search_filter label:nth-of-type(1) .filter_name.type02{left: 3rem; width: 30%;}
    .search_filter label:nth-of-type(2) .filter_name.type02{left: 5.2rem; padding-left: 7%; width: 30%;}
    .search_filter label:nth-of-type(3) .filter_name.type02{left: 7.5rem; padding-left: 7%; width: 30%;}
    .research_table .table_row.header .table_item{font-size: 0.825rem;}
    .research_table .table_row.body p{font-size: 0.75rem;}
    
    /* 이벤트 페이지 */
    .event .search_box .search_input_box{float:none; clear: both; }
    .event .search_box .search_btn{float: right; margin-top: 1rem;}
    .event .search_box .search_filter{margin-top: 1rem;}
    .event .metro_select{margin-top: 1.3rem; margin-left: 2rem;}

    /* 셋팅페이지 */
    .setting_box .setting_item{float: none; width: 100%; margin-left: 0}
    .user_set .search_input_box{width: 100%;}
    .user_set .search_input_box [type="text"]{width: 80%;}
    .user_set .search_btn button{margin-left: 1rem;}
    .user_set .puri_mod_row_col{width: 100% !important;}
    .user_set .puri_mod_row+.puri_mod_row{margin-top: 0;}
}

@keyframes loading{
    0% {transform: rotate(0deg)};
    100% {transform: rotate(360deg)};
}