@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('http://fonts.googleapis.com/css?family=Great+Vibes');
@import url('http://fonts.googleapis.com/css?family=Lobster');
/*===  common  ===*/
img { border: 0 }
a, a:link { color: #333; text-decoration: none; }
a:visited { color: #333; text-decoration: none; }
a.button, a.button:link, a.button:visited { color: #FFF; text-decoration: none; }

.clear	{  clear: both;  }
.center	{  text-align: center;  }
.left	{  text-align: left;  }
.right	{  text-align: right;  }

.bold { font-weight: bold; }
.space_v	{  clear: both; width: 100%;  height: 10px;  }
.line { border-bottom: 1px solid green; }
.mainbody { width: auto; height: auto; margin: 120px 0 5px; } 
.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%; }

/*=== color ===*/
.navy { color: navy; }
.red { color: red; }
.magenta { color: magenta; }
.yellow { color: yellow; }
.green { color: green; }


/*===  index.php  ===*/
body	{  font-family: '나눔고딕', 'NanumGothic';  font-size: 12px; width: 100%;  margin: 0px; padding: 0px; }
input, select, textarea, label { font-family: '나눔고딕', 'NanumGothic';  font-size: 11px; }
.menu_wrap	{  width: 100%;  height: 30px;  
padding: 1px 0;
border-top: 1px solid #ddd; border-bottom: 1px solid green; 
background: white; }
.footer_wrap	{  clear:both;  text-align: center;  font-size: 12px;  width: 100%; height: auto;  margin-top: 0px; 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  ===*/
.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; -moz-border-radius: 3px; border-radius: 4px; border: 1px solid gray; 
	text-align: center; vertical-align: middle; 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; -moz-border-radius: 3px; border-radius: 4px; border: 1px solid gray; 
	text-align: center; vertical-align: middle; 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; }
.click { cursor: pointer; }
td {	text-align: left;	}
.pagehead { font-size: 18px; }
.subbox {  position: relative; margin:0px auto 0px auto;  background: white; padding : 10px; }
.pages { text-align: center; }

/* styles */
.tline1gray { border-top: 1px solid gray; }
.uline1gray { border-bottom: 1px solid gray; }
.border1 { border: 1px solid #ddd; }
.border2 { border: 2px solid #ddd; }
.border3 { border: 3px solid #ddd; }
.border4 { border: 4px solid #ddd; }
.border5 { border: 5px solid #ddd; }
.round3 { -moz-border-radius: 3px; border-radius: 3px; }
.round4 { -moz-border-radius: 4px; border-radius: 4px; }
.round5 { -moz-border-radius: 5px; border-radius: 5px; }
.round7 { -moz-border-radius: 7px; border-radius: 7px; }
.round10 { -moz-border-radius: 10px; border-radius: 10px; }
.round20 { -moz-border-radius: 20px; border-radius: 20px; }

/* align */
.tce {  text-align: center;  }
.tle {  text-align: left;  }
.tri {  text-align: right;  }

.fce {  float: center;  }
.fle {  float: left;  }
.fri {  float: right;  }

/* cursor */
.noclick { cursor: default !important; }
.canclick { cursor: pointer !important; }

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

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

.orderlist { text-align: center;  }
.orderlist table { margin-left: 150px; }

#infowindow { position: fixed; display: none; width: 95%; height: auto; padding: 10px; margin: 0 10px; 
	left: 0; top: 115px; background: #eee; border: 2px solid #ddd; z-index: 20; }
#infowindow2 { position: absolute; display: none; width: 800px; height: auto; padding: 15px; margin: 0 10px; 
	left: 5%; top: 115px; height: auto; background: #eee; border: 2px solid #ddd; z-index: 30; }

#infowindow3 { position: absolute; display: none; width: 800px; height: auto; padding: 15px; margin: 0 10px; 
	left: 5%; top: 115px; background: #eee; border: 2px solid #ddd; z-index: 40; }

.promoinfo1 { background: #fff; width: 94%; border: 1px solid #D5D5D5; padding: 10px 10px 10px 30px; }
.answer { background: #fff;  }

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


.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; }
.tr_new { color: blue; }
.procomment { text-align: right; }
.protitle3 { font-weight: 800; font-size: 14px; }

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

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

.button { 
	text-align: center; background-color: brown; 
	color:#ffffff; cursor:pointer; margin:0px 5px 0px 5px; padding:2px 5px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	font-weight: bold;
}

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

.subbox table td {
	/*padding: 5px;*/
}

#infodlg {
	display: none; 
	position: absolute;
	background: #eeeeee;
	margin: 0 0 0 -100px; 
	width: 200px; 
	z-index: 50;
	top: 220px;
	left: 50%;
	padding: 10px; 
	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] {
	padding: 3px;
}

.subbox table {
	width: 100%;
}


/*  tab control              */
#tabContainer {
	width:720px;
	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;
	cursor: pointer;
}
.linkbutton a { color: #fff; }

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: 16px; 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;
}

.btnshape {
	color: #333;
	border: 1px solid #333;
	border-radius:4px;
	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 0;
    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;
}