@charset "utf-8";

/*boots*/

body.modal-open { padding-right:0 !important}
.modaltestBtn { position: absolute; top: 50%; left: 50%;}

.modal-dialog { max-width: 960px; margin:80px auto 0; -webkit-border-radius: 5px; border-radius:0px; overflow: hidden; -webkit-box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.3) !important; box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.3) !important; z-index: 1041}
.modal-dialog.info_dialog { max-width: 100% }
.modal-header { padding: 0 }
.modal-content { border: none; padding:0 !important}
.modal-header .close { margin:0; margin-right: 5px; }
.modal_footer { margin-top: 20px;	 }
.modal-footer .btn { font-size: 12px; font-family: 'Noto Sans KR',Arial,sans-serif;  }

.modal_popup_wrap { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 1; }
#modal_popup { width: 1000px; height: 600px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: #fff; border-radius: 5px; -webkit-box-shadow: 2px 4px 10px 0 #525252; box-shadow: 2px 4px 10px 0 #525252; overflow: hidden;}

.modal_tit { background: #929292;  background-image: -webkit-linear-gradient(top, #979797, #8c8c8c);  background-image: -moz-linear-gradient(top, #979797, #8c8c8c);  background-image: -ms-linear-gradient(top, #979797, #8c8c8c);  background-image: -o-linear-gradient(top, #979797, #8c8c8c);  background-image: linear-gradient(to bottom, #979797, #8c8c8c); height: 30px; }
.modal_tit h2 { width: 150px; height: 100%; background: #4293ec;  background-image: -webkit-linear-gradient(top, #4293ec, #2787f2);  background-image: -moz-linear-gradient(top, #4293ec, #2787f2);  background-image: -ms-linear-gradient(top, #4293ec, #2787f2);  background-image: -o-linear-gradient(top, #4293ec, #2787f2);  background-image: linear-gradient(to bottom, #4293ec, #2787f2); font: 500 15px/30px 'Noto Sans KR',Arial,sans-serif; color: #fff; padding-left: 20px}

/*basic tab*/
.modal_basic_tab { width: 100%; overflow: hidden; margin-bottom: 20px; background: #d6d6d6; background: -moz-linear-gradient(top, #d6d6d6 0%, #eaeaea 100%); background: -webkit-linear-gradient(top, #d6d6d6 0%,#eaeaea 100%); background: linear-gradient(to bottom, #d6d6d6 0%,#eaeaea 100%); border-radius: 5px; }
.modal_basic_tab li { width: 16.666%; float: left; background: #fff; border: 1px solid #dedede; text-align: center; border-radius: 5px;}
.modal_basic_tab li a { display: block; width: 100%; height: 100%; line-height: 33px; font-size: 14px; font-weight: normal; color: #777; border-radius: 5px;  }
.modal_basic_tab li.on a { font-weight: 500; background: #3f95f4; color: #fff; border-radius: 5px; }

.box_tab_wrap { height: 350px; overflow-y: auto; }
.box_tab_wrap>div { display: none; }
.box_tab_wrap>div#tab_box01 { display: block; }
.modal h2 { font-size: 14px; margin-bottom: 10px; }


/* modal_layout*/
.modal_bg { position:fixed; background:#000; z-index:10; width:100%; height:100%; opacity:0.6  }
.modal_popup { -webkit-border-radius: 5px; border-radius: 5px; overflow:hidden }
.modal_popup header.title { height:0px; top:0; left:0;}
.modal_popup header.title h1 { padding: 0 20px 0 20px; font-size:18px; font-weight:400; display:inline-block; line-height:40px;}

.modal_con_wrap { padding:0px; background:#fff; position: relative }
.header_btn { position:absolute; top:8px; right:8px; }

/* arrow tab */
.arrow_tab_wrap { background:#f0f0f0; border:1px solid #eaeaea; overflow:hidden; -webkit-border-radius: 5px; border-radius: 5px ; position:relative;
background: #d6d6d6; /* Old browsers */
background: -moz-linear-gradient(top,  #d6d6d6 0%, #eaeaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d6d6d6 0%,#eaeaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d6d6d6 0%,#eaeaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
}
.arrow_tab_wrap ul { display:none }
.arrow_tab_wrap ul li { float:left; }
.arrow_tab_wrap ul li a {  text-decoration: none; color: white;	font-weight: bold;	display: inline-block; border-right: 33px solid transparent; border-bottom: 33px solid #ffffff; -webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0; height: 0; line-height: 33px; padding:0 15px; font-size:14px; font-weight:normal; color:#777}
.arrow_tab_wrap ul li.on a { border-bottom: 33px solid #3f95f4; color:#fff; font-weight:bold }
.arrow_tab_wrap ul li .number { background:url(../img/num_bg.png) ; display:inline-block; padding:0 5px; font-weight:bold; font-size:12px; color:#fff; margin-right:10px;  -webkit-border-radius: 2px; border-radius: 2px ; line-height:normal  }
.arrow_tab_wrap div.position { position:absolute; top:1px; right:3px;  }

.breadcrumb {
	/*centering
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 13px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(90, 90, 90, 0.2), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
	text-align:center;
	color:#000000;
}


.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after {
	background: #8fbde8;
}

.flat a.active, .flat a.active:after { color:#fff; background: #3f95f4; }

/*insideModal*/
.modal textarea { width: 100%;	resize: 	none; }

/* 테이블 넓이 */
th.project_name { min-width:200px; }
th.project_writer { min-width: 60px; }
th.project_comment { width:auto }
th.project_date { min-width: 80px; }
th.project_state { min-width:40px; }
th.project_layer { min-width: 180px; }

/* 테이블사이즈 */
.pop_over_pop { position:absolute }
.popup_size_400 { width:400px; }
.popup_size_600 { width:600px; }