@charset "utf-8";



/* 팀장님이 바꾸면 되는 색 */

.wrap{border-color:#3170b4} /* 상단 선 */

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{border-color:#3170b4} /* input */

header .nav a.active{color:#3170b4} /* 메뉴 색 */

.btn_page:hover i{color:#3170b4} /* 페이지 이동 버튼 */


html,
body{width:100%; height:100%}

body{background:#f7f7f7}
.wrap{position:relative; min-width:100%; min-height:100%; padding:0 0 0 180px; border-top-width:4px; border-top-style:solid; box-sizing:border-box; min-width:1145px}





/************************* SECTION *************************/
section{padding:15px; box-sizing:border-box}
h2{display:inline-block; margin:0 0 calc(15px + 40px) 0; padding:6px 0 9px 0; border-width:0px; border-style:double; border-top:none; border-right:none; border-left:none; color:#666; font-size:24px; }
.container{position:relative; margin:0 0 20px 0; padding:20px 10px; box-sizing:border-box; background:#fff}
.cont_head{margin:0 0 21px 0; padding:0 0 12px 0; border-bottom:1px solid #f4f4f4; box-sizing:border-box; font-size:18px}





/************************* HEADER *************************/
header{position:absolute; top:0; left:0; width:180px; height:100%; border-right:1px solid #e2e2e2; box-sizing:border-box; background:#fff}

header h1{background:rgb(120,117,110)}
header h1 a{display:block; width:180px; margin:0; border:1px solid #e2e2e2; border-top:none; border-left:none; box-sizing:border-box}
header h1 a img{display:block; width:179px}

header .my_info{padding:12px 0; border-bottom:1px solid rgb(226,226,266); text-align:center}
header .my_info .mypage{display:block; margin-bottom:10px; font-size:16px; text-decoration:underline}
header .my_info .btn_logout{display:block; width:76px; text-align:center}
header .my_info .auto_logout{padding:10px 0 0 0}
header .my_info .auto_logout span{color:#000; line-height:1.6em; font-weight:bold}

header .nav a{display:block; position:relative; color:rgb(130,126,121); box-sizing:border-box; line-height:1.4em}
header .nav > li > a{position:relative; padding:12px 5px 12px 35px; border-bottom:1px solid rgb(226,226,226); font-size:14px; font-weight:bold}
header .nav > li > a .fa-folder{position:absolute; top:15px; left:15px; width:20px}
header .nav > li > a .fa-angle-left{position:absolute; top:50%; right:20px; margin-top:-7px}

header .depth_2{padding:5px 0; border-bottom:1px solid rgb(226,226,226)}
header .depth_2 > li > a{position:relative; padding:5px 5px 5px 35px; font-size:13px}
header .depth_2 > li > a .fa-sticky-note-o{position:absolute; top:8px; left:15px; width:20px}

header .depth_3{padding:0 0 0 10px}
header .depth_3 > li > a{padding:3px 15px 3px 15px}
header .depth_3 > li > a .fa-circle-o{width:auto; margin-right:3px; font-size:8px}
header .depth_3 > li > a .fa-circle-o:before{content:'-'}



/************************* TABLE *************************/
table{width:100%; border:1px solid #ccc}
table thead{border-bottom:2px solid #666}
table th,
table td{padding:8px; border-right:1px dashed #ddd; box-sizing:border-box; line-height:1.4em; font-size:14px; text-align:left}
table th:last-child,
table td:last-child{border-right:none}
table th{background:#f7f7f7; color:#666}
table tbody th{border-bottom:1px dashed #ddd}
table td{border-bottom:1px dashed #ddd}
table tbody tr:last-child th,
table tr:last-child td{border-bottom:none}
table tbody tr:hover{background:#f5f5f5}

table.center th,
table.center td{text-align:center}

th.center,
td.center{text-align:center}

th.left,
td.left{text-align:left}

.wrap_table{margin-bottom:25px}
.table_left{float:left; width:49%; margin-right:2%}
.table_right{float:left; width:49%}

.table_head{margin:0 0 8px 0}
.table_head h4{float:left; color:rgb(121,116,110); line-height:22px; font-size:18px}
.table_head .btn{float:right}

table .head_link{color:#337ab7}
table .head_link:hover{text-decoration:underline}

table .thumb_img{display:block; width:100px; margin:0 auto}





/************************* FORM LIST *************************/
.form_list{border:1px dashed #ddd}
.form_list > li{position:relative; float:left; width:100%; min-height:41px; padding:0 0 0 17%; border-bottom:1px dashed #ddd; box-sizing:border-box}
.form_list > li:last-child{border-bottom:none}

.form_list > li.half{width:50%}

.form_list .list_title{position:absolute; top:0; left:0; width:13%; padding:10px 0 0 16px; box-sizing:border-box; color:#777; line-height:1.6em; font-size:13px; font-weight:bold}
.form_list .list_cont{overflow:hidden; padding:10px; box-sizing:border-box; line-height:1.4em; font-size:14px}

.form_list .thumb_img{width:150px; border-radius:4px}

.form_list .edit_area{width:100%; max-width:100%; height:600px; background:#f7f7f7}

.btn_page{position:absolute; top:35px; right:20px; margin-left:30px}
.btn_page i{
	transition: all .2s ease-out;
}

.form_list .add_tr{float:left; width:100%; margin:5px 0 0 0; padding:5px 0 0 20px; border-top:1px dashed #ddd; box-sizing:border-box}
.form_list .add_tr.half{width:50%}
.form_list .add_link_tr{margin:5px 0 0 0; padding:8px 0 5px 20px; border-top:1px dashed #ddd; box-sizing:border-box}
.form_list .add_link_tr:first-child{margin-top:0; padding-top:0; border-top:none}
.form_list .add_link_tr .radio_list{margin-bottom:7px}

.form_list .add_title{float:left; width:10%; color:#777; line-height:35px; font-size:13px; font-weight:bold}
.form_list .add_tr.half .add_title{width:20.3%}
.form_list .add_cont{float:left; width:88.8%}
.form_list .add_tr.half .add_cont{width:77.4%}
.form_list .add_cont .radio_list,
.form_list .add_cont .checkbox_list{padding-top:11px}





/************************* INPUT *************************/
input[type="text"],
input[type="password"],
textarea{width:100%; max-width:100%; padding:6px 10px; border:1px solid #e8e8e8; border-top-color:#c9c9c9; border-bottom-color:transparent; border-radius:3px; box-sizing:border-box; box-shadow:inset 0 1px 0 #f8f8f8; background:#f7f7f7; line-height:21px; font-size:14px; vertical-align:middle; outline:none;
	transition: all .2s ease-out;
}
input[type="file"]{font-size:14px}

textarea{height:120px}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{padding:5px 9px; border-width:2px; border-style:solid; box-shadow:inset 0 0 0 rgba(247,247,247,0)}

.keyword_box{margin-top:10px}





/************************* MEMO *************************/
.memo{padding:10px 0}
.memo li{margin:0 0 5px 0; color:#999; line-height:1.5em; font-size:12px; font-weight:bold}

.form_list .memo{padding:0}

.file_memo{margin-bottom:5px}
.file_memo li{margin-bottom:2px; font-weight:normal}

.label{display:inline; height:20px; padding:0 0.5em; color:#a5a5a5; border:2px solid #a5a5a5; border-radius:3px; box-sizing:border-box; background:none; line-height:20px; font-size:11px}
.label_on{color:#a6191f; border-color:#a6191f}





/************************* COMMON *************************/
.color_point{color:#333}


.btn{display:inline-block; height:34px; padding:7px 13px; border:none; border-radius:3px; box-sizing:border-box; background:#888; color:#fff; line-height:1.5em; font-size:14px; text-align:center}
.btn:hover{background:#777}

.btn_green{background:#5cb85c}
.btn_green:hover{background:#449d44}

.btn_blue{background:#337ab7}
.btn_blue:hover{background:#286090}

.btn_red{background:#c9302c}
.btn_red:hover{background:#ac2925}

.btn_skyblue{background:#5bc0de}
.btn_skyblue:hover{background:#46b8da}

.btn_orange{background:#ec971f}
.btn_orange:hover{background:#d58512}

.btn_excel{background:#39825a}
.btn_excel:hover{background:#1f6b41}

.btn_small{height:22px; padding:1px 5px; line-height:1.5em; font-size:12px}


.font_bold{font-weight:bold}
.font_big{line-height:1.4em; font-size:1.5em}


.btn_footer{margin:20px 0 0 0; padding:10px 0 0 0; border-top:1px solid #f1f1f1}
.btn_footer .left{float:left}
.btn_footer .left .btn{height:30px; padding:5px 10px; font-size:12px}
.btn_footer .right{float:right}





/************************* SEARCH AREA *************************/
.search_area{margin:0 0 50px 0; padding:20px 10px 10px 10px;  background:#fff}

.search_area .form_list{margin-top:0; border:none; border:1px dashed #ddd; }
.search_area .form_list > li{border-color:#ddd}
.search_area .form_list > li.btn_footer{padding-top:10px; padding-right: 10px}

.search_area .form_list > li{padding-left:13%}

.radio_list{padding:3px 0 0 0}
.checkbox_list li,
.radio_list li{float:left; margin-right:40px}
.checkbox_list li:last-child,
.radio_list li:last-child{margin-right:0}
.checkbox_label,
.radio_label{cursor:pointer}
.checkbox_label input[type="checkbox"],
.radio_label input[type="radio"]{float:left; margin:0 5px 0 0}
.checkbox_list,
.radio_txt{float:left; font-size:12px}
.form_list .list_cont .component_join,
.form_list .list_cont .component_join{padding-top:0; padding-bottom:7px}

.checkbox_list{padding-top:3px}

.search_area .btn_footer{margin:0; border:none}

.search_area .ui-selectmenu-button.ui-button,
.search_area input{background:#f7f7f7}





/***** SELECTBOX *****/
.ui-selectmenu-button.ui-button{width:100%; max-width:89.5%; margin:0; padding:6px 10px; border:1px solid #e8e8e8; border-top-color:#c9c9c9; border-bottom-color:transparent; border-radius:3px; box-sizing:border-box; box-shadow:inset 0 1px 0 #f8f8f8; background:#f7f7f7; outline:none;
	transition: all .2s ease-out;
}
.half .ui-selectmenu-button.ui-button{width:75%}
.ui-selectmenu-button.ui-button:hover{background:#f4f4f4}
.ui-selectmenu-text{color:#333; line-height:1.5em; font-family:'NotoSans'; font-size:14px}
.ui-selectmenu-button.ui-button{float:left; max-width:212px; margin-right:10px}

.ui-selectmenu-button .ui-icon{width:10px; height:21px; background:url(../images/selectbox_icon.png) center center no-repeat}
.ui-selectmenu-button .ui-button:active .ui-icon,
.ui-selectmenu-button.ui-button:focus .ui-icon,
.ui-selectmenu-button.ui-button:hover .ui-icon{background:url(../images/selectbox_icon.png) center center no-repeat}





/************************* PAGE *************************/
.wrap_page{padding:20px 0 0 0; text-align:center}
.page{display:inline-block; border:1px solid rgb(221,221,221); border-radius:4px; box-sizing:border-box}
.page a{display:block; width:31px; height:29px; padding:8px; box-sizing:border-box}
.page a:hover{background:rgb(245,245,245)}
.page > a{float:left}
.page .page_prev{border-right:1px solid rgb(221,221,221)}
.page .page_next{border-left:1px solid rgb(221,221,221)}
.page ul{float:left}
.page ul li{float:left; border-right:1px solid rgb(221,221,221)}
.page ul li:last-child{border-right:none}
.page ul li a{min-width:31px}
.page ul li.active a{width:33px; min-width:33px; height:31px; margin:-1px -1px -1px -1px; background:rgb(174,165,154); color:#fff}





/************************* DATEPICKER *************************/
.wrap_datepicker{display:inline-block; width:460px}
.wrap_datepicker .div_datepicker{display:inline-block; position:relative; width:46%}
.wrap_datepicker .div_datepicker input{width:100%; max-width:100%; padding-right:35px}
.wrap_datepicker .div_datepicker .btn_datepicker{display:block; position:absolute; top:0; right:0; width:35px; height:35px; box-sizing:border-box; line-height:35px; text-align:center}










.list_top{margin:0 0 3px 0}
.list_top .left{float:left; width:50%; padding:10px 0; box-sizing:border-box}
.list_top .right{float:right; max-width:50%}
.list_top .right .ui-selectmenu-button.ui-button{float:left; width:100px; margin-left:3px}
.list_top .right input[type="text"]{float:left; width:150px; margin-left:3px}
.list_top .right .btn{float:left; margin-left:3px}





.btn_turn .turn{display:block; float:left; width:28px; height:24px; border:1px dashed #666; border-radius:3px; box-sizing:border-box; background:#ffe8e8; color:#666; text-align:center}
.btn_turn .turn:hover i{color:#c9302c}
.btn_turn .turn_up{margin-right:3px}




.login{padding-left:0}
.login section{padding-top:125px}
.login h1{margin:0 0 25px 0; text-align:center}
.login .login_box{width:360px; height:175px; margin:0  auto 20px auto; padding:20px; box-sizing:border-box; background:#fff}

.login .login_box input{display:block; width:100%; max-width:100%; margin-bottom:15px}

.login .login_box .btn_sign{display:block; width:100%; height:34px; border:none; border-radius:3px; background:#888; color:#fff; line-height:34px; font-size:14px; text-align:center}
.login .login_box .btn_sign:hover{background:#777}

.login .notice{width:360px; margin:0 auto; padding:0 15px; box-sizing:border-box}
.login .notice p{margin:0 0 7px 0; line-height:1.5em; word-break:break-all}
.login .notice .title{font-size:14px; font-weight:bold}
.login .notice ul li{margin-bottom:3px; line-height:1.4em}

.login .notice .fa-info{display:inline-block; width:18px; margin-right:5px; border:2px solid #666; border-radius:50%; box-sizing:border-box; font-weight:normal; text-align:center}





.modal{width:auto; max-width:none; padding:0; border-radius:0; box-shadow:none}
.modal .modal-box{padding:5px}
.modal a.close-modal{top:-30px; right:0; width:20px; height:20px; background:url(../images/pop_close.png) 0 0 no-repeat; background-size:20px;
	transition: all .2s ease-out;
}
.modal a.close-modal:hover{
	transform: rotate(90deg);
}


.form_list .progress {
	position: relative;
	width: 100%;
	margin: 5px 0px;
	border: 1px solid #DDD;
	padding: 2px;
	border-radius: 3px;
}
.form_list .progress .bar{
	background: #008DE6;
	height: 15px;
	width: 0%;
	/* transition animation */
	-webkit-transition: width .3s;
		-moz-transition: width .3s;
			transition: width .3s;

}
.form_list .progress .percent {
	position: absolute;
	display: inline-block;
	top: 0px;
	left: 48%;
	color: #333;
}


.div_pop{position:absolute; top:100px; left:100px; padding:5px; box-shadow:0 0 10px rgba(0,0,0,0.2); background:#fff;z-index:9999}
.div_pop img{width:100%;}




/* 2019-03-18 */
.progress-layer {display:table; position:fixed; top:0; left:0; z-index:999; background:rgba(0,0,0,.6); width:100vw; height:100vh; text-align:center;}
.progress-layer > div {display:table-cell; vertical-align:middle;}
.progress-layer > div p {color:#fff; font-size:40px;}
.progress-layer > div p span {font-size:50px;}

.logout_time {margin: 20px 0 5px 0}
.logout_time strong {color: #c9302c}



/* 2019-03-26 */
.tab-links {
	zoom: 1;
	position: relative;
	z-index: 2;
	margin-bottom: -2px;
	border-bottom: 2px solid #aaa;
}

.tab-links:before,
.tab-links:after {
	content: '';
	display: table;
}

.tab-links:after {
	clear: both;
}

.tab-links li {
	float: left;
	position: relative;
}

.tab-links li a {
	display: block;
	width: 180px;
	height: 40px;
	padding-top: 12px;
	border: 1px solid #ddd;
	border-bottom: none;
	box-sizing: border-box;
	background: #f7f7f7;
	font-size: 14px;
	text-align: center;
	transition: all .2s ease-out;
}

.tab-links li a:hover {
	background: rgba(255,255,255,.8);
}

.tab-links li:last-child a {
	border-left: none;
}
	

.tab-links li.is-active:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 2px;
	background: #fff;
}
	

.tab-links li.is-active a {
	border-width: 2px;
	border-color: #aaa;
	background: #fff;
	font-weight: bold;
}

.tab-links li:last-child.is-active a {
	border-left: 2px solid #aaa;
}

/* ddd aaa */