@CHARSET "UTF-8";

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #ccc;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #ccc; opacity:  1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #ccc; opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc;
}
input::-ms-input-placeholder { /* Microsoft Edge */
	color: #ccc;
}

input:focus, select:focus {
	outline:1px solid #444; outline-offset:-1px;
} 

input:focus[readonly]{ outline:none; } 

select {
	min-width: 60px; height:28px; border:1px solid #ccc; /* vertical-align:middle;  box-sizing:border-box; background:#fff; border-radius: 0;*/
	background: transparent;
	background-image: none; 
	-webkit-appearance: none; -moz-appearance: none; appearance: none;/* 네이티브 외형 감추기 */
}  
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {
    display: none;
}

select[disabled] { 
	background:#f9f9f9;
}

input[type=text], input[type=password]{
	min-width: 60px; height:28px; border:1px solid #ccc; color:#000; /* box-sizing: border-box; */
}

input[type=text], input[type=password], select {
    width: 100%; /* padding: 5px 20px; */ padding: 5px 25px 5px 20px; margin: 8px 0; display: inline-block;    /* border: 1px solid #ccc;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  */
}

/************ 공통 - 레이아웃 **********************/

#wrap{background: #eff3f6 ;}
#wrap.green{background: #eff6f4 ;}

#headerWrap{box-shadow: 0px 1px 2px rgba(0, 0, 0, .3)}

#bodyWrap{position: relative ;}
body.scrollLock{ position: fixed; overflow: hidden;	height: 100%; width: 100%;left: 0;}


#leftWrap{display: none; position: fixed; left: 0 ; top: 0 ;box-sizing: border-box;	width: 0; height: 100%; border: 1px solid #ccc; background: #fff; z-index: 10000;}
#leftWrap.open {display: table; width: auto;}
.left_outer {position: static; width: 100%; min-width: 250px; height: 100%;}
.left_inner {position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; }
#treelayout { min-height:892px; padding:5px;}


#rightWrap {box-sizing: border-box; min-height: 976px;  border: 1px solid #ccc; background: #fff;}
.contextsAreaWrap {	padding: 0 20px 20px; /* 	padding: 0 2.6% 2.6%; */}

#footerWrap {clear: both; position: relative;  bottom: 0; z-index: 5; width: 100%; min-height: 59px;}
#footerWrap ul{	overflow: hidden;}
#footerWrap li {color: #a9a5a5; font-size: 12px; line-height: 12px; padding-bottom: 5px;}
#footerWrap .left_monly {float: left;padding-right:10px;} 


/************ 공통 - 로고 부분 **********************/

.logoWrap {position: relative;	padding: 10px 5px 10px; background: #fff; width: 100%; box-sizing: border-box; overflow: hidden ; /* 	box-shadow: 0px 1px 2px rgba(0, 0, 0, .3);     */}
.logoWrap .left {float: left ;}
.logoWrap .center {position: absolute; text-align: center; left: 113px; right: 113px; padding-top: 5px;}
.logoWrap .center > a {display: block;}
.logoWrap .right {float: right ;}
.logoWrap button {line-height: 33px; background: transparent; border: none; cursor: pointer;}
.logoWrap > .left > .btOpenCus > .bt {display: inline-block; color: #1e1e1e; vertical-align:middle;	font-size: 2em;
	font-weight: bold; text-decoration: none; -webkit-transform: rotate(90deg);	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg); transform: rotate(90deg);}
.logoWrap > .left > .btOpenCus > .txt {display: inline-block ;	padding-left: 5px ;	vertical-align: middle;}



/************ 공통 - 메뉴 부분 **********************/

