﻿@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
html, body {
	height: 100%;
	overflow-x: hidden;
}
body {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 13px;
	line-height: 1.8;
	color: #555;
}
a, a:hover, a:active, a:visited {
	text-decoration: none !important;
}
button, button:hover, button:active, button:visited {
	outline: 0;
}

/* 공통요소 정의 */

.site-wrapper {
	display: table;
	width: 100%;
	height: 100%;
	min-height: 100%;
}
.site-wrapper-inner {
	display: table-cell;
}
.btn, .form-group .form-control {
	border-radius: 0;
}

/* login */

.intro-login {
	background: #484342;
}
.login-box {
	width: 320px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(0,0,0,.25);
	margin: 0 auto;
	border-radius: 8px;
}
.login-box .login-header {
	padding: 13px 0;
	text-align: center;
	border-bottom: 2px solid #484342;
}
.login-box .login-body {
	background: #f1f1f1;
	padding: 15px 20px 20px 20px;
}
.login-box .login-body .form-control {
	font-size: 14px;
}
.login-box .login-foot {
	padding: 8px 20px;
	border-top: 1px solid #ddd;
}
.login-footer { width: 300px; margin: 10px auto;}
.login-footer a {color:#ddd; margin-right: 10px;}
.ht-table {
	color: #484342;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
}
.ht-table > thead {
	border-top: 2px solid #9d1f34;
}
.ht-table > tbody {
	background: #fff;
}
.ht-table > tbody >tr:hover {
	background: #fffdea;
	cursor: pointer;
}
.ht-table > thead > tr > th {
	background: #e8e6e0;
	font-weight: 300;
	padding: 12px 8px;
	border: none;
	text-align: center;
}
.ht-table > tbody > tr > td {
	border-bottom: 1px solid #ddd;
	padding: 10px 8px;
}
.ht-table > thead > tr > th > img {
	cursor: pointer;
}
.ht-table > thead > tr > th > img.ic-order-ascend { 
	content: url(../images/ic_order_ascend.png);
}
.ht-table > thead > tr > th > img.ic-order-descend { 
	content: url(../images/ic_order_descend.png);
}
.table .label { padding:4px 8px; font-size: 12px}
table.h-table {border-top:2px solid #9d1f34;}
table.h-table .form-group { margin:0;}
table.h-table .help-block { margin:5px 0; color:#999; font-size: 11px}

table.h-table tbody th {background:#fff; border-left:1px solid #ddd; border-right:1px solid #ddd;}
table.h-table tbody th:first-child {border-left:none;}
table.h-table tbody th,
table.h-table tbody td{ border-bottom:1px solid #ddd; vertical-align: middle; padding: 10px 15px}
table.h-table .row {margin:0 -10px;}
table.h-table .bbs-cont {padding:20px; line-height: 24px; font-size: 14px;}

@media (min-width:768px) {
	.site-wrapper-inner {
		vertical-align: middle;
	}
}

/* Global Header */

.ht-header {
	height: 80px;
	border-bottom: 1px solid #ddd;
	background-color: #fff;
	position: relative;
	z-index: 100;
}
.ht-header .navbar {
	height: 50px;
	margin-bottom: 30px;
}
.ht-header .navbar-default {
	background-color: #fff;
	border: none;
}
.ht-header .navbar-header {
	width: 100%
}
.ht-header .navbar-brand {
	padding: 22px 0;
}
.ht-header .navbar-header .navbar-brand .default_box img {
	width: 62px;
	max-height: 44px;
	margin-right: 12px;
}
.ht-header .navbar-header .navbar-brand .default_box strong {
	font-size: 1.3em;
    vertical-align: middle;
    font-weight: 900;
	letter-spacing: -1px;
	color: rgba(76,76,76);
}
@media (max-width: 444px) {
	.ht-header .navbar-header .navbar-brand .default_box img {
		width: 14vw;
		margin-right: 12px;
	}
	.ht-header .navbar-header .navbar-brand .default_box strong {
		font-size: 5vw;
		vertical-align: middle;
		font-weight: 900;
		letter-spacing: -1px;
		color: rgba(76,76,76);
	}
}
.ht-header .navbar-header .navbar-brand img {
	height: 44px;
	max-height: 44px;
	width: 64px;
	margin-right: 12px;
}
.ht-header ul.nav {
	margin-top: 26px;
}
.ht-header .nav > li {
	margin-left: 10px;
	line-height: 28px
}
.ht-header .nav > li:first-child {
	margin-left: none;
}
.ht-header .nav > li > a {
	padding: 0;
}
.ht-header .nav > li > .btn-sm {
	padding: 4px 8px;
}
.ht-header .navbar-collapse {
	z-index: 1000;
}
.ht-header .visible-menu {
	display: none;
}
.btn-menu {
	background: url(../images/icon-menu.png) no-repeat;
	background-size: 30px;
	height: 19px;
	width: 30px;
	border: none;
	margin-top: 7px;
}
.btn-menu:hover, .btn-menu:active {
	background: url(../images/icon-menu.png)0 bottom no-repeat;
	background-size: 30px;
	height: 19px;
	width: 30px;
	border: none;
	margin-top: 7px;
}

@media (max-width:767px) {
	.ht-header {
		height: 60px
	}
	.ht-header .navbar-header {
		float: none;
	}
	.ht-header .navbar {
		height: 59px;
		margin-bottom: 0;
	}
	.ht-header .navbar-header .navbar-brand {
		float: none;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%);
		padding: 3px 0 0 0;
	}
	.ht-header .navbar-header .navbar-brand img {
		padding: 8px 0 0 0;
		height: 44px;
		max-height: 44px;
		width: 64px;
	}
	.ht-header .nav > li {
		padding: 15px 0;
		border-bottom: 1px solid #ddd;
		margin: 0 15px;
	}
	.ht-header .navbar-header .navbar-toggle {
		position: absolute;
		right: 0;
		top: 12px;
		margin: 0;
		background: url(../images/icon-profile2x.png) no-repeat;
		background-size: 32px;
		width: 32px;
		height: 32px;
		border: none;
		display: block
	}
	.ht-header .navbar-collapse {
		background: #f0f0f0;
		position: absolute;
		top: 50px;
		right: 5px;
		width: 180px;
		box-shadow: 5px 5px 0 rgba(0,0,0,.15);
	}
	.ht-header ul.nav {
		margin: 0;
	}
	.ht-header ul.nav li {
		margin: 0;
	}
	
	.btn-header-right .btn{ width:100%;}
}

/* layout 영역 */

.wrapper {
	position: relative;
	min-height: 100%;
	margin-top: -80px;
	padding-top: 80px;
	background: #f5f5f5;
}
.wrapper > .row {
	min-height: 100%;
}
.main-menu {
	background: #484342;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 80px;
	width: 300px;
}
.main-cont {
	background: #f5f5f5;
	margin-left: 300px;
	padding: 30px;
	min-height: 100%;
}
/* 메인 메뉴 정의 */

@media screen and (max-width: 991px) {
	.main-cont {
		margin-left: 0;
	}
	.ht-header .visible-menu {
		display: block;
		float: left;
		padding: 30px 20px 0 0;
	}
	.row-offcanvas {
		position: relative;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
		transition: all .25s ease-out;
	}
	.row-offcanvas-left {
		left: 0;
	}
	.row-offcanvas-left .sidebar-offcanvas {
		left: -300px;
	}
	.row-offcanvas-left.active {
		left: 300px;
	}
	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 300px;
	}
	.main-menu {
		padding-top: 0;
	}
}

@media (max-width:767px) {
	.main-cont {padding:0;}
	.ht-header .visible-menu {
		position: absolute;
		left: 0;
		top: 12px;
		float: none;
		padding: 0;
	}
	.wrapper {
		margin-top: -60px;
		padding-top: 60px;
	}
	.content { padding:15px;}
}

.lnb {
  width: 280px;
  padding-top:20px;
  margin-left:20px;
}
.lnb ul,
.lnb li {
  padding:0; margin:0; font-weight:400;
}
.lnb > ul > li {
  cursor: pointer;
  list-style:none;
}
.lnb > ul > li > a {
  font-size: 18px;
  display: block;
  color: #ffffff;
  padding-left:36px;
  margin:20px 0;
  padding:10px 0;
  line-height:26px;
  border-bottom:1px solid transparent;
}
.lnb > ul > li i.memberManage { background:url(../images/icon-user.png) no-repeat; background-size:26px;}
.lnb > ul > li i.siteManage { background:url(../images/icon-monitor.png) no-repeat; background-size:26px;}
.lnb > ul > li i.officeManage { background:url(../images/icon-admin.png) no-repeat; background-size:26px;}
.lnb > ul > li i.danjiIntroduce { background:url(../images/icon-apt.png) no-repeat; background-size:26px;}
.lnb > ul > li i.etcBoard { background:url(../images/icon-mic.png) no-repeat; background-size:26px;}
.lnb > ul > li i.homeNetwork { background:url(../images/icon-home.png) no-repeat; background-size:26px;}
.lnb > ul > li i.adminManage { background:url(../images/icon-admin.png) no-repeat; background-size:26px;}

.lnb > ul > li > a > i { width:26px; height:26px; display:block; float:left; margin-right:10px;}
.lnb > ul > li > a:hover > i,
.lnb > ul > li > a:active > i,
.lnb > ul > li.active > a > i { background-position:left bottom;}


.lnb > ul > li > a:hover,
.lnb > ul > li > a:active,
.lnb > ul > li.active > a {
  color:#ffe569;
  border-bottom:1px solid #5b5655;
  box-sizing:border-box;
}

/* Sub menu */

.lnb ul ul {
  padding: 0;
  display: none;
  margin-left:40px
}
.lnb ul ul a {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height:36px;
  font-weight:100;
}
.lnb ul ul li {
  box-sizing:border-box;
  list-style:none;
}

.lnb ul ul a:hover,
.lnb ul ul a:active,
.lnb ul ul li.active > a {
  color:#ffe569;
  background:#413c3b;
}

/* footer */
.footer-wrap { margin:50px 0 0 0; border-top:1px solid #ddd; padding:20px 0; max-width:1000px; position:relative;}
.foot-cont { font-size:11px; color:#888888; margin-right:110px;}
.foot-cont p{ margin-bottom:0;}
.foot-logo { position:absolute; right:0; top:15px;}
.foot-logo strong { letter-spacing: 1px; color:rgba(121,120,121);} /* 사명(원본은 이미지로 되어있었음) */
.foot-select { position:absolute; right:0; top:40px;}

.join .footer-wrap { border-color:#757271; max-width:100%;}
.join .foot-cont {color:#a2a09f;}

/* content 정의 */

.content {max-width:1000px;}
.content h3 {font-size: 18px; padding-bottom:10px;}
.main-visual.thumbnail { border:none; margin:0; padding:0}

.widget-wrap { margin:30px -15px;}
.widget-btn {}

.widget-box { width:100%; text-align:center; border:1px solid #ddd; border-radius:8px; height:270px; background:#fff; color:#333; margin-bottom:30px;}
.widget-box:hover,
.widget-box:active { background:#9d1f34; border-color:transparent; box-shadow:10px 10px 25px rgba(0,0,0,.3); color:#fff;}
.widget-box:hover hr,
.widget-box:active hr { background:#fff}


.widget-box h3 { font-size:21px;}
.widget-box hr { width:30px; height:2px; background:#333; border:none; margin:15px auto;}
.widget-box i.widget-icon { width:100px; height:100px; clear:both; display:block; margin:20px auto; background:url(../images/icon-widget.png) no-repeat;}

.widget-box i.notice { background-position:0 top;}
.widget-box:hover i.notice,
.widget-box:active i.notice { background-position:0 bottom;}

.widget-box i.board { background-position:-100px top;}
.widget-box:hover i.board,
.widget-box:active i.board { background-position:-100px bottom;}

.widget-box i.repair { background-position:-200px top;}
.widget-box:hover i.repair,
.widget-box:active i.repair { background-position:-200px bottom;}

.widget-box i.location { background-position:-300px top;}
.widget-box:hover i.location,
.widget-box:active i.location { background-position:-300px bottom;}

.widget-box i.vote { background-position:-400px top;}
.widget-box:hover i.vote,
.widget-box:active i.vote { background-position:-400px bottom;}

.widget-box i.energy { background-position:-500px top;}
.widget-box:hover i.energy,
.widget-box:active i.energy { background-position:-500px bottom;}



@media (max-width:767px) {
	.widget-wrap {padding:0 30px;}
	.footer-wrap {margin:15px;}
	.table-btn-group .row > div{ padding:5px 15px 0 15px;}
}
@media (max-width:480px) {
  .lnb > ul > li > a { margin:10px 0; font-size:16px;}
  .lnb ul ul a { line-height:32px}
  .m-hidden { display:none}
  .widget-wrap { padding:10px; margin:0 -5px;}
  .widget-wrap > div { padding:5px;}
  .widget-box {margin-bottom:0; height:180px}
  .widget-box i.widget-icon {margin:20px auto 10px auto}
  .widget-box h3 {font-size:16px; letter-spacing:-1px; margin:10px 0;}
}
/*회원가입 정의 */

.join { background:#484342;}

.flow-wrap {margin:20px 0;}
.flow-wrap .flow1 { background:url(../images/join-1.png) center no-repeat; max-width:200px; height:135px;}
.flow-wrap .flow2 { background:url(../images/join-2.png) center no-repeat; max-width:200px; height:135px;}
.flow-wrap .flow3 { background:url(../images/join-3.png) center no-repeat; max-width:200px; height:135px;}

.flow-wrap .flow1.on { background:url(../images/join-1s.png) center no-repeat}
.flow-wrap .flow2.on { background:url(../images/join-2s.png) center no-repeat}
.flow-wrap .flow3.on { background:url(../images/join-3s.png) center no-repeat}

.join-box { box-shadow:10px 10px 25px rgba(0,0,0,.3);}
.join-box .panel-heading { font-size:18px;}

.join-box h2{ font-size:16px;}
.join-box .well{ height:200px; overflow-y:scroll;}
.join-box b { color:#ff0000; }
.join-box .join-info > .form-group { border-top:1px solid #f0f0f0; padding-top:10px;}
.none-shadow { box-shadow:none;}
.cell-inline {}
.cell-inline .form-control{ display: inline}
.cell-inline label{ line-height:34px; margin:0 5px;}
.join-end { text-align:center; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;}
.join-end h3 {font-size:20px; color:#9d1f34;}
.join-end p {margin:0;}
.join-end .sub { font-size:12px; color:#888;}
.join-end .main { font-size:18px; color:#333;}


/* modal */
.modal-body .well {margin-bottom:0;}
#myPolicy .well,
#myPrivacy .well { height:300px; overflow-y:scroll;}

.modal-body .tab-content { background: #fff; padding: 10px 15px 0 15px; overflow: auto; border: 1px solid #ddd; border-top: none;}
.modal-sm .well {padding:9px}
.modal-sm .row {margin-left:-10px; margin-right:-10px}
.modal-sm .row>div {padding:0 9px;}

/* sub page 설정 */

.title-header {margin:20px 0 30px 0; position: relative;}
.title-header h1 {font-size: 28px; font-weight:700; margin:0; line-height: 36px; height: 36px;}
.title-header .breadcrumb {margin:0; padding:10px 0 0 0; font-size:12px; position: absolute; top:0; right:0;}
.title-header > h1 > i {width: 36px; height:36px; margin-right: 10px; display: block; float: left;}
.title-header i.user {background:url(../images/icon-title-user.png) no-repeat;background-size: cover;}
.title-header i.site {background:url(../images/icon-title-monitor.png) no-repeat;background-size: cover;}
.title-header i.apt {background:url(../images/icon-title-apt.png) no-repeat;background-size: cover;}
.title-header i.gear {background:url(../images/icon-title-gear.png) no-repeat;background-size: cover;}
.title-header i.mic {background:url(../images/icon-title-mic.png) no-repeat;background-size: cover;}
.title-header i.home {background:url(../images/icon-title-home.png) no-repeat;background-size: cover;}

.table-btn-group { background:#eee; padding: 10px; border-top: 1px solid #ddd; min-height: 54px; clear: both;}
.table-btn-group .form-group { margin-bottom:0;}

.content h2 {font-size:18px;}

.h-table .form-group {position:relative;}
.h-table .form-group #counter { position: absolute; bottom: 5px; right: 5px}
#counter { background:rgba(255,0,0,0.5); border-radius: 0.5em; padding: 0 .5em 0 .5em; font-size: 0.75em}
ul.list-style-none { list-style:none; margin:0; padding:0;}
ul.list-style-none li{padding:5px 0;}

.reply-box { background: #fff; border:1px solid #ddd; position: relative}
.reply-box ul { margin:0; padding:10px; list-style: none;}
.reply-box li { padding:10px; border-bottom:1px solid #eee;}
.reply-box .name {font-weight: bold; margin:0;}
.reply-box .date { color:#999; margin:0; font-size: 11px}
.reply-box .ip { color:#999; margin:0; font-size: 11px}
.reply-box .reply { line-height:21px;}
.reply-box .reply-input { padding:0 10px;}
.bottom-btn-wrap { margin-bottom:20px;}

.heading-tab .nav-tabs { border-bottom: 1px solid #ddd}
.heading-tab .nav-tabs > li > a{ border-radius:0; font-size: 15px; background: #ddd; border-bottom:1px solid #ddd; color:#333; padding:8px 30px;}
.heading-tab .nav-tabs > li > a:hover,
.heading-tab .nav-tabs > li > a:focus,
.heading-tab .nav-tabs > li.active > a{ background:#fff; border-bottom:1px solid #fff; border-top: 2px solid #9d1f34; margin-top: -1px;}

.main-sw-box { background:#fff; height:70px; position: relative; margin-bottom:20px; border:1px solid #ddd; border-top:none;}
.main-sw-box .right-switch { position: absolute; top:18px; right:15px}
.center-switch {margin:10px auto 0 auto; width:78px;}
.main-sw-box .title{ font-size:16px;padding:20px 0 10px 20px; line-height:30px; margin:0 80px 0 0;}

.inner-cont .panel {border:1px solid #eaeaea; box-shadow: 0 2px 3px rgba(0,0,0,.2);}
.inner-cont .panel .panel-heading {border-bottom:1px solid #ddd; font-size:16px; position: relative; padding:15px;}
.inner-cont .panel-heading .panel-right-btn{ position:absolute; top:11px; right:15px;}
.inner-cont .slider-wrap { margin:20px auto; width:240px;}
.inner-cont .panel .img-responsive { margin:10px auto}
.inner-cont .panel .panel-body .panel {box-shadow:none; margin-bottom:0;}
.toggle-img { margin:20px auto; text-align: center;}
#radio-area {margin-top:20px;}

.gas-txt1 { font-size:20px; padding-top:20px;}
.btn-primary2 { background:#47a8d8; box-shadow: inset 0 1px 2px rgba(0,0,0,.15), inset 0 0 3px rgba(0,0,0,.2); border-radius: 18px; color:#fff; padding:6px 20px;}
.btn-primary2:hover,
.btn-primary2:focus {color:#fff; font-weight: 700;}

.tab-cont-body { background:#fff; margin-bottom:20px; border:1px solid #ddd; border-top:none; padding:20px;}

.chart-container {position: relative;}
#my-Chart { width:100%; display: inline-block;}

.detail-view-wrap {}
.detail-view-wrap .title{font-size: 16px; border-top: 2px solid #9d1f34; padding:15px 0; color:000; margin:0; line-height: 30px;}
.detail-view-wrap .title > span{margin-right:5px;}
.detail-view-wrap .info {background:#eee; border:1px solid #ddd; padding:10px;}
.detail-view-wrap .info > span:first-child{ margin-right: 15px;}
.detail-view-wrap .detail-cont {padding:20px;}
.detail-view-wrap .well {background:#fff; padding:0;}
.detail-view-wrap .well-header {font-size:18px; text-align:center; padding:10px 0; margin-bottom:20px; border-bottom:1px solid #ddd;}
.detail-view-wrap .well .well-body{padding:10px 20px;}
.detail-view-wrap .well .well-foot{ border-top: 1px solid #eee; padding:15px 20px;}
.detail-view-wrap .progress-bar-1{ background:#1bbbbc}
.detail-view-wrap .progress-bar-2{ background:#ff6060}
.detail-view-wrap .progress-bar-3{ background:#ffc527}
.detail-view-wrap .progress-bar-4{ background:#215ae0}
.detail-view-wrap .pie { max-width:300px; margin:0 auto; padding-bottom:20px;}

.voting-list { padding:0; margin:0}
.voting-list li { list-style: none; padding:0; margin:10px 0;}

.btn-header-right { text-align: right;}

.double-bottom-wrap {display: inline-block; width:100%;}
.double-bottom-wrap>div{ padding:10px 0;}

.danji-wrap { border-top:1px solid #ddd; padding-top: 30px;}
.danji-wrap img{ margin:0 auto; width:100%}
.danji-wrap .danji-info { padding-top:30px; padding-left:20px; font-size:14px;}
.danji-wrap .danji-info li { padding:5px 0;}

.danji-map { max-width:100%; height:480px; background:#555}

.management-debug {width:100%; height:160px; overflow-y:scroll;padding:10px; border:1px solid #eee; margin-top: 15px;}

@media (max-width:480px) {
	.title-header {margin:10px 0;}
	.title-header h1 { font-size: 20px; line-height: 28px}
	.title-header > h1 > i {width: 28px; height:28px; margin-right:5px; display: block; float: left;}
	.table-btn-group {min-height:44px;}
	.table-btn-group .btn{font-size: 11px; padding: 4px;}
	.table-btn-group .form-control{font-size: 11px; padding: 4px; height:auto;}
	.table-btn-group .input-group-addon { padding:4px 8px;}
	.table {font-size:12px;}
	.h-table .row>div {padding:5px;}
	.reply-box .row>div{ padding:0}
	.bottom-btn-wrap .btn {font-size:12px;}
	.heading-tab .nav-tabs > li > a{ border-radius:0; font-size: 13px; background: #ddd; border-bottom:1px solid #ddd; color:#333; padding:6px 15px;}
	.double-bottom-wrap .block-btn-wrap .btn{ width:100%;}
	.danji-wrap {padding-top: 20px;}
	.danji-map {height:360px;}
}

/* width 고정 값 */
.w80 { width:80px}
.w120 { width:120px}
.w160 { width:160px}
.w180 { width:180px}

/*margin 정의 */
.mt40 {margin-top: 40px}

/*padding 정의 */
.ptb10 {padding-top:10px; padding-bottom:10px}

.dis-none { display: none;}

/* Loader Icon */

.loading-back { position: absolute; top:0; left: 0; right:0; bottom:0; margin:auto; background:rgba(0,0,0,0.6); z-index: 999999}
.loading-wrap { position: absolute; width:160px; height:90px; background:rgba(0,0,0,0.6); border-radius: 5px; text-align: center; left:50%; top:50%; margin:-45px 0 0 -80px; color:#999;}
.loading-wrap .loader {margin:20px auto 10px auto;}
.loader {
  border: 5px solid #ddd;
  border-radius: 70%;
  border-top: 5px solid #9d1f34;
  width: 28px;
  height: 28px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 토글 스위치 정의 */

.switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 76px;
  height: 30px;
  padding: 3px;
  background-color: white;
  border-radius: 28px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #eeeeee, white 35px);
  background-image: -moz-linear-gradient(top, #eeeeee, white 35px);
  background-image: -o-linear-gradient(top, #eeeeee, white 35px);
  background-image: linear-gradient(to bottom, #eeeeee, white 35px);
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 12px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: opacity background;
  -moz-transition-property: opacity background;
  -o-transition-property: opacity background;
  transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}
.switch-label:before {
  content: attr(data-off);
  right: 12px;
  color: #aaa;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
  content: attr(data-on);
  left: 12px;
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.switch-input:checked ~ .switch-label {
  background: #47a8d8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}

.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 14px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
  background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
  background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}
.switch-handle:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
  background-image: -webkit-linear-gradient(top, #eeeeee, white);
  background-image: -moz-linear-gradient(top, #eeeeee, white);
  background-image: -o-linear-gradient(top, #eeeeee, white);
  background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
  left: 44px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-green > .switch-input:checked ~ .switch-label {
  background: #4fb845;
}

/* 라디오 토글 정의 */
.center-tab {text-align: center; margin:10px auto;}
.switch-field {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  background-color: white;
  border-radius: 20px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #eeeeee, white 35px);
  background-image: -moz-linear-gradient(top, #eeeeee, white 35px);
  background-image: -o-linear-gradient(top, #eeeeee, white 35px);
  background-image: linear-gradient(to bottom, #eeeeee, white 35px);
	
}
.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 30px;
  background: #eceeef;
  border-radius:0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: opacity background;
  -moz-transition-property: opacity background;
  -o-transition-property: opacity background;
  transition-property: opacity background;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
  color:#fff;
  font-weight: 700;
  background: #47a8d8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.switch-field label:first-of-type {
  border-radius: 20px 0 0 20px;
}

.switch-field label:last-of-type {
  border-radius: 0 20px 20px 0;
}

@media (max-width:480px) {
	.switch-field label {padding:6px 15px;}
}

.rs-tooltip > div{font-size:18px;}
.rs-tooltip > div > div {font-size:12px; color:#ff6600}
#air .rs-range-color {
	 background: red;
     background: -webkit-linear-gradient(left, #6ae6d9, #000fda);
     background: -o-linear-gradient(right, #6ae6d9, #000fda);
     background: -moz-linear-gradient(right, #6ae6d9, #000fda);
     background: linear-gradient(to right, #6ae6d9, #000fda);
}