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

.border1 { border: 1px solid gray; }
.border2 { border: 2px solid gray; }
.border3 { border: 3px solid gray; }
.round5 { border-radius: 5px; }
.round10 { border-radius: 10px; }
.round15 { border-radius: 15px; }
.round20 { border-radius: 20px; }



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

/* color */
.white, .white:hover { color: white; }

.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{
	display: inline-block;
	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;
	margin: 0 1px; 
}
label, input[type=radio] { vertical-align: text-bottom; } 
label, input[type=checkbox] { vertical-align: text-top; } 
/*===  index.php  ===*/
/* 
body	{  font-family: '나눔고딕', 'NanumGothic', 'Nanum Gothic';  font-size: 12px; width: 100%;  margin: 0px; padding: 0px; background: #eee; }
input, select { font-family: '나눔고딕', 'NanumGothic', 'Nanum Gothic';  font-size: 11px; }
*/
body	{  color: #222; font-family: 'Pretendard Std'; 
._title { font-size: 18px; font-weight: 600; text-align: center; border-bottom: 1px solid gray; }
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;} 
.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; }

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

/*.button { text-align: center; width:100px; height:25px; 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; }

.roombox { float: left; color: black; width: calc(25% - 35px); width: -webkit-calc(25% - 35px); width: -moz-calc(25% - 35px);
	min-width: 190px; min-height: 140px; padding: 5px 10px; margin: 5px 0px 5px 10px; 
	border: 1px solid black; border-radius: 10px; }

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

.abs_win { position: absolute; display: none; 
	height: auto; padding: 10px; margin: 0 10px; 
	background: #eee; border: 2px solid brown; }

#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; }
}
*/
#infowindow { 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; }
#infowindow1 { 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; }

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

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

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

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

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

.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: 200px; 
	z-index: 1050;
	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: 13px;
}
	
table.list { margin-top: 5px; }
table.list tr:nth-child(even) { background: #F3F2F7; }
table.list tr:nth-child(odd) { background: #FFF; }
.list th, .list td { border: 1px solid #D5D5D5; }
.list tr.over:hover { background: #FFFFC9; cursor: pointer; }


.form tr {
	height: 17px;
}
.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;
}


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

.sumry {
	width: 600px !important;
	border-radius: 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}
.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 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;
}
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 !important; 
    /* 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;
}