@charset "utf-8";
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------
	File   : UI_Style.css
 	Author : Woo Seok, Shin 2014-11
	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
    CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position(top, right, bottom, left, z-index), float/clear, overflow, width/height, margin/padding(top, right, bottom, left),
	                    border(top, right, bottom, left), background(image,position,repeat,color), border-radius, box-shadow,
                        font(font-weight, font-style, font-variant, font-size/line-height, font-family), opacity, cursor, box-sizing, etc
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Layer Select */
.selectBox {display:inline-block; position:relative; min-width:60px; height:32px; text-align:left; cursor:pointer;}
.selectBox a {display:block; padding:0px 10px; font-family:"NotoSansLight"; font-size:12px; line-height:20px; color:#666;}
.selectBox .selectVal {
	height:32px;
	padding:6px 26px 6px 11px;
	border:1px solid #222;
	background:url('/Images/Common/ico_selectBox_arrow.gif') right center no-repeat;
}
.selectBox .selectVal a {vertical-align:middle;}
.selectBox .selectVal a:focus {color:#fff; background-color:#3399FF;}
.selectBox .selectMenu {
	display:none;
	position:absolute;
	left:0;
	z-index:100;
	width:100%;
	padding:12px 11px 0px 11px;
	border:1px solid #222;
	background-color:#fff;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
}
.selectBox.up .selectMenu {bottom:32px; border-bottom:0px;}
.selectBox.down .selectMenu {top:34px; border-top:0px;}
.selectBox.on .selectMenu {display:inline-block; *display:inline; *zoom:1;}
.selectBox .selectMenu li a {background-color:#fff;}
.selectBox .selectMenu li:hover a {background-color:#ebebeb;}
.selectBox .selectMenu li a:focus {background-color:#ebebeb;}


/* Select */
select {
	width:158px;
	width:160px\9;
	height:33px;
	padding:0 0 0 10px;
	padding:6px 9px 6px 15px\9;
	border:1px solid #cdcdcd;
	font-size:14px;
	color:#999999;
	line-height:14px;
	line-height:30px\0/ie8+9;
	background:url('/Images/Common/ico_select_arrow.gif') 139px center no-repeat;
	background:url('/Images/Common/ico_select_arrow.gif') 141px center no-repeat\0/ie8+9;
	/*background:none;*/
	background-color:fff;
	background-color:fff\0/ie8+9;
	background:none\9;
	appearance:none;
	-ms-appearance:none;
	-webkit-appearance:none;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
}

:root select {padding:6px 9px 6px 15px \0/IE9; font-size:15px \0/IE9;}
select:focus {border:1px solid #0079c1;}

select::-ms-expand {display:none;}


/* Input */
input {
	border:0px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
}
input[type=text], input[type=password] {
	height:33px;
	padding:0 10px;
	border:1px solid #cccccc;
	font-size:14px;
	color:#99999;
	line-height:30px;
	background-color:#ffffff;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
}
input[type=text]:focus, input[type=password]:focus {border:1px solid #0079c1;}

/* Placeholder */
:-ms-input-placeholder {color:#99999;} /* IE 10 + */
::-webkit-input-placeholder {color:#99999;} /* Webkit Browser */
:-moz-placeholder {color:#99999;}	/* Mozilla Firefox 4 to 18*/
::-moz-placeholder {color:#99999;} /* Mozilla Firefox 19+ */

.input_wrap {display:inline-block; *display:inline; *zoom:1; position:relative; z-index:1;}
.input_wrap.placeholder input {background-color:transparent\9;}
.input_wrap.placeholder input:focus {background-color:#ffffff\9;}
.input_wrap.placeholder input[value^=''] {background-color:#ffffff\9;}
.input_wrap.placeholder label {
	display:none;
	display:block\9;
	position:absolute;
	left:0px;
	top:1px;
	z-index:-1;
	width:100%;
	height:33px;
	padding:2px 11px;
	/*padding:8px 5px 16px 17px;*/
	font-family:"NotoSansLight";
	font-size:14px;
	line-height:29px;
	color:#999999;
	text-align:left;
}


/* Button */
.btn {position:relative; display:inline-block; cursor:pointer; text-align:center;}
.btn > span{position:relative; display:block; height:100%; line-height:33px;}
.btn.sml {width:76px; height:33px; font-size:14px; font-family:"NotoSansLight"; text-align:center;}
.btn.mid {padding-right:20px; width:100px; height:35px; font-size:14px; line-height:14px;  font-family:"NotoSansLight"; text-align:center;}
.btn.org {background-color:#f58220; color:#ffffff;}
.ico.ico_list {background:url('/Images/Common/ico_board_list.gif') right center no-repeat;}
.btn.ico_right .ico{display:inline-block; position:absolute; top:9px; right:2px; z-index:2; width:32px; height:14px;}


/* TAB */
.tab_wrap {border-bottom:1px solid #cccccc; text-align:center;}
.tab_wrap ul.tab {display:inline-block; padding:20px 0;}
.tab_wrap ul.tab li {float:left; padding:0 30px; background:url('/Images/Common/bg_tab_bar.gif') right center no-repeat;}
.tab_wrap ul.tab li:last-child {background:none;}
.tab_wrap ul.tab li.on a {color:#f58220;}
.tab_wrap ul.tab li.on a span {padding-top:16px; border-top:3px solid #f58220;}


/* Board Pager */
.board_pager_wrap {margin-top: 99px; text-align:center;}
.board_pager_wrap .board_pager {display: inline-block;}
.board_pager .boardNav {display: inline-block; float: left;}
.board_pager .boardPage {float: left; overflow: hidden; margin: 0 8px; border-right: 1px solid #e5e5e5;}
.boardNav li{float: left;}
.boardNav li a {
	display: block;
	width:40px;
	height: 41px;
	text-indent: -9999px;
	background-image: url('/Images/Common/btn_pager.gif');
	background-repeat: no-repeat;
}
.boardNav li a.btn_first {background-position: 0 0;}
.boardNav li a.btn_prev {width:40px; background-position:-43px 0;}
.boardNav li a.btn_next {width:40px; background-position:-79px 0;}
.boardNav li a.btn_last {background-position: -120px 0;}
.boardPage li {float: left;}
.boardPage li a {
	display: block;
	width:38px;
	height: 39px;
	font-size: 16px;
	color:#999999;
	font-family: "NotoSansLight";
	line-height: 39px;
	border: 1px solid #e5e5e5;
	border-right: 0;
}
.boardPage li.on {}
.boardPage li.on a, .boardPage li:hover a {color:#f58220; border:1px solid #f58220; font-weight:bold;}
.boardPage li a {display: block; width:40px; height:41px; }


#colorbox {z-index:1000;}
#cboxOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75);z-index: 100;}
#cboxClose {}
#cboxClose {
  position: absolute;
  display: inline-block;
  top:15px;right:15px;
  width: 50px;
  height: 50px;
  overflow: hidden;background:none;text-indent:-9999em;
}
#cboxClose:hover::before, #cboxClose:hover::after {
  background: #1ebcc5;
}
#cboxClose::before, #cboxClose::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #000;
}
#cboxClose::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cboxClose::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.event-popup { display:none; position:absolute; top:0; left:0; }
.event-popup.size500 { width:500px; }
.event-popup .btn-close { position:absolute; top:0; right:0; width:40px; height:40px; text-indent:-9999em; background-color:transparent; }
.event-popup .btn-close:before { content:''; position:absolute; top:50%; left:50%; width:1px; height:25px; margin:-12px 0 0 0; background-color:#fff; transform:rotate(45deg); }
.event-popup .btn-close:after { content:''; position:absolute; top:50%; left:50%; width:1px; height:25px; margin:-12px 0 0 0; background-color:#fff; transform:rotate(-45deg); }