@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : ui_style.css
	Company : The Webstyle co.,ltd
 	Author : Ho Sung, Lee 2018-08
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* A */
a {color:#000; text-decoration:none;}
a:active, visited, link {color:#000;}

a.link-view {display:inline-block; overflow:hidden; max-width:95%; text-overflow:ellipsis; white-space:nowrap;}
a.link-view:hover {color:#ff8400; text-decoration:underline;}

a.link-download {display:inline-block; color:#666;}
a.link-download:hover {color:#ff8400; text-decoration:underline;}
a.link-download.far:before {margin-right:2px; font-size:14px; color:#666 !important;}

a.link-delFile {display:inline-block; color:#666;}
a.link-delFile:hover {color:#ff8400; text-decoration:underline;}
a.link-delFile.far:before {margin-right:2px; font-size:14px; color:#666 !important;}
a.link-delFile:after {
	content:"\f057";
	display:inline-block;
	font-family:"Font Awesome 5 Free";
	font-size:12px;
	line-height:1;
	color:#294d84;
	font-weight:900;	
}

/* Select */
select {
	height:30px;
	padding:4px 45px 4px 10px;
	border:1px solid #cfcfcf;
	font-family:"NotoSans-Light";
	font-size:13px;
	color:#606060;
	background:url('/images/common/ico_selectArrow.png') right center no-repeat;
	background-color:#fff;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
}
select::-ms-expand {display:none;}

/* UI Select */
.ui-select {display:inline-block; position:relative; vertical-align:middle;}
.ui-select .ui-select-val {
	position:relative;
	z-index:2;
	height:30px;
	border:1px solid #cfcfcf;
	color:#606060;
	background:url('/images/common/ico_selectArrow.png') right center no-repeat;
	background-color:#fff;
}
.ui-select .ui-select-val button {
	width:100%;
	padding:4px 40px 4px 10px;
	font-family:"NotoSans-Light";
	font-size:13px;
	line-height:20px;
	color:#606060;
	text-align:left;
}
.ui-select .ui-select-flyout {display:none; position:absolute; top:29px; left:0px; width:100%; border:1px solid #cfcfcf; background-color:#fff;}
.ui-select.on .ui-select-flyout {display:block;}
.ui-select .ui-select-flyout .ui-select-menu li a {display:block; padding:4px 10px; font-family:"NotoSans-Light"; font-size:13px; line-height:30px;}
.ui-select .ui-select-flyout .ui-select-menu li a:hover {color:#fff; background-color:#1e90ff;}

/* Input */
input[type=text], input[type=password] {
	height:30px;
	padding:5px 10px;
	border:1px solid #cfcfcf;
	font-family:"NotoSans-Light";
	font-size:13px;
	color:#606060;
	background-color:#fff;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
}

::-webkit-input-placeholder {font:400 13px / 16px 'NotoSans-Light'; color:#999;}/* Chrome/Opera/Safari */
:-ms-input-placeholder {font:400 13px / 16px 'NotoSans-Light'; color:#999;}/* IE 10+ */
:-moz-placeholder {font:400 13px / 16px 'NotoSans-Light'; color:#999;}/* Firefox 18- */
::-moz-placeholder {font:400 13px / 16px 'NotoSans-Light'; color:#999;}/* Firefox 19+ */


.ui-input {display:inline-block; vertical-align:middle;}

/* UI Input Date */
.ui-input-date {display:inline-block; position:relative; padding-right:29px;}
.ui-input-date .input_date {width:100%; min-width:50px;}
.ui-input-date .btn_datepicker {
	position:absolute;
	top:0px;
	right:0px;
	width:30px;
	height:30px;
	border:1px solid #cfcfcf;
	background:url('/images/common/ico_datepicker.png') center center no-repeat;
}

.ui-input-time {float:left; margin-left:10px}

/* UI Input File */
.ui-input-file {display:inline-block; position:relative; padding-right:85px;}
.ui-input-file:after {
	content:"첨부파일"; 
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px; 
	min-width:72px; 
	height:30px; 
	border:1px solid #909090;
	padding:0 15px; 
	border-radius:5px; 
	font-size:13px; 
	line-height:28px;
	color:#606060;
	background-color:#fff;
}
.ui-input-file input[type=file] {position:absolute; top:0px; left:0px; z-index:1; width:100%; height:100%; opacity:0;}
.ui-input-file .input_filePath {width:100%;}


/* UI Input Radio */
.ui-radio {display:inline-block; position:relative; vertical-align:middle;}
.ui-radio input[type=radio] {position:absolute; left:0px; top:0px; opacity:0;}
.ui-radio span {display:inline-block; vertical-align:middle; font-size:13px;}
.ui-radio span:before {
	content:"";
	display:inline-block;
	overflow:hidden;
	width:14px;
	height:14px;
	margin-right:5px;
	border:1px solid #cfcfcf;
	border-radius:50%;
	text-align:center;
	vertical-align:bottom;
	background-color:#fff;
}
.ui-radio input[type=radio]:checked + span:before {
	content:"\f111";
	font-family:"Font Awesome 5 Free";
	font-size:10px;
	line-height:12px;
	color:#294d84;
	font-weight:900;
	border:1px solid #294d84;
}

/* UI Input Checkbox */
.ui-checkbox {display:inline-block; position:relative; vertical-align:middle;}
.ui-checkbox input[type=checkbox] {position:absolute; left:0px; top:0px; opacity:0;}
.ui-checkbox span {display:inline-block; vertical-align:middle; font-size:13px;}
.ui-checkbox span:before {
	content:"";
	display:inline-block;
	overflow:hidden;
	width:14px;
	height:14px;
	margin-right:5px;
	border:1px solid #cfcfcf;
	text-align:center;
	vertical-align:bottom;
	background-color:#fff;
}
.ui-checkbox input[type=checkbox]:checked + span:before {
	content:"\f00c";
	font-family:"Font Awesome 5 Free";
	font-size:8px;
	line-height:12px;
	color:#294d84;
	font-weight:900;
	border:1px solid #294d84;
}
.ui-checkbox.ui-checkbox-only span:before {margin-right:0px;}

.ui-group .ui-radio,
.ui-group .ui-checkbox {margin-right:10px;}

textarea {
	padding:10px;
	border:1px solid #cfcfcf;
	font-family:"NotoSans-Light";
	font-size:13px;
	color:#606060;
	background-color:#fff;
}

/* Button */
.btn {display:inline-block; border:1px solid transparent; color:#606060; text-align:center; vertical-align:middle; cursor:pointer;}
.btn > span {display:inline-block; position:relative;}
.btn > span.ico-only {font-size:0px;}
.btn > span.ico-only:before {font-size:14px;}
.btn > span.ico:before {margin-right:5px;}

.btn-sm {min-width:32px; height:26px; padding:0 8px; border-radius:3px; font-size:13px; line-height:24px;}
.btn-md {min-width:72px; height:30px; padding:0 15px; border-radius:5px; font-size:13px; line-height:28px;}
.btn-lg {min-width:92px; height:40px; padding:0 15px; border-radius:6px; font-size:16px; line-height:38px;}

.btn-primary {border-color:#7190b4; background:linear-gradient(180deg, #7190b4 50%, #6c8bae 50%); color:#fff;}
.btn-secondary {border:0; background:linear-gradient(180deg, #a7b0be 50%, #a1aab8 50%); color:#fff;}
.btn-third {border-color:#909090; color:#606060; background-color:#fff;}/* 리스트, 쓰기 화면에서 쓰이는 기능버튼 유형 */
.btn-third:hover {border-color:#6c8bae; color:#fff; background-color:#6c8bae;}

.btn-wrap {display:block; position:relative;}
.btn-group {display:inline-block; position:relative;}
.btn-wrap .btn,
.btn-group .btn {margin-right:3px;}

/* Icon */
.fa:before {font-family:"Font Awesome 5 Free"; font-weight:900;}

/* UI Group */
.ui-group {display:inline-block; position:relative; vertical-align:middle;}
.ui-group:after {content:""; display:block; clear:both;}
.ui-group span.ui-input {float:left; height:30px; vertical-align:middle;}
.ui-group span.dash {float:left; display:inline-block; width:20px; line-height:30px; text-align:center; vertical-align:middle;}

.ui-group.two-up .ui-input {width:calc(50% - 10px);}
.ui-group.two-up .ui-input input,
.ui-group.two-up .ui-input select {width:100%;}
.ui-group.three-up .ui-input {width:calc(33% - 13px);}
.ui-group.three-up .ui-input input,
.ui-group.three-up .ui-input select {width:100%;}

/* Tab Menu */
.tab-menu-wrap {position:relative; border-bottom:2px solid #294d84; margin-bottom:30px;}
.tab-menu-wrap .tab-menu {position:relative; padding-left:1px;}
.tab-menu-wrap .tab-menu:after {content:""; display:block; clear:both;}
.tab-menu-wrap .tab-menu li {float:left; position:relative; z-index:1; margin-left:-1px;}
.tab-menu-wrap .tab-menu li a {
	display:block;
	height:31px;
	padding:0 15px;
	border:1px solid #ddd;
	border-bottom:0px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	font-family:"NotoSans-Regular";
	font-size:14px;
	line-height:30px;
	color:#606060;
	background-color:#fff;
}
.tab-menu-wrap .tab-menu li.on,
.tab-menu-wrap .tab-menu li:hover {z-index:2;}
.tab-menu-wrap .tab-menu li.on a,
.tab-menu-wrap .tab-menu li:hover a {border:1px solid #6c8bae; border-bottom:0px; color:#fff; background-color:#6c8bae;}

/* Datepicker */
.ui-datepicker {display:none; width:260px; border:1px solid #d2d2d2; border-top:2px solid #647cbd; background-color:#fff;}
.ui-datepicker .ui-datepicker-header {position:relative; padding:20px 0 5px;}
.ui-datepicker .ui-datepicker-header a {
	display:inline-block;
	position:absolute;
	top:20px;
	font-family:'Font Awesome 5 Free';
	font-size:14px;
	font-weight:900;
	text-align:center;
	cursor:pointer;
}
.ui-datepicker .ui-datepicker-header a span {font-size:0;}
.ui-datepicker .ui-datepicker-prev {left:30px;}
.ui-datepicker .ui-datepicker-next {right:30px;}
.ui-datepicker .ui-datepicker-prev:after {content:"\f053"; line-height:25px;}
.ui-datepicker .ui-datepicker-next:after {content:"\f054"; line-height:25px;}
.ui-datepicker .ui-datepicker-title {text-align:center;}
.ui-datepicker .ui-datepicker-title span {font-size:12px; color:#333333;}
.ui-datepicker .ui-datepicker-title select {width:auto; height:25px; padding-right:40px; font-size:12px; margin:0px 1px;}
.ui-datepicker table {width:100%; font-size:11px; border-collapse:collapse;}
.ui-datepicker th {height:25px; font-size:12px; text-align:center; border-left:1px solid #d2d2d2; border-top:1px solid #d2d2d2;}
.ui-datepicker th:first-child {border-left:0px;}
.ui-datepicker th span {font-weight:normal;}
.ui-datepicker th:first-child span {color:#f20018;}
.ui-datepicker td {height:25px; border-left:1px solid #d2d2d2; border-top:1px solid #d2d2d2;}
.ui-datepicker tr td:first-child {border-left:0px;}
.ui-datepicker td.ui-datepicker-today {font-weight:bold; background-color:#ddd;}
.ui-datepicker td a.ui-state-highlight {color:#333;}
.ui-datepicker td span,
.ui-datepicker td a {display:block; padding:0px 11px; line-height:25px; text-align:right; text-decoration:none;}
.ui-datepicker td:first-child a {color:#f20018;}
.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a.ui-state-active {color:#fff; background-color:#647cbd;}
.ui-datepicker .ui-datepicker-buttonpane {text-align:center; position:absolute; right:10px; top:5px;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {display:none;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {display:inline-block; font-size:0;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:after {
	content:"\f00d";
	font-family:'Font Awesome 5 Free';
	font-size:14px;
	font-weight:900;
	text-align:center;
}

/* div Table */
.dtTable {display:table; table-layout:fixed; width:100%;}
.dtTr {display:table-row;}
.dtTh,
.dtTd {display:table-cell; vertical-align:middle;}

/* Loading */
.loading {position:fixed; top:0; left:0; z-index:9999; overflow:hidden; width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,0.6);}
.loading span {position:relative; left:50%; top:50%; margin:-12px 0 0 -12px; font-size:24px; color:#666; text-align:center;}


/* wsbox Core Style */
#wsbox, #wboxOverlay, #wboxWrapper {position:absolute; top:0; left:0; z-index:9999; /*overflow:hidden;*/ -webkit-transform: translate3d(0,0,0);}
#wsbox {outline:0;}
#wboxWrapper {max-width:none;}
#wboxOverlay {position:fixed; width:100%; height:100%; background:#000; opacity:0.7; filter:alpha(opacity = 70);}
#wboxContent {position:relative; background:#000;}
#wboxLoadedContent {overflow:auto; -webkit-overflow-scrolling:touch; background:#fff;}
#wboxLoadingOverlay {position:absolute; top:0; left:0; width:100%; height:100%;}
#wboxLoadingGraphic {position:relative; left:50%; top:50%; margin:-12px 0 0 -12px; font-size:24px; color:#666; text-align:center;}
#wboxError {padding:50px; border:1px solid #ccc;}
#wboxClose {
	position:absolute;
	top:-15px;
	right:-15px;
	z-index:2;
	width:30px;
	height:30px;
	margin:0;
	padding:0;
	border:0;
	border-radius:15px;
	overflow:visible;
	font-size:0px;
	/*text-indent:-9999px;*/
	cursor:pointer;
	background-color:#000;
	/*background:url('/images/common/btn_lp_close.png') no-repeat top center;*/
}
#wboxClose:before {
	content:"\f00d";
	font-family:'Font Awesome 5 Free';
	font-size:20px;	
	font-weight:900;
	color:#fff;
	text-align:center;	
}