#navWrap {position: relative ;}
.nav {overflow: hidden ;}
.nav > li {float: left; width: 25% ;}
.nav > li:last-child {width: 25%;}
.nav > li > a {	display: block ; padding: 22px 5px;	font-size: 1.2em; text-align: center; vertical-align: middle ; font-weight: bold;}
.nav.m1 > li.m1 > a, .nav.m2 > li.m2 > a, .nav.m3 > li.m3 > a, .nav.m4 > li.m4 > a {color: #eb4d54;}

.green .nav {margin-left: 20px;}
.green .nav > li {width: 20% ;}

/*********** 공통 - 수용가트리 **************/

/*수용가 트리 보이기 - 모바일 */


#bt_PC_cpenCustomer {height: 40px; width: 50px; background: url(/img/response/bg_form.png) no-repeat; background-position: 20px -957px;}
#bt_closeCustomer {position: relative; float: right; height: 54px; width: 50px; background: url(/img/response/bg_form.png) no-repeat; background-position: 20px -990px;}
.pc_pageBar {position: absolute ; display : none ; width: 190px; height: 45px; top: 70px; left: -70px;	
			-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); background: #034ea2; color: #fff; }
.pc_pageBar.green {background: #249858;}
.pc_pageBar span {font-size: 1.5em; line-height: 45px; padding-left: 15px;}
.mb_pageBar {position: relative ; background: #034ea2; height: 54px ; line-height: 54px; padding: 0 5%; color: #fff ;  font-size: 1.5em ; vertical-align:middle;}
.mb_pageBar.green {background: #249858;}



/******* 공용 - 버튼  ***********************/

button.btnBlue, button.btnRed{
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-family : inherit;
  font-size   : 1em;
  cursor      : pointer;
}

button.btnBlue::-moz-focus-inner, button.btnRed::-moz-focus-inner {
  padding : 0;
  border  : 0;
}


[class*="btn_"].blue {
    background: #0080ff;
    border: 1px solid #ff545b;
    color: #fff;
}

[class*="btn_"].red {
    background: #ff545b;
    border: 1px solid #ff545b;
    color: #fff;
}


[class*="btn_"].setup {
	background: #000;
    border: 1px solid #6b6564; 
}


[class*="btn_b"] {
/* 	margin-top: 20px; 
	display: inline-block;
	height: 50px;
	*/

	width: 100%;
	font-size: 20px;
	text-align: center;
	line-height: 100%;
	vertical-align: middle;
	padding: 14px 25px;
	min-width: 90px;
}


[class*="btn_m"] {
    padding: 10px 14px;
    min-width: 70px;
    font-size: 14px;
}

[class*="btn_s"] {
    padding: 5px 10px;
    min-width: 40px;
    font-size: 12px;
	height: 28px;
    margin: 8px 0;    
}


button.btnBlue > span{
	display: block;
    padding: 0 8px;
/*     border-radius: 4px; */
/*    	border: 1px solid rgb(0,129,178); */
	background: rgb(0,172,237);
    background-image: -moz-linear-gradient(rgb(0,189,255),rgb(0,155,213));
    background-image: -ms-linear-gradient(rgb(0,189,255),rgb(0,155,213));
    background-image: -o-linear-gradient(rgb(0,189,255),rgb(0,155,213));
    background-image: -webkit-linear-gradient(rgb(0,189,255),rgb(0,155,213));
    background-image: linear-gradient(rgb(0,189,255),rgb(0,155,213));
    color: white;
    text-shadow: 0 0 2px rgb(0,86,119);
    line-height: 28px;
}

button.btnRed > span{
	display: block;
    padding: 0 8px;
/*     border-radius: 4px; */
/* 	border: 1px solid rgb(162,56,16); */
	background: rgb(215,74,21);
    background-image: -moz-linear-gradient(rgb(232,77,23),rgb(194,65,19));
    background-image: -ms-linear-gradient(rgb(232,77,23),rgb(194,65,19));
    background-image: -o-linear-gradient(rgb(232,77,23),rgb(194,65,19));
    background-image: -webkit-linear-gradient(rgb(232,77,23),rgb(194,65,19));
    background-image: linear-gradient(rgb(232,77,23),rgb(194,65,19));
    color: white;
    text-shadow: 0 0 2px rgb(0,86,119);
    line-height: 28px;
}


/******* 공용 - 체크박스  ***********************/
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  height: 24px;  
  margin  : 0;
  padding : 0;
  opacity : 0;
  cursor: pointer;
}

input[type=checkbox]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('/img/response/bg_form.png') no-repeat 0 -110px; 
  line-height  : 24px;
  height: 28px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -146px;
}


input[type=checkbox]:not(old):disabled + label{
  background-position : 0 -80px;
  color: #ccc; 
}


input[type=radio]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('/img/response/bg_form.png') no-repeat 0 -194px; 
  line-height  : 24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -238px;
}




/* 
input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('/img/common/checks.png') no-repeat 0 0; 
  line-height  : 24px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}
 */


/******* 탭 버튼 UI Object *************/
.tab_list {position: relative; overflow: hidden;}
.tab_list ul {position:relative; margin:0; padding:0; border-bottom:1px solid #ccc; font-family:"나눔고딕",Nanum Gothic,"맑은고딕",Malgun Gothic,'돋움',dotum,AppleGothic,sans-serif;font-size:12px; list-style:none; *zoom:1}
.tab_list ul:after {content:""; display:block; clear:both;}
.tab_list li {float:left; margin-left:4px; margin-bottom:-1px;}
.tab_list li:first-child {margin-left:0px}
.tab_list li a.tmenu {padding:0; float:left; position:relative; border:1px solid #eee; border-bottom-color:#ccc; background:#F9F4F4; text-align:center; text-decoration:none ;color:#666;  }
.tab_list li a:hover.tmenu, 
.tab_list li a:active.tmenu,
.tab_list li a:focus.tmenu{background:#FFF ; color:#A6340C} 
.tab_list li a.tmenu span{display:inline-block; padding:6px 30px; letter-spacing:-1px; cursor:pointer}

.tab_list.m1 .m1 a.tmenu,
.tab_list.m2 .m2 a.tmenu,  
.tab_list.m3 .m3 a.tmenu,  
.tab_list.m4 .m4 a.tmenu,
.tab_list.m5 .m5 a.tmenu,   
.tab_list.m6 .m6 a.tmenu, 
.tab_list.m7 .m7 a.tmenu{margin-top:-1px;border:1px solid #ccc;border-bottom:1px solid #fff;background:#f9646a;color:#fff}
.tab_list.m1 .m1 a.tmenu span,
.tab_list.m2 .m2 a.tmenu span,
.tab_list.m3 .m3 a.tmenu span,
.tab_list.m4 .m4 a.tmenu span,
.tab_list.m5 .m5 a.tmenu span,
.tab_list.m6 .m6 a.tmenu span,
.tab_list.m7 .m7 a.tmenu span{padding-top:7px;font-weight:bold}

.rediv_list > div {display: none}
.rediv_list.m1 .m1,
.rediv_list.m2 .m2,
.rediv_list.m3 .m3,
.rediv_list.m4 .m4,
.rediv_list.m5 .m5,
.rediv_list.m6 .m6,
.rediv_list.m7 .m7{display:block}

/******* 실시간 데이터용 메세지 박스 *************/
.isRTWrap {background: #f6f2ef; height: 20px;  border-bottom:1px solid #efefef}
.isRTWrap > ul{margin: 0 auto; display: table;}
.isRTWrap > ul > li {float: left; }
.isRTWrap > ul > li:last-child {float: right; }
.isRTWrap > ul:after {content: "" ; clear: both ; display: block; }
.isRTWrap #isRTstate {margin:4px 0px; width: 10px; height: 10px; border-radius: 100%; background: #666; }
.isRTWrap #isRTstate.normal{background: #0099ff; }
.isRTWrap #isRTstate.error {background: #ff3333; }
.isRTWrap #isRTMsg, .isRTWrap #isRTTime{display: inline-block ;padding: 5px; font-size: .8em; vertical-align: top; }
/******* 공용 - 투명배경 *************/
#opacityBg{
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.5);
}

/******* 공용 - 탑버튼 *************/
.core_skip_top {position: fixed; right: 0; bottom: 0; z-index: 100000; margin-right: 2.6%; margin-bottom: 3.5%}
.core_skip_top a {display: block; overflow: hidden; width: 52px; height: 48px; text-indent: -10000em; background: url(/img/response/btn_top.png) no-repeat;}


/******* 공용 - 팝업레이어 *************/
.popup_layer {/*position: absolute;*/ position: fixed; display: none; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999; }
.popup_layer.open{display: block;}
.popup_inner {display: table-cell; vertical-align: middle;}

.popup_layer .popup_wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left:0; padding-bottom: 35px; background: #fff;  box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.1);}     
.popup_layer .popup_wrap .pop_tit {position: absolute; left: 0; top: 0; width: 100%; z-index: 2;height: 50px; line-height: 50px; background: #ff545c; text-indent: 10px; color:#fff; font-size:1.3em}
.popup_layer .popup_wrap .pop_cont {padding: 70px 20px 20px 20px;}
.popup_layer .popup_wrap .pop_cont .pop_desc{height:100px;}
.popup_layer .popup_wrap .pop_cont .pop_desc:after{content:""; clear:both; display:block;}
.popup_layer .popup_wrap .pop_cont .description{line-height:20px}
.popup_layer .popup_wrap .pop_cont .rectformat{margin-top:10px; padding: 2px; height:22px; background:#d4effc;letter-spacing: -1px; font-size: 12px; color:#003471; text-align: center; line-height: 22px;}
.popup_layer .popup_wrap .pop_btn {position: relative; padding: 20px 0 0; text-align:center; }
.popup_wrap .btn_popclose { display: block; overflow: hidden; position: absolute; right: 0; top: 0; height: 50px; width: 50px; z-index: 3;	background: url(/img/response/btn_etc.png) no-repeat 50% 15px; text-indent: -999px; background-size: 20px 120px;}
.popup_wrap .pop_scroll{/*padding: 20px; */height: 320px; background: #f9f9f9; overflow-y: scroll; line-height: 170%; color: #888; border: 1px solid #eaeaea;}
.popup_wrap .pointbox{padding: 20px 20px 10px; border: 1px solid #eaeaea; margin-bottom: 25px;background: #f9f9f9;}

/******* 공용 - 아이디 체크  *******/
/* 로그인 폼 */
.login .input_style {display: block; position:relative;}
.login .input_style input{	border: 0; margin: 0;	border-radius: 0; height: 40px; padding-left: 30px; border: 0; font-size: 14px; background: #fff url('/img/response/ico_member.png') no-repeat 0 12px; background-size: 36px 449px;}
.login > div {border: 1px solid #ccc;}
.login .input_style:nth-of-type(2) input {margin-top: 1px; border-top: 1px solid #eaeaea; background-position: 0 -40px;}
.login .btnLogin{margin-top: 20px; display: inline-block; width: 100%; height: 50px;	font-size: 20px; text-align: center; line-height: 100%;	vertical-align: middle;	padding: 13px 25px;	min-width: 90px; background: #ff545b; border: 1px solid #ff545b; color: #fff;	}



/******* 공용 - 팝업 *************/
/* .layer     {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}

.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto;  background-color:#fff; border: 5px solid #3571B5; z-index: 10;}	
.pop-layer .pop-container {padding: 20px 20px;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; margin-top:10px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}

button.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}	
button.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}
 */



/******* 공용 - 메세지 박스 *************/
#alertBox, #progressBox{
 	display:none;  position:fixed; top:0; left:0; background:black; width:100%; height:100%; z-index:999999;
}

#alertBox.alartShow{
   display:inline-block; font-size:1.6em; line-height: 2em;	
}

#alertBox .txt{
	margin-top:-10px; left:10px;right:10px;line-height:20px;font-size:.7em;
}



/* 공용 트리박스 > 경고 색상 : 계산기준(목표전력 < 예측전력  ), 계싼기준(가준전력  < 현재전력) */
.dtree a.alarmPoint0 {color:#333;	cursor: pointer;}
.dtree a.alarmPoint0 span{display:none}
 
.dtree a.alarmPoint1 {color: #C19320 ; 	cursor: pointer}
.dtree a.alarmPoint1 span{display: inline-block; width: 17px; height: 12px; background: url(/img/style2/icon_alarm1.png) no-repeat 5px 0px; }
.icon_alarm1 {display: inline-block; width:17px; background: url(/img/style2/icon_alarm1.png) no-repeat 5px 3px;}

.dtree a.alarmPoint2 {color: #E13F3F ; 	cursor: pointer;}  
.dtree a.alarmPoint2 span{display:inline-block; width: 17px; height: 12px; background: url(/img/style2/icon_alarm2.png) no-repeat 5px 0px;}
.icon_alarm2 {display: inline-block; width:17px; background: url(/img/style2/icon_alarm2.png) no-repeat 5px 3px;}

.dtree a.alarmPoint3 {color: #BD1F1F ; 	cursor:  pointer;}
.dtree a.alarmPoint3 span{display: inline-block; width: 17px; height: 12px; background: url(/img/style2/icon_alarm3.png) no-repeat 5px 0px; }
.icon_alarm3 {display: inline-block; width: 17px; background:url(/img/style2/icon_alarm3.png) no-repeat 5px 3px;}


/* 선택된 수용가 이름  */
#selConsumerNmae{display:inline-block; margin-left:-5px; padding: 25px 10px 20px; font-size:2em; line-height:100%; color:#2B3959}

/* swiper - 탭메뉴*/
.swiper-container { margin-left: auto;margin-right: auto;position: relative;overflow: hidden; /* Fix of Webkit flickering */z-index: 1;}
.swiper-wrapper { position: relative;width: 100%;/*height: 100%;*/z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex;-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.swiper-slide,.swiper-wrapper {-webkit-transform: translate3d(0px, 0, 0);-moz-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px);-ms-transform: translate3d(0px, 0, 0);transform: translate3d(0px, 0, 0);}
.swiper-slide {-webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;position: relative;   /* Center slide text vertically */}
.swipeNext {display: block; position: absolute; z-index: 2; right: -1px; top: -1px; width: 32px; height: 26px; 
							background: #fff url(/img/response/btn_tab.png) no-repeat 50% 50%;text-indent: -99999px;  overflow: hidden; background-size: 36px 38px;}



 /******* 공용 - 테이블    ***********************/
.board_list {position:relative;font-family:"나눔고딕",Nanum Gothic,"맑은고딕",Malgun Gothic,'돋움',dotum,AppleGothic,sans-serif;}
.board_list table {width: 100%; font-size:12px; border-top:1px solid #9E968F; border-left:1px solid #8E968F}
.board_list tr.oddevenbg:nth-child(odd){background:#F5E6E2}
.board_list tr.oddevenbg:nth-child(even){background:#F3E1DC}
.board_list th {vertical-align:middle; padding:5px 0px; height:20px; text-align:center;  background:#ECE5E5; border-right:1px solid #9E968F; border-bottom:1px solid #9E968F;}
.board_list th.pointbg{background:#dcd5d5}
.board_list th.transparent{background-color:transparent;}
.board_list td {vertical-align:middle; padding:5px 0px; height:20px; text-align:center;  background:#fff; border-right:1px solid #9E968F; border-bottom:1px solid #9E968F;}

.board_list table.chart    {margin-top: 5px; letter-spacing: 0px; border-right: 1px solid #9E968F; border-bottom:1px solid #9E968F}
.board_list table.chart th:last-child {border-right:none;}
.board_list table.chart td {padding:0px 0px; height:20px; text-align:center;  background:#fff; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.board_list table.chart td:last-child {border-right:none;}

.board_list table{border-collapse: separate;}

.board_list .gname {padding:0px 5px; text-align:left; background:#9e968f; color:#ffffff; }
.board_list .gother {background:#dcd5d5;font-weight:bold ;}
.board_list .gother span.left {display:inline-block; padding:0px 5px; float:left; color: #443E44}
.board_list .gother span.right {display:inline-block; margin-left: 12px; color: #443E44}
.board_list .gtime {padding:0px 15px; text-align:left}
.board_list .IS_CONNECT    {background:url(/img/style2/icon_connection_green2.png) no-repeat 0px 1px;}
.board_list .IS_DISCONNECT {background:url(/img/style2/icon_connection_red2.png) no-repeat 0px 1px;}


.board_list form {position: relative; display: inline-block; width:100%}
.board_list label.head {height: 30px; margin: 8px 0; font-size: 1.2em; font-weight: bold; padding-right: 10px;}
.board_list li.in1_area > div {width:100%; float:none; }
.board_list li.bt1_area {text-align: center;}
.board_list li.bt1_area > button{ margin: 8px 0; min-width:150px; max-width:50%; text-align:center; }
.board_list li.in2_area > div {width:100%; float:none; }
.board_list li.in2_area .in_style.left{display: inline-block; float:left; width:calc(50% - 7.5px)}
.board_list li.in2_area .in_style.right{display: inline-block; float:left; width:calc(50% - 7.5px)}
.board_list li.in2_area .mark{display: inline-block; float:left; margin:15px 0; width:15px; }
.board_list li.bt5_area {width:100%; text-align:center;}
.board_list li.bt5_area > .w70_desk, 
.board_list li.bt5_area > .w30_desk {display:inline-block; width:100%;}
.board_list li.bt5_area > .w70_desk > button.btnRed{ margin: 8px 0; height: 30px; width:23%; min-width:40px; max-width:100px;}
.board_list li.bt5_area > .w30_desk > button.btnBlue{ margin: 8px 0; height: 30px; width: 90%; min-width: 90px; max-width: 200px}

.select_style{
	background: url(/img/response/bg_form.png) no-repeat;
    background-position: right -1076px;
    display: inline-block;
    float: left;
    width: 100%;
}

.print{
	display: none ; 
}
 
 /******* 공용 - 페이지링크    ***********************/
.paginate_regular{padding:15px 0;text-align:center;line-height:normal; letter-spacing:0px }

.paginate_regular a, .paginate_regular strong {
	display: inline-block;
    color: #888888;
    min-width: 28px;
    padding: 0 5px;
    height: 28px;
    line-height: 26px;
    border: #eaeaea 1px solid;
    font-size: 12px;
    box-sizing: border-box;
    letter-spacing: -1px;
} 
 
.paginate_regular a:hover,
.paginate_regular a:active,
.paginate_regular a:focus{
	background-color:#f8f8f8
}
.paginate_regular strong{
	color:#f60 ;border: #888888 1px solid;
} 
.paginate_regular .direction{
	background: url(/img/response/btn_board.png) no-repeat -1px -1px;
    text-indent: -9999999px;	
}
.paginate_regular .direction span{/* font-weight:bold;font-size:14px */}
.paginate_regular .direction:hover,
.paginate_regular .direction:active,
.paginate_regular .direction:focus{
	background-color:#fff;color:#333
}
.paginate_regular .direction:first-child{
	background-size: 55px 300px;
    background-position: -29px -65px;	
}
.paginate_regular .direction:last-child{
	background-size: 55px 300px;
    background-position: -1px -98px;
}

.table_scroll{
	width: 100%; 
	overflow-x: auto; 
}

.table_main{
	min-width: 600px;	 
}
.table_main.table_max{
	min-width: 1000px; 
}

/* 해상도에 따른 화면 레이아웃  */
@media only screen and (min-width:486px){
	.nav > li > a{
		font-size: 1.4em
	}
}


@media only screen and (min-width:768px){

	.retab_list                {/*height:160px;*/}
	.retab_list ul           {position:relative; margin:0; padding:0; border-bottom:1px solid #ccc; font-family:"나눔고딕",Nanum Gothic,"맑은고딕",Malgun Gothic,'돋움',dotum,AppleGothic,sans-serif;font-size:12px; list-style:none; *zoom:1}
	.retab_list ul:after     {content:""; display:block; clear:both;}
	.retab_list li             {float:left; margin-left:4px; margin-bottom:-1px;}
	.retab_list li:first-child {margin-left:0px}
	.retab_list li a.tmenu     {padding:0; float:left; position:relative; border:1px solid #eee; border-bottom-color:#ccc; background:#F9F4F4; text-align:center; text-decoration:none ;color:#666;  }
	.retab_list li a:hover.tmenu, 
	.retab_list li a:active.tmenu,
	.retab_list li a:focus.tmenu{background:#FFF ; color:#A6340C} 
	.retab_list li a.tmenu span{display:inline-block; padding:6px 30px; letter-spacing:-1px; cursor:pointer}
	
	.retab_list.m1 .m1 a.tmenu,
	.retab_list.m2 .m2 a.tmenu,  
	.retab_list.m3 .m3 a.tmenu,  
	.retab_list.m4 .m4 a.tmenu,
	.retab_list.m5 .m5 a.tmenu,   
	.retab_list.m6 .m6 a.tmenu, 
	.retab_list.m7 .m7 a.tmenu{margin-top:-1px;border:1px solid #ccc;border-bottom:1px solid #fff;background:#A6340C;color:#fff}
	.retab_list.m1 .m1 a.tmenu span,
	.retab_list.m2 .m2 a.tmenu span,
	.retab_list.m3 .m3 a.tmenu span,
	.retab_list.m4 .m4 a.tmenu span,
	.retab_list.m5 .m5 a.tmenu span,
	.retab_list.m6 .m6 a.tmenu span,
	.retab_list.m7 .m7 a.tmenu span{padding-top:7px;font-weight:bold}
	
	.popup_layer {position: fixed; table-layout: fixed; width:100%; height:100%; /* background: rgba(0, 0, 0, 0.5); z-index: 99999; top: 0; right: 0; */}
	.popup_layer.close{display:none; }
	.popup_layer.open{display: table; }	
	.popup_layer .popup_wrap {position: relative; /*top: 50%; */ left: 50%; width: 624px; height: auto; padding-bottom: 35px; margin-left: -312px; background: #fff;  box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.1);}
	.popup_layer .popup_wrap .pop_cont .rectformat{letter-spacing:0px; }
	
	.board_list .per10 {width:10%}
	.board_list .per12 {width:12%}
	.board_list .per20 {width:20%}
	.board_list .per30 {width:30%}
	.board_list .per40 {width:40%}
	.board_list .per50 {width:50%}
	.board_list .per60 {width:60%}
	
	.board_list form ul li {float:left}
	.board_list li.in1_area{width:25%; max-width:300px;}
	.board_list li.in1_area > input {width:98%; max-width:280px }
	.board_list li.bt1_area{width:15%; max-width:200px; text-align: left;}
	
	.board_list li.la_area{width:8%; min-width:65px; max-width:90px} 			
	.board_list li.in2_area{width:35%; max-width:400px; }
	.board_list li.bt5_area{width:56%; min-width: 327px; max-width:640px;}
	.board_list li.bt5_area > .w70_desk{width:70%; float:left; max-width:500px}
	.board_list li.bt5_area > .w30_desk{width:30%; float:left; max-width:200px}
	.table_scroll{overflow-x: none;}
}

@media only screen and (min-width:1025px){
	#bodyWrap {position: relative; margin: 10px ; /*margin: 10px .7% 10px;*/ overflow: hidden;	}
	
	#leftWrap {/* position: relative;  */position: absolute; background: #fff; display: block; width: 200px; /* float: left;  */}
	#leftWrap.open {width: 200px;display: block;} 
	#leftWrap.close {width: 0; display: none;}/* resize으로 인해 width=0 으로 지정*/
	
	.left_outer	{min-width: 200px;} 
	.left_inner {  /* width: 100%; height: auto;  min-width: 198px;  */ overflow: auto;}
	#rightWrap {position: relative; display: inline-block; margin: 0 10px; left: 200px; width: calc(100% - 210px);}
	#treelayout{overflow: auto;}
	.logoWrap > .left{display: none ;}
	
	.logoWrap .center{left: 2.6% ; text-align: left; width: 110px;}
	.nav {display: block; position: absolute; top: -68px; left: 150px; right: 150px; padding-top: 10px;}
    .green .nav{right: 100px;} 
    .pc_pageBar {display : block;}	
	.print{display: inline-block ;}
	
	#footerWrap ul {overflow: hidden; padding: 5px 15px;}
	#footerWrap li {float: left; border-left: 1px solid #6b6564; display: inline-block; padding-left: 10px; margin-left: 10px;}
	#footerWrap li:first-child, #footerWrap li:last-child {border-left: none;}
	#footerWrap li:last-child {float: right; }
	
	.swipeNext {display: none;}
}

@media only screen and (min-width:1441px){
	.nav > li {width:25%;}
	.contextsAreaWrap {padding: 0 4% 2.6%;}
}