@charset "UTF-8";

/* 폼 */
.page-form {position:relative; }
.page-form .panel-white .form-control {width:100%; margin-top:10px; padding:15px 15px; border:none; font-size:14px; font-weight:300; border-radius:4px; border:1px solid #dbdbdb; }
.page-form .panel-white .checkbox_con {overflow:hidden; padding:15px 0 25px 0;}
.page-form .panel-white .checkbox_con .checkbox_round label {font-size:0.96em; color:#3d3d3d; font-weight: 400;}
.page-form .panel-white .bottom_btns {padding:0;}
.page-form .panel-white .bottom_btns .button {margin-bottom:10px; }

.text_btns {overflow: hidden; position: relative; text-align: center;}
.text_btns ul li {position: relative; display:inline-block; padding:0 10px;}
.text_btns ul li::after {position:absolute; right:0px; top:3px; content: ""; display: inline-block; width:1px; height: 10px; background-color: #ccc;}
.text_btns ul li:last-child::after {display: none;}

/* 로그인 */
#loginForm {padding:0px 0; }
#loginForm .loginTit {padding:40px 0; font-family: 'S-CoreDream-3Light'; font-size:2.0em; text-align:center; color:#000; font-weight:normal;}
#loginForm .loginTit strong {font-family: 'S-CoreDream-5Medium'; font-weight:normal;}
#loginForm .panel {padding:0 20px;}
#loginForm .form-login {position:relative; }
#loginForm .text_btns {padding-top: 30px;}
#loginForm .membersel_cons {overflow:hidden; padding:10px 0 0 0; margin:0 -5px;}
#loginForm .membersel_cons .select_con{float:left; width:33.33%; padding:0 5px;}
#loginForm .membersel_cons select {margin:0; padding:0 40px 0 15px; width:100%; height:50px; font-size:16px; line-height:50px; color:#3d3d3d; border:none;
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none; 
	font-family: inherit; /* 폰트 상속 */ 
	 /* 화살표 모양의 이미지 */
	background:#fff url('../../images/board/select_bg.png') no-repeat right center; background-size:53px auto;
	border-radius:4px; border:1px solid #dbdbdb;}

.checkbox_round {position:relative; display:inline-block;}
.checkbox_round 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);}
.checkbox_round label{display:inline-block; height:28px; line-height:28px; padding-left:35px; margin-bottom:0px; margin-right:15px; background:url("../../img/contents/checkbox_round.png") no-repeat 0 0; background-size:28px auto; font-size:15px; cursor:pointer;}
.checkbox_round input[type="checkbox"]:checked + label{background-position: 0 -28px;}
#loginForm::after {content:""; position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:-1; background:#fff;} 

/* 회원가입 */
#joinForm .join_header {padding:30px 20px; background:#fff;}
#joinForm .join_header .tit {margin-bottom:10px; font-size:1.5em; }
#joinForm .join_header p {font-size:0.83em; line-height:1.4em;}
#joinForm .panel {padding:15px 20px 0 20px; background:#f3f3f3; border-top:1px solid #dbdbdb;}
#joinForm .panel::after {content:""; position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:-1; background:#f3f3f3;}
#joinForm .exp {padding:10px 0 15px 0; font-size:0.83em;}

.bottom_btns {overflow:hidden; position:relative; }
.bottom_btns .division-2 {margin:0 -7px;}
.bottom_btns .division-2 li {float:left; width:50%; padding:0 7px; }


.conTit {padding:25px 0; font-size:1.5em; font-weight:700; color:#000; text-align:center; background:#fff; border-bottom:1px solid #dbdbdb;}

.main-menu ul {
	/* flex */
	-webkit-appearance:none;
	/* 플렉스 컨테이너 생성 */
	display: -webkit-box;
	display: -ms-flexbox;
    display: flex;
	
	/* 플렉스 감싸기(줄바꿈) 금지 설정 */
	-webkit-box-lines: single;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	
	/* 플렉스 주축 row 설정*/
	-webkit-box-orient: horizontal;
	-ms-flex-direction: row;
	flex-direction: row;
	
	/* 를렉스 주축 row-reverse 설정.
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;*/
	
	/* 플렉스 아이템 교차축 baseline 정렬*/
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;

	background:#fff;
} 
.main-menu ul li {	
	-webkit-appearance:none;
	
	/* 플렉스 확장 지수 설정*/
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex-grow: 1;
}
.main-menu ul li:first-child {border-left:none;}
.main-menu ul li a {position:relative; display:block; font-size:1.0em; color:#666; line-height:65px; text-align:center; }
.main-menu ul li a::after {position:absolute; left:0px; bottom:0px; content:""; display:block; width:100%; height:1px; background:#dbdbdb;}
.main-menu ul li a.active {font-weight:500; color:#4285f4; text-decoration:none;}
.main-menu ul li a.active::after {height:3px; background:#4285f4;}

/* on/off 스위치 */
.onoffswitch {position: relative; width: 30px;  
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
.onoffswitch-checkbox {display: none;}
.onoffswitch-label {display: block; overflow: hidden; cursor: pointer; border-radius: 50px;}
.onoffswitch-inner {
	display: block;
	width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, 
.onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 13px; padding: 0; margin:3px 0px; border-radius: 50px;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {content: ""; padding-left: 0px; background-color: #dbdbdb;}
.onoffswitch-inner:after {content: "";  padding-right: 0px; background-color: #dbdbdb; text-align: right;}
.onoffswitch-switch {
    display: block; width: 18px; height:18px; margin: 0;
    background: #888;
    border-radius: 50px;
    position: absolute; top: 0; bottom: 0; right: 12px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right: 0px; }

/* 제어 */
.control_area {position:relative; padding:13px 13px 0 13px;}
.control_area .all_active {position:relative; padding-bottom:15px;}
.control_area .all_active ul {margin:0 -5px;}
.control_area .all_active ul li {float:left; width:35%; padding:0 5px;}
.control_area .all_active ul li:last-child {width:30%; }
.control_area .all_active .boxBtn {width:100%; padding:30px 0; font-size:1.0em; font-weight:700; color:#000; background:#fff; border-radius:12px; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1); }
.control_area .all_active ul li .boxBtn.active,
.control_area .all_active ul li .boxBtn:active {color:#fff; background:#3367d6;}
.control_area .all_active ul li .boxBtn .pic {overflow:hidden; display:inline-block; width:45px; height:45px; border-radius:100%;}
.control_area .all_active ul li .boxBtn .pic.play {background:url("../../img/contents/paly_btn.png") no-repeat 0 0; background-size:100% auto; }
.control_area .all_active ul li .boxBtn .pic.stop {background:url("../../img/contents/stop_btn.png") no-repeat 0 0; background-size:100% auto; }
.control_area .all_active ul li .boxBtn .pic.info {background:url("../../img/contents/info_btn.png") no-repeat 0 0; background-size:100% auto; }
.control_area .all_active ul li .boxBtn span {display:block; padding-top:5px;}
.control_area .all_active ul li .boxBtn.active .pic.play,
.control_area .all_active ul li .boxBtn.active .pic.stop {box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);}

h3.h3Tit {clear:both; position: relative; padding:0px 0 0px 10px; margin-bottom:15px; font-size:1.13em; font-weight:500;}
h3.h3Tit:before {content:""; position:absolute; left:0px; top:1px; display:inline-block; width:4px; height:100%; background:#2c5cd0; border-radius:5px; }

.control_list {position:relative;} 
.control_list li {position:relative; padding:17px 20px; margin-bottom:10px; background:#fff; border-radius:10px; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);} 
.control_list li a {display:block; }
.control_list li dl {position:relative;}
.control_list li dt {overflow: hidden; width: 100%; padding:0 0 0 0; text-overflow: ellipsis;}
.control_list li .stat {padding:0 15px 0 0; background:url("../../img/contents/grey_arrow.png") no-repeat right center; background-size:auto 14px; }
.control_list li .stat:before {content:""; display:inline-block; width:15px; height:15px; margin-right:5px; border-radius:100%; background:#888; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1); vertical-align:middle; }
.control_list li .stat.ing {color:#e10000;}
.control_list li .stat.ing:before {background:#e10000; box-shadow:1px 5px 5px 0 rgba(255,0,0,0.1);}
.control_list li .stat.stop {color:#666;}
.control_list li .stat.stop:before {background:#888; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);}
.control_list li .switch {}
.control_list li .switch .txt {display:inline-block; vertical-align:middle; font-size:0.93em; margin-right:10px;}
.control_list li .switch.stop .txt{color:#666;}
.control_list li .switch.ing .txt{color:#e10000;}
.control_list li .switch .set-btn {display:inline-block; vertical-align:middle;}
.control_list li .switch.ing .set-btn .onoffswitch-switch {background:#e10000;}

h4.point_bu {text-align:justify;padding:2px 0px 2px 20px; margin-bottom:15px; font-size:1.1em; font-weight:500; color:#000; background:url("../../img/contents/point_btn.png") no-repeat left center; background-size:15px auto;}

.point_box {padding:15px 15px; background:#fff; border:1px solid #dbdbdb; border-radius:7px;}
.point_box p {font-size:0.9em; line-height:1.4em;}

.round_tab {position:relative; padding-bottom:20px;} 
.round_tab ul{overflow:hidden; background:#fff; /*border:1px solid #bbb;*/ border-radius:15px;  box-shadow:1px 4px 5px 0px rgba(0,0,0,0.15); }
.round_tab ul li {float:left; width:50%; }
.round_tab ul li a {overflow:hidden; display:block; text-align:center; padding:17px 0; border-radius:15px; border:1px solid #fff;}
.round_tab ul li a.active {border:1px solid #4285f4; }


/* 모니터링 */
.keyset_area {position:relative; padding-bottom:30px; }
.keyset_area .write {padding:0 83px 0 0;}
.keyset_area .btns {position:absolute; right:0px; top:0px;}
.keyset_area .text_box {width:100%; padding:15px 5px 15px 10px; border:none; font-size:14px; font-weight:300; border-radius:4px; border:1px solid #dbdbdb;}
.keyset_area .write-btn {padding:15px 25px; border:none; font-size:14px; font-weight:300; border-radius:4px; color:#fff; background:#3367d6;}

.graph_list {overflow:hidden; position:relative; margin:0 -10px; padding-bottom:30px;}
.graph_list .graph_item {float:left; width:50%; padding:0 10px; }
.graph_list .graph_item .graph_box {overflow:hidden; padding:20px; background:#fff; border-radius:20px; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);}
.graph_list .graph_item .graph_box strong {display:block; margin-bottom:10px; text-align:center; }
.graph_list .graph_item .graph_box .exp {padding-top:10px; font-size:0.86em; color:#666; line-height:1.3em; text-align:center; }
.graph_list .graph_item .graph_box .more_btn {display:block; margin:20px auto 0 auto; width:80px; padding:7px 0; text-align:center; border:1px solid #888; border-radius:50px; box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);}
.graph_list .graph_area {overflow:hidden; position:relative;}
.graph_list .graph_area img {max-width:100%;}


/* 관리 */
.set_area {position:relative; padding:30px 20px;}

.default-form {position:relative; padding-bottom:10px; }
.default-form .input_type {width:100%; padding:0px 15px; line-height:45px; font-size:15px; font-weight:400; border-radius:4px; border:1px solid #dbdbdb; }
.default-form .con {margin-bottom:10px;}
.default-form .con.col-2 {overflow:hidden; margin:0 -5px; padding-bottom:10px;}
.default-form .con.col-2 .item {float:left; width:50%; padding:0 5px;}
.default-form dl {position:relative; padding-bottom:10px;}
.default-form dt.tit {position:absolute; top:0px; left:0px; line-height:50px;}
.default-form dd.con2 {position:relative; padding:0 20px 0 70px;}
.default-form dd.con3 {position:relative; padding:0 0 0 70px;}
.default-form .etc_txt {position:absolute; top:0px; right:0px; line-height:50px;}


select.select_type1 {margin:0; padding:0 40px 0 15px; width:100%; height:45px; font-size:15px; line-height:45px; color:#3d3d3d; border:none;
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none; 
	font-family: inherit; /* 폰트 상속 */ 
	 /* 화살표 모양의 이미지 */
	background:#fff url('../../img/contents/select_arrow.png') no-repeat right center; background-size:auto 45px;
	border-radius:4px; border:1px solid #dbdbdb;}


.tab_menu {overflow:hidden; position:relative;  }
.tab_menu ul li {float:left; width:50%; background:#fff;}
.tab_menu ul li a {display:block; padding:17px 0; text-align:center; border:1px solid #dbdbdb; border-bottom:none;} 
.tab_menu ul li a.active {color:#fff; background:#000; border-color:#000;}