/*
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-std.min.css");
/*===  common  ===*/
img { border: 0 }
a, a:link { color: #3F4F5F; text-decoration: none; }
.clear	{  clear: both;  }
.center	{  text-align: center;  }
.right	{  text-align: right;  }

.b100 { font-weight: 100 !important; }
.b200 { font-weight: 200 !important; }
.b300 { font-weight: 300 !important; }
.b400 { font-weight: 400 !important; }
.b500 { font-weight: 500 !important; }
.b600 { font-weight: 600 !important; }
.b700 { font-weight: 700 !important; }
.b800 { font-weight: 800 !important; }
.b900 { font-weight: 900 !important; }

.bold { font-weight: 700; }

.space_v	{  clear: both; width: 100%;  height: 10px;  }
.line { border-bottom: 1px solid green; }
.mainbody { width: auto; height: auto; margin: 5px 0; } 
.left_menu { position: relative; float: left; width: 140px; height: 100%; padding: 0px 0px 0px 8px; }
.left_menu_item { color: black; margin-bottom: 10px; }
.left_menu_item a { text-decoration: none; color: black; } 

.content_right { position: relative; float: left; width: 100%; }
#helptitle { font-weight: bold; font-size: 16px; text-align: left; margin: 10px; cursor: pointer; color: navy; } 
.help { text-align: left; margin: 10px; padding: 20px; background: #eee; color: navy; line-height: 150%; }

._title { font-size: 20px; font-weight: bold; } 

/* color */
.white, .white:hover { color: white; }
.flexbox { display: flex; }
.flexcenter { display: flex; justify-content: center; }
.b_close { display: inline-block; position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; 
text-align: center; border: 0; cursor: pointer; }
.b_close i { margin: 0; padding: 0; color: brown; }
.b_blue { color: white !important; background-color: #2271b1; border-width: 0 !important; }
.b_blue:hover { color: white; background-color: #135e96; }

.b_yellow { color: #333 !important; background-color: #f5e6ab; border-width: 0 !important; }
.b_yellow:hover { color: #333; background-color: #f2d675; }

.b_green { color: white !important; background-color: #008a20; border-width: 0 !important; } 
.b_green:hover { color: white; background-color: #007017; }

.b_red { color: white !important; background-color: brown; border-width: 0 !important; }
.b_red:hover { color: white; background-color: #800000; }

.big { padding: 8px 14px !important; font-size: 20px !important; }

input[type=button], input[type=submit], .button{
	padding: 4px 7px 4px 7px;
	font-size: 13px;
	border: 1px solid gray; 
	border-radius: 4px; 
	cursor: pointer;
	line-height: normal;
	box-shadow: 1px 1px 1px #888888;
}

/*===  index.php  ===*/

body	{  color: #222; font-family: 'Pretendard Std'; 
font-size: 12px; width: 100%;  margin: 0px; padding: 0px; background: #eee; }
input, select { font-family: 'Pretendard Std';  font-size: 11px; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 4px; }
td { text-align: left; }
.tablewrap { border: 1px solid gray; border-radius: 5px; background: white; padding: 15px; margin: 0 auto; }
.menu_wrap	{  width: 100%;  height: 30px;  border-bottom: 1px solid green; background: white; }
.footer_wrap	{  clear:both;  text-align: center;  font-size: 12px;  width: 100%; height: auto;  margin-top: 10px; padding: 10px 0; border-top: 1px solid green;  }
.centerbox500	{ position: relative; margin:30px auto 30px auto; width: 500px;  height: auto; border: 1px solid black;  padding: 15px 0px; background: #fff; }
.login1	{  float: left;  	width: 150px;  height: 30px;  text-align: right;  }
.login2	{  float: left;  	width: 150px;  height: 30px;  margin-left: 15px;  }
.login_button	{  position: absolute;  right: 80px;  top: 60px;  }
.login_button input[type=button]	{  width: 100px;  height: 40px;  }
input { border-radius: 0; }

/*===  main.php  ===*/
.nivo-caption { font-size: 40px; text-shadow: 3px 3px black; font-weight: bold;} 

.click { cursor: pointer; }

.subbox {  position: relative; margin:0px auto 12px auto;  background: white; padding : 10px; }
.pagehead { font-size: 18px; margin:0px auto 0px auto; }
.pages { text-align: center; }

.button1 { text-align: center; width:100px; height:25px; background-color: green; color:#ffffff; cursor:pointer; margin:0px 10px 0px 10px; padding-top: 0px; }

#message { color: #800020; background: #fff; padding: 5px; display: none; }

#info, .ui-dialog { z-index: 500 !important; }

#infowin { max-width: 500px; 
	left: calc(70% - 250px); 
	/* top: 250px; */ 
	z-index: 500; 
}
/*
@media (min-width: 900px) {
	#infowin { top: 420px; }
} 
@media (max-width: 899px) {
	#infowin { top: 520px; }
}
*/
#iwin1 { position: absolute; display: none; width: 930px; 
	height: auto; padding: 10px; margin: 0 10px; 
	left : -webkit-calc(50% - 475px); left: -moz-calc(50% - 475px); left: calc(50% - 475px); 
	top: 50px; background: #eee; border: 2px solid brown; z-index: 460; }
#iwin2 { position: absolute; display: none; width: 930px; 
	height: auto; padding: 10px; margin: 0 10px; 
	left : -webkit-calc(50% - 400px); left: -moz-calc(50% - 400px); left: calc(50% - 400px); 
	top: 50px; background: #eee; border: 2px solid brown; z-index: 460; }

#iwin3 { position: absolute; display: none; width: 930px; height: auto; padding: 15px; margin: 0 10px; 
	left: 5%; top: 100px; height: auto; background: #eee; border: 2px solid brown; z-index: 470; }

#idlg1 { display: none; position: absolute; background: #eeeeee; margin: 0 0 0 -100px; z-index: 1050;
	width: 200px; top: 220px; left: 50%; padding: 10px; border: none; }

#help { position: absolute; display: none; width: 300px; min-height: 300px; padding: 15px; margin: 0 10px; 
	right: 1%; top: 100px; background: #fdfdfd; border: 2px solid brown; z-index: 470; } 

.box_shadow1 { box-shadow: 2px 2px 1px #888888; -moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888; }
.box_shadow3 { box-shadow: 5px 5px 3px #888888; -moz-box-shadow: 5px 5px 3px #888888; -webkit-box-shadow: 5px 5px 3px #888888; }

.inputtable { BORDER: 1PX SOLID GRAY; -moz-border-radius: 5px; border-radius: 5px; }
.inputtable td { PADDING-LEFT: 10PX; padding-top: 2px; padding-bottom: 2px; }


/*  same main        */
.paddingbox { padding: 30px; background: #eee; }
.innerpaddingbox { padding: 10px; background: #fff; }

.sub { font-size: 12px; }
li.sub { font-size: 12px; width: 45%; float: left; margin-left: 20px; margin-bottom: 10px; }

.subtitle { font-size: 12px; margin-left: 30px; }

table.form { background: white; font-size: 13px; }
table.form tr { height: 17px; }
	
table.list { margin-top: 5px; }
table.list tr:nth-child(even) { background: #F3F2F7; }
table.list tr:nth-child(odd) { background: #FFF; }
table.list th, table.list td { border: 1px solid #D5D5D5; }
table.list tr.over:hover { background: #FFFFC9; cursor: pointer; }


/*  tab control */
#tabContainer {
	width: 100%;
	padding:1px;
	margin: 0 -5px 0 0;
	/* background-color:#2e2e2e; */
	-moz-border-radius: 4px;
	border-radius: 4px; 
}

.tabs{
	height:30px;
}

.tabs > ul{
	font-size: 1em;
	list-style:none;
	margin-top : -10px; 
	padding-left: 0;
}

.tabs > ul > li{
	margin:0 3px 0 0;
	padding:7px 10px;
	display:block;
	float:left;
	color:#FFF;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px; 
	background: #C9C9C9; /* old browsers */
	background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.tabs > ul > li:hover{
	border-top: 1px solid #808080; 
	border-left: 1px solid #808080; 
	border-right: 1px solid #808080; 
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
	cursor:pointer;
	color: #333;
}

.tabs > ul > li.tabActiveHeader{
	border-top: 1px solid #808080; 
	border-left: 1px solid #808080; 
	border-right: 1px solid #808080; 
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
	cursor:pointer;
	color: #333;
	font-weight: bold;
}

.tabscontent {
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border: 1px solid #808080; 
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	padding:10px 10px 25px;
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
	margin: -1 0 0;
	color:#333;
}

body.busy, body.busy * {  cursor: wait !important;  }
/*
.picbox2 { position: relative; float: left; width: 214px; height: 220px; text-align: center; border: 1px solid gray; 
	border-radius: 5px; -moz-border-radius: 5px;  
	margin-right: 10px; margin-bottom: 10px; padding: 5px; vertical-align: middle;
	background: #fff; box-shadow: 2px 2px 1px #888888;

	}
.picbox3 { position: relative; text-align: center;  height: 200px;}
.picbox3 a { max-width: 202px; max-height: 200px;  }
.picbox3 img { max-width: 200px; max-height: 200px;  vertical-align: middle; } 
.caption { position: absolute; width: 95%; bottom: 5px; text-align: center; background: #fafafa; padding: 2px 0; }
*/

#waitdlg { 
	position: fixed; 
	display: none; 
	width: 200px; padding: 15px; 
	margin: -20px -100px; left: 50%; top: 30%; 
	font-size: 14px; font-weight: bold; 
	background: #ffffba;
	border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; 
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); outline: 0 none; 
	line-height: 30px;
	z-index: 9999;
}

/* Modal */
.modal { 
	top: 100px;
	left: 50%;
	position: absolute; 
	display:none; 
	border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; 
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); outline: 0 none; 
	z-index: 9999;
	background: white;
}
.modal-800 { 
	margin: 30px 0 0 -400px;
    width: 800px;
}
.modal-600 { 
	margin: 30px 0 0 -300px;
    width: 600px;
}
.modal-400 { 
	margin: 30px 0 0 -200px;
    width: 400px;
} 
.modal-header {
	position: relative;
	border-bottom: 1px solid #efefef;
	min-height: 16.43px;
    padding: 15px;
}
.modal-header .close1 {
	margin-top: 0 !important;
    border: 0;
    cursor: pointer;
    padding: 0;
	background: white;
    display: inline-block;
    margin-right: 0;
    margin-top: 0;
	width: 20px;
	height: 20px;
    color: black;
    float: right;
	opacity: 0.2;
	font-size: 20px;
    text-shadow: 0 1px 0 #fff;

	font-weight: 300;
}
.modal-header .close1:hover,
.modal-header .close1:focus {
	opacity: 0.5;
}
.modal-header .modal-title {
line-height: 1.42857;
    margin: 0;
    font-size: 17px;
    font-family: "Open Sans",sans-serif;
    font-weight: 300;	
	
}
.modal .modal-body {
	border-radius: 0 !important;
	padding: 15px;
    position: relative;
}
.modal-footer::after {
	clear: both;
}

.modal-footer::before, .modal-footer::after {
    content: " ";
    display: table;
}
.modal-footer {
	border-top: 1px solid #e5e5e5;
    padding: 15px;
    text-align: right;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    /* width: 120px; */
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}