/* @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: black; text-decoration: none; }
.clear	{  clear: both;  }
.left	{  text-align: left !important; }
.center	{  text-align: center ;  }
.right	{  text-align: right !important;  }
.money 	{  text-align: right !important;  }
.bold { font-weight: bold; }
.big { font-size: 13px !important; } 

.space_v	{  clear: both; width: 100%;  height: 10px;  }
.margint { margin-top:10px; } 
.marginb { margin-bottom:10px; } 

.noline { border:none !important; }
.line { border-bottom: 1px solid green; }
.linet th, .linet td { border-top: 1px solid #555; }
.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; } 
.click, .canclick { cursor: pointer; }

.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%; }
.border1 { border: 1px solid gray;  }
.round10 { -moz-border-radius: 10px; border-radius: 10px; }
/*===  index.php  ===*/
body	{  
	font-family: "pretendard std"; /* "Noto Sans KR",sans-serif; */  font-size: 12px; 
	width: 100%;  margin: 0px; padding: 0px; background: #eee; 
}
input, select, textarea { font-family: "pretendard std"; /* "Noto Sans KR", sans-serif; */ font-size: 12px; margin: 2px 5px; }
.datepicker { font-size: 12px !important; }
select { min-width: 70px; border-width: 0 0 1px 0; }

input[type=button] { font-size: 16px; font-weight:bold; } 
button { border-radius: 7px; cursor: pointer; border: 1px solid gray; }
.textb { background: #FFF8DC }
.textc { text-align: center; }

main { display:flex; }
.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; }

/*===  main.php  ===*/
.nivo-caption { font-size: 40px; text-shadow: 3px 3px black; font-weight: bold;} 
.centerbox600	{ position: relative; margin: 10px auto 10px auto; width: 500px; height: auto; padding: 15px;  }
.centerbox600 input[type=button]	{ width: 150px; height: 50px; font-size: 20px; }
.m_button1 { 
	width: 120px; height: 30px; float: left; text-align: center; vertical-align: middle; 
	-moz-border-radius: 3px; border-radius: 4px; border: 1px solid gray; 
	padding: 10px; margin-right: 15px; cursor: pointer; background: #efefef; 
	box-shadow: 5px 5px 3px #888888; -moz-box-shadow: 5px 5px 3px #888888; -webkit-box-shadow: 5px 5px 3px #888888; 
}

.m_button { 
	width: 120px; height: 70px; float: left; text-align: center; vertical-align: middle; 
	-moz-border-radius: 3px; border-radius: 4px; border: 1px solid gray; 
	padding: 10px; margin-right: 15px; cursor: pointer; background: #efefef; 
	box-shadow: 5px 5px 3px #888888; -moz-box-shadow: 5px 5px 3px #888888; -webkit-box-shadow: 5px 5px 3px #888888; 
}
.m_button span { color: navy; font-weight: 800; }


/*===  table  ===*/

table.table, table.form { width: 100%; border-spacing: 1px; border-collapse: collapse; }
table.table th, table.table td, table.form th, table.form td {
	padding: 2px 4px;  height: 25px;
	/* font-size: 12px; */
	line-height: 150%;
}
table.table th { text-align: left; font-weight: normal; background: #eee; }
table.table td { font-weight: bold; text-align: left; border-bottom: 1px dotted #ddd; }
table.form th { font-weight: normal; background: #eee; }
table.form td { font-weight: bold; text-align: center; border-bottom: 1px dotted #ddd; }

table.form input[type=text], table.form input[type=password], 
table.form input[type=number] { 
	
	width: calc( 100% - 14px ); border-top: none; border-bottom: 1px solid #aaa; border-left: none; border-right: none; 
}

table.form textarea { width: calc( 100% - 14px ); }
.inputtable { 
	border: 1px solid gray; -moz-border-radius: 5px; border-radius: 5px; 
	padding:15px; background:white; font-size: 12px; margin: 0 auto; 
}

.inputtable TD {  }

.headcol {
  position: absolute;
  top: auto;
  height: 18px;
  /*only relevant for first row*/
  /*compensate for top border*/
}

.bot {
	display: inline-block;
	text-align: center; 
	font-weight: bold;
	cursor:pointer; 
	margin:0 0 0 10px; padding:3px 13px;
	border-radius:5px;
}
.bot-ylw { 
	background-color: gold; color:#222 !important; 
	border: 1px solid gold; 
}
.bot-red { 
	background-color: brown; color:#ffffff!important;
	border: 1px solid brown; 
}
.bot-blu { 
	background-color: #3d94f6; color:#ffffff !important; 
	border: 1px solid #3d94f6; 
}
.bot-grn { 
	background-color: ForestGreen; color:#ffffff !important; 
	border: 1px solid ForestGreen; 
}
.bot-cyn { 
	background-color: #45B6AF; color:#ffffff !important; 
	border: 1px solid #45B6AF; 
}
.bot:active, .bot-ylw:active, .bot-red:active, .bot-blu:active, .bot-sky:active, .bot-grn:active {
	position:relative;
	top:1px;
}
.bot:hover {
}

.circle { padding:3px 5px; border-radius:30px; border: 1px solid gray; } 
.circle-ylw { padding:3px 5px; border-radius:30px; border: 1px solid DarkOrange; } 
.circle-red { padding:3px 5px; border-radius:30px; border: 1px solid brown; } 
.circle-blue { padding:3px 5px; border-radius:30px; border: 1px solid MidnightBlue; } 
.circle-ryblu { padding:3px 5px; border-radius:30px; border: 1px solid RoyalBlue; } 
.circle-pupl { padding:3px 5px; border-radius:30px; border: 1px solid indigo; } 

.black { color:black; background:white; }
.white { color:white; background:black; }
.brown { color:brown;  }
.brownb { color:white; background:brown; }
.red { color:red; }
.redb { color:white; background:red; }
.blue { color:blue; background:white; }

.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; }
.buttonbox { text-align: center; }
.button { text-align: center; width:100px; background-color: brown; color:#ffffff; 
cursor:pointer; margin:0px 10px 0px 10px; padding-top: 0px; }
.button1 { text-align: center; width:100px; height:25px; background-color: green; color:#ffffff; 
cursor:pointer; margin:0px 10px 0px 10px; padding-top: 0px; }

.centerone { margin:0px auto 0px auto !important; }

.orderlist { text-align: center;  }
.orderlist table { margin-left: 150px; }
#message { color: #800020; background: #fff; padding: 5px; display: none; }
#info, .ui-dialog { z-index: 500 !important; }


.dlg {
	position: absolute; display: none;  
	height: auto; padding: 10px; margin: 0 10px; 
	top: 100px; background: #eee; border: 2px solid brown; 
}
.fixed { position: fixed !important; }

#win10 { 
	width: 1000px; 
	left : -webkit-calc(50% - 524px); left: -moz-calc(50% - 524px); left: calc(50% - 524px); 
	z-index: 460; 
}
#win9 { 
	width: 900px; 
	left : -webkit-calc(50% - 474px); left: -moz-calc(50% - 474px); left: calc(50% - 474px); 
	z-index: 470; 
}
#win8 { 
	width: 800px; 
	left : -webkit-calc(50% - 424px); left: -moz-calc(50% - 424px); left: calc(50% - 424px); 
	z-index: 480; 
}

#dlg10 { 
	width: 1000px; 
	left : -webkit-calc(50% - 524px); left: -moz-calc(50% - 524px); left: calc(50% - 524px); 
	z-index: 485; 
}
#dlg8 { 
	width: 800px; 
	left : -webkit-calc(50% - 424px); left: -moz-calc(50% - 424px); left: calc(50% - 424px); 
	z-index: 490; 
}
#dlg6 { 
	width: 600px; 
	left : -webkit-calc(50% - 324px); left: -moz-calc(50% - 324px); left: calc(50% - 324px); 
	z-index: 500; 
}
#dlg4 { 
	width: 400px; 
	left : -webkit-calc(50% - 224px); left: -moz-calc(50% - 224px); left: calc(50% - 224px); 
	z-index: 500; 
}

table.infodlg { width: 100%; }

.box1 { border:1px solid gray; }
.box2 { width: calc(50% - 20px) ; border:1px solid gray; float: left; }

.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; 
}

.float_l { float: left; }
.fieldname { font-weight: 800; width: auto; margin-right: 10px; }
.fieldvalue1 { width: auto; margin-right: 5px; }
.fieldvalue2 { width: auto; margin-right: 25px; }


.tr_new { color: blue; }
.procomment { text-align: right; }
.protitle3 { font-weight: 800; font-size: 14px; }

.inputtext { width: 200px; }
.inputtext3 { width: 200px; }

.myButton {
	background-color:#3d94f6;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	/* font-family:arial; */
	font-size:12px !important;
	margin-left: 10px;
	padding:3px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
}
.myButton:hover {
	/* background-color:#1e62d0; */
}
.myButton:active {
	position:relative;
	top:1px;
}

.toolButton {
	background-color:#fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #333;
	display:inline-block;
	cursor:pointer;
	color:#333 !important;
	/* font-family:arial; */
	font-size:12px !important;
	margin-left: 10px;
	padding:3px 3px;
	text-decoration:none;
	/* text-shadow:0px 1px 0px #1570cd; */
}
.toolButton:hover {
	/* background-color:#1e62d0; */
}
.toolButton:active {
	position:relative;
	top:1px;
}

.subbox table td {
	/*padding: 5px;*/
}
#infodlg {
	display: none; 
	position: absolute;
	background: #eeeeee;
	margin: 0 0 0 -100px; 
	width: 250px; 
	z-index: 1050;
	top: 220px;
	left: 50%;
	padding: 0px; 
	border: none; 
}
.infodlg td { padding: 5px 5px; border: 1px solid white;  }

.infodlg tr.odd {  background: white; }
.infodlg tr.even {  background: #F3F2F7; }
.infoicon { display: none; width: 15px; }

/*  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: 12px;
}
.formwrap {
	margin: 20px; 
	background: white;
}
#quote_bottom {
	margin: 30px;
	font-size: 11px;
}
.head {
	font-weight: 800;
	font-size: 15px !important;
	color: #773333;
	border-bottom: dotted 1px #9f0000;
}
.fname {
	font-weight: 400;
}

.fieldvalue {
	color: #333;
    font-weight: bold;
    padding: 0 0 0 10px;
    text-align: left;
}

.form tr {
	height: 17px;
}
.icon {
	cursor: pointer;
	border: 0;
}
.PicBox { margin-left: 12px; margin-bottom: 10px; padding: 3px; border: 1px solid #ccc; }
.imgbox { width: 160px;  }

input[type=button], input[type=submit] {
	padding: 5px 10px;
}

.sumry {
	width: 600px !important;
	border-spacing: 0;
	border-radius: 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-collapse: collapse;
}
.sumry td, .sumry th {
	color: #555;
	border: 1px solid #ddd; 
	padding: 3px;
	width: 16.666%;
}
.subbox table {
	width: 100%; 
}

/*  tab control              */
#tabContainer {
	width:100%;
	padding:1px;
	margin: 0 -5px 0 -7px;
	/* 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: 5px;
}

.tabs > ul > li{
	margin:0 2px 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;
}
a.linkbutton, .linkbutton{ 
	padding: 5px 10px; border-radius: 5px; background: /* #e1ecff; */ #008c21; color: #fff; 
	font-weight: bold;
}
.linkbutton a { color: #fff; }

a.missionbutton, .missionbutton { padding: 5px 10px; 
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-left-radius: 5px; 
	border-bottom-left-radius: 5px; 
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;

	background: /* #e1ecff; */ #008c21; color: #fff; 
	font-weight: bold; }
	
.delbutton { padding: 2px ; background: #fff; 
	border-top: 1px solid gray; 
	border-bottom: 1px solid gray; 
	border-right: 1px solid gray; 
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	color: red !important; 
	font-weight: bold;
}

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; }

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

#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 { 
	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;
}
button.btn {
	padding: 7px 14px;
}

/* 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;
}