@charset "utf-8";

@font-face {
    font-family: 'Jeju Gothic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/JejuGothic-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/nanum-gothic-Light.woff2) format('woff2');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/nanum-gothic-korean-400-normal.woff2) format('woff2');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/nanum-gothic-korean-700-normal.woff2) format('woff2');
}

:root {
    --app-font-base: 'Jeju Gothic', 'Nanum Gothic', fontello, sans-serif;
    --app-font-title: 'Jeju Gothic', 'Nanum Gothic', fontello, sans-serif;
    --app-font-button: 'Youth', 'Jeju Gothic', 'Nanum Gothic', fontello, sans-serif;
    --app-font-size: 12px;
    --app-font-weight: 400;
}

.page-init-hidden {
    visibility: hidden !important;
}

.page-init-ready {
    visibility: visible !important;
}

@font-face {
    font-family: 'Youth';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Youth.woff2) format('woff2'),
         url(../fonts/Youth.woff) format('woff');
}

*{font-family: var(--app-font-base);}

html {
    font-synthesis-weight: auto;
}

.app-font-weight-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.app-font-weight-disabled input {
    cursor: not-allowed;
}

body,
body div,
body span,
body p,
body label,
body input,
body select,
body textarea,
body table,
body thead,
body tbody,
body tfoot,
body tr,
body th,
body td,
body ul,
body ol,
body li,
body a {
    font-family: var(--app-font-base) !important;
    font-weight: var(--app-font-weight) !important;
}

.tabulator,
.tabulator *,
.atable,
.atable *,
.ntable,
.ntable *,
.htable,
.htable *,
.stable,
.stable *,
table,
table *,
input,
select,
textarea {
    font-weight: var(--app-font-weight) !important;
}

h1, h2, h3, h4, h5, h6,
.title-font {
    font-family: var(--app-font-title) !important;
    font-weight: var(--app-font-weight) !important;
}

.atable th,
.atable td,
.ntable th,
.ntable td,
.htable th,
.htable td,
.stable th,
.stable td,
.tabulator,
.tabulator *,
.tabulator .tabulator-header,
.tabulator .tabulator-col,
.tabulator .tabulator-cell,
.tabulator .tabulator-footer {
    font-weight: var(--app-font-weight) !important;
}

body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"],
body .rectBtn,
body .rectDiv,
body .rectBigBtn,
body .btnGreen,
body .btnGreenRect,
body .btnPink,
body .btnPinkRect,
body .btnTrans,
body .btn,
body .btnJay,
body .selected_btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.rectBtn,
.rectDiv,
.rectBigBtn,
.btnGreen,
.btnGreenRect,
.btnPink,
.btnPinkRect,
.btnTrans,
.btn,
.btnJay,
.selected_btn {
    font-family: var(--app-font-button) !important;
    font-weight: 400 !important;
}

.fa,
.fas,
.fa-solid {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
    
::-webkit-scrollbar       
{ 
    width:              10px; 
    height: 			10px;			
    background-color:   #B9BACC;
}

::-webkit-scrollbar-track 
{ 
    color:              #fff; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius:      5px;
}

::-webkit-scrollbar-thumb 
{ 
    color:              #96A9BB; 
    border-radius:      5px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}	
			
html, 
body 
{ 
	width:100%;
	height:100%; 
	margin: 0 auto;
	padding:0;
	text-align:center;
	overflow:hidden;
}

div, input, select 
{
   	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btnGreen,
.btnGreenRect 
{
	background: #d6e294;
	background-image: -webkit-linear-gradient(top, #d6e294, #6a7431);
	background-image: -moz-linear-gradient(top, #d6e294, #6a7431);
	background-image: -ms-linear-gradient(top, #d6e294, #6a7431);
	background-image: -o-linear-gradient(top, #d6e294, #6a7431);
	background-image: linear-gradient(to bottom, #d6e294, #6a7431);
	-webkit-border-radius: 30;
	-moz-border-radius: 30;
	border-radius: 30px;	
	color: #ffffff;
	font-size: 12px;
	padding: 4px 10px 4px 10px;
	border: solid #768c1f 2px;
	text-decoration: none;
}

.btnGreen:hover,
.btnGreenRect:hover
{
	background: #b9dfc0;
	background-image: -webkit-linear-gradient(top, #b9dfc0, #1f3b23);
	background-image: -moz-linear-gradient(top, #b9dfc0, #1f3b23);
	background-image: -ms-linear-gradient(top, #b9dfc0, #1f3b23);
	background-image: -o-linear-gradient(top, #b9dfc0, #1f3b23);
	background-image: linear-gradient(to bottom, #b9dfc0, #1f3b23);
	text-decoration: none;
}

.btnGreen:active,
.btnGreenRect:active
{
	background: #1f3b23;
	background-image: -webkit-linear-gradient(top, #1f3b23, #b9dfc0);
	background-image: -moz-linear-gradient(top, #1f3b23, #b9dfc0);
	background-image: -ms-linear-gradient(top, #1f3b23, #b9dfc0);
	background-image: -o-linear-gradient(top, #1f3b23, #b9dfc0);
	background-image: linear-gradient(to bottom, #1f3b23, #b9dfc0);
}

.btnPink, 
.btnPinkRect
{
	background: #f0dba8;
	background-image: -webkit-linear-gradient(top, #f0dba8, #f5b105);
	background-image: -moz-linear-gradient(top, #f0dba8, #f5b105);
	background-image: -ms-linear-gradient(top, #f0dba8, #f5b105);
	background-image: -o-linear-gradient(top, #f0dba8, #f5b105);
	background-image: linear-gradient(to bottom, #f0dba8, #f5b105);
	-webkit-border-radius: 30;
	-moz-border-radius: 30;
	border-radius: 30px;
	color: #ffffff;
	font-size: 12px;
	padding: 4px 10px 4px 10px;
	border: solid #f08708 1px;
	text-decoration: none;
}

.btnPinkRect,
.btnGreenRect
{
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
}

.btnPink:hover,
.btnPinkRect:hover 
{
	background: #ebb790;
	background-image: -webkit-linear-gradient(top, #ebb790, #f07509);
	background-image: -moz-linear-gradient(top, #ebb790, #f07509);
	background-image: -ms-linear-gradient(top, #ebb790, #f07509);
	background-image: -o-linear-gradient(top, #ebb790, #f07509);
	background-image: linear-gradient(to bottom, #ebb790, #f07509);
	text-decoration: none;
}

.btnPink:active,
.btnPink:active
{
	background: #f07509;
	background-image: -webkit-linear-gradient(top, #f07509, #ebb790);
	background-image: -moz-linear-gradient(top, #f07509, #ebb790);
	background-image: -ms-linear-gradient(top, #f07509, #ebb790);
	background-image: -o-linear-gradient(top, #f07509, #ebb790);
	background-image: linear-gradient(to bottom, #f07509, #ebb790);
}

.btnTrans
{
   border: 2px solid #fab508;
   background: transparent;   
   padding: 2px 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   color: #000000;
   font-size: 12px;
   text-decoration: none;
   vertical-align: middle;
   text-align:center;
}

.btnTrans:hover 
{
   border: 2px solid #f77503;
   background: transparent;
}

.btnTrans:active 
{
   border: 2px solid #f77503;
   background: #e67d37;
   background: -webkit-gradient(linear, left top, left bottom, from(#e8e3d6), to(#ffffff));   
   background: -webkit-linear-gradient(top, #e8e3d6, #e67d37);
   background: -moz-linear-gradient(top, #e8e3d6, #e67d37);
   background: -ms-linear-gradient(top, #e8e3d6, #e67d37);
   background: -o-linear-gradient(top, #e8e3d6, #e67d37); 
}

.numbtn
{
	background:transparent;
	color: black;
	font-size: 12px;
	width: 50px;
	height: 32px;	
	margin: 0px;
	text-align: center;
	vertical-align: middle;
	border-radius: 1px;
	border: solid #FFFFFF 0px;
}

.numbtn:hover,
.numbtn:active
{
	color: red;
}

.numbtn-first{background-image: url('../img/left-double.png');width:32px;}
.numbtn-prev{background-image: url('../img/left.png');width:32px;}
.numbtn-next{background-image: url('../img/right.png');width:32px;}
.numbtn-last{background-image: url('../img/right-double.png');width:32px;}	

.numbtn-sel
{	
	color: red;	
	border: solid #f08708 1px;
}

table
{
	border-spacing: 0px;
	border: 0px soild #000000;
	text-align: center;
	vertical-align: middle;
	margin:0 auto;
}

td
{
	padding: 0px;
	text-align: center;
	vertical-align: middle;
	margin:0 auto;
	font-size:12px;
}

input,
select,
textarea
{
	border: #c4d68e 1px solid;
	background-color: #FFFFFF;
	text-align:center;
	vertical-align:middle;
	border-radius: 0px;
	font-size: 12px;	
}
 
input:hover,
select:hover,
textarea:hover
{
	border: #FAA21E 1px solid;
	background-color: #F0F0F0;	
}

input:focus,
select:focus,
textarea:focus
{
	border: #3656cf 1px solid;
	background-color: #F0F0F0;
	outline:0 none;	
}

a{text-decoration: none;}

.hrefs
{
	cursor:pointer;
	display:inline-block;
	font-size: 12px;
	color:black;
}

.hrefs:hover,
.hrefs:active,
.hrefs-sel
{
	color:red;
}

.callConts
{
	cursor:pointer;
	width:99%;
	height:148px;
	margin:4px 0 0 0;
	ime-mode:disabled;
	font-size:11px;
	overflow-y:scroll;
	border:solid yellow 0px;
}

option
{
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size: 12px;
}
		
.modal.modal-center{text-align: center;}

@media screen and (min-width: 768px) 
{
	.modal.modal-center:before 
  	{
    	display: inline-block;
    	vertical-align: middle;
    	content: " ";
    	height: 100%;
  	}	
}

.modal-dialog.modal-center 
{
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}

#searchtotal,
#searchtotal:focus
{
	width:300px;
	height:30px;
	margin:5px 0 0 0;
	padding:0;
	background-repeat:no-repeat;
	background-position:10px 7px;
	background:#FFFFFF;
	border:0 none;
	outline:0 none;
	color:#000000;
	font-size:17px;
	line-height:25px;
	font-weight:normal;
	border:none;
	border-bottom:2px #FF0000 solid;
	border-radius:0px;
}

.menutext
{
	width:70px;
	padding:4px 10px 4px 10px;
	margin:0;
	font-family:'Noto Sans KR';
	font-size:13px;
	font-weight:normal;
	color:#c9d1e0;
	cursor:pointer;	
	text-align:center;
	vertical-align:middle;
	border:1px solid #2355b4;
	font-family:'Jeju Gothic';
}

.menutext:hover,
.menutext:active
{
	color:red;
	border:1px solid #2355b4;
}

.menutext-sel
{
	color:white !important;
	border:1px solid white !important;	
}

.menuitem
{
	padding:4px 10px;
	margin:2px 5px;
	font-size:9px;
	color:#000000;
	cursor:pointer;	
	text-align:left;
	vertical-align:middle;
	border:1px solid transparent;
}

.menuitem:hover,
.menuitem:active
{
	color:red;
	border:1px solid #2355b4;
}

.menuitem-sel
{
	background:#d6e1c0 !important;
}

.btnJay
{
   border: 2px solid #faa21e;
   background: #FFFFFF;   
   padding: 4px 10px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   color: #000000;
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
   vertical-align: middle;
   text-align:center;   
}

.btnJay:hover 
{
   border: 2px solid #f36f21;
}

.btnJay:active 
{
   border: 2px solid #ff0000;
   background: #e9e9c4;
}

.black.btnJay
{
	border: 2px solid #5a6370;
}

.black.btnJay:hover
{
	border: 2px solid #1e242f;
	background: #f9f9f9;	
}

.black.btnJay:active
{
	border: 2px solid #000000;
	background: #e9e9c4;
}

.rect.btnJay
{
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}

.newpnum
{
	background-color: rgba(255, 255, 0, 0);
	color: black;
	font-size: 12px;
	margin: 0px;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	border: solid #f08708 0px;
}

.newpnum:hover
{
	border-radius: 4px;
	background-color: #FF0000;	
	text-decoration: none;
	color: white;
	border: solid #f08708 0px;
}

.newpnum:active
{
	border-radius: 4px;
	background-color: #FF0000;
	color: yellow;	
	text-decoration: none;
	border: solid #f08708 0px;
}

.newpnum-sel
{
	border-radius: 4px;
	background-color: #f08708;
	color: white;
	font-size: 12px;
	margin: 0px;	
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	border: solid #f08708 0px;
	text-decoration:none;
}

.sendNumList
{
	margin:2px 0;	
}

.sendNumList div:nth-child(even) {background-color: #f2f2f2}
.sendNumList div:hover {background: #d6e1c0;}

.loginBtn
{
	height:28px;
	width:60px;	
	color: #FFFFFF;
	font-weight:normal;
	font-size:18px;	
	padding-left:6px;
	padding-right:6px;
	margin:0;
	text-align:center;
	vertical-align:middle; 
	border-radius:1px;
	background:#6577d3;
	border:solid 1px #4353a4;
	text-shadow: -1px 0 #4353a4, 0 1px #4353a4, 1px 0 #4353a4, 0 -1px #4353a4;
	-moz-text-shadow: -1px 0 #4353a4, 0 1px #4353a4, 1px 0 #4353a4, 0 -1px #4353a4;
	-webkit-text-shadow: -1px 0 #4353a4, 0 1px #4353a4, 1px 0 #4353a4, 0 -1px #4353a4
}
.loginBtn:hover
{
	background:#f17f2b;
	border:solid 1px #d65f08;		
	text-shadow: -1px 0 #d65f08, 0 1px #d65f08, 1px 0 #d65f08, 0 -1px #d65f08;
	-moz-text-shadow: -1px 0 #d65f08, 0 1px #d65f08, 1px 0 #d65f08, 0 -1px #d65f08;
	-webkit-text-shadow: -1px 0 #d65f08, 0 1px #d65f08, 1px 0 #d65f08, 0 -1px #d65f08; 
}
	
.loginBtn:active
{
	background:#a4cffc;
	border:solid 1px #a0bee2;	
	text-shadow: -1px 0 #a0bee2, 0 1px #a0bee2, 1px 0 #a0bee2, 0 -1px #a0bee2;
	-moz-text-shadow: -1px 0 #a0bee2, 0 1px #a0bee2, 1px 0 #a0bee2, 0 -1px #a0bee2;
	-webkit-text-shadow: -1px 0 #a0bee2, 0 1px #a0bee2, 1px 0 #a0bee2, 0 -1px #a0bee2;
}

.rectDiv,
.rectBtn
{
	height:24px;
	width:60px;	
	color:#000000;
	background:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	padding:0 4px;
	margin:0;
	text-align:center;
	vertical-align:middle; 
	border:solid 1px #808080;
	padding:1px 0 0 0;
}

.rectBtn:hover
{
	/* color:#ffffff; */
	cursor:pointer;
	background:#dce4ed;
	/* border:solid 1px #d65f08; */		 
}

.rectBtn:active
{
	color:#FF0000;
	border:solid 1px #FF0000;		 
}

.rectBtnOn
{	
	color:#FF0000;
	border:solid 1px #FF0000;	 
}

.rectBigBtn
{
	background:#FFFFFF;
	color:#0165b3;
	font-weight:bold;	
	padding:4px 0;
	display:inline-block;
	text-align:center;
	vertical-align:middle; 
	border-radius:1px;
	border:solid 2px #d1d2cd;	
}

.rectBigBtn:hover
{
	color:#d65f08;
	border:solid 2px #d65f08;		 
}

.rectBigBtn:active
{
	color:#FF0000;
	border:solid 2px #FF0000;		 
}

ul, ol, li 
{
    list-style: none;
    padding: 0;
    margin: 0;    
}
		
p{margin: 0;}	

/* .tree
{
	font-size:13px;
	font-family:'Jeju Gothic', fontello;
	font-weight:normal;
} */

.tree, .tree ul, .tree span
{
	font-size:13px;
	font-weight:normal;
	list-style: none;
    padding-left:17px;
    padding-top:4px;
    padding-bottom:4px;
    text-align:left;
}

.tree *:before
{
	width:17px;
    height:17px;
    display:inline-block;
}

.tree .ifont:before
{
	content:"\f0fe";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
}

.tree label
{
    cursor: pointer;
}

.tree input[type="checkbox"] 
{
    display: none;
}
 
.tree input[type="checkbox"]:checked~ul 
{
	display: none;
}

.tree input[type="checkbox"]:checked+.ifont:before
{
	/* content:'\e801';
	font-family: fontello; */
	content:"\f146";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
}
    
.selRow
{
	/* background-color:#f3cf97 !important; */
	background-color:rgba(178, 178, 218, 0.412) !important;
	color:black !important;
}

.selTree
{
	color:red !important;
	/* font-weight:bold; */
}

.unselectable 
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* .tabHeader{clear:both; position:relative;}
.tabHeader ul{margin-bottom:13px; height:29px; border-bottom:1px solid #2355b4;}
.tabHeader ul li{float:left; width:80px; height:20px; padding-top:8px; margin-right:3px; font-size:13px; font-weight:normal; text-align:center; cursor:pointer; background-color:#e9e9e9; border:1px solid #828282; border-bottom:1px solid #2355b4;}
.tabHeader ul li.on{background-color:#2355b4; border-bottom:1px solid #2355b4;color:#ffffff;} */

.tabHeader ul{margin-bottom:13px; height:29px; border-bottom:1px solid #2355b4;}

.toff{float:left; width:80px; height:30px; padding-top:8px; margin-right:3px; font-size:13px; font-weight:normal; text-align:center; cursor:pointer; background-color:#e9e9e9; border:1px solid #828282; border-bottom:0px solid #2355b4;}
.ton{float:left; width:80px; height:30px; padding-top:8px; margin-right:3px; font-size:13px; font-weight:normal; text-align:center; cursor:pointer; background-color:#2355b4; border-bottom:1px solid #2355b4;color:#ffffff;}

.tabheader{clear:both; position:relative;}
.tabheader ul{margin-bottom:4px; height:22px; border-bottom:1px solid #c0c0c0;}
.tabheader ul li{float:left; width:60px; height:18px;margin:0 5px 0 0;padding:3px 0 0 0;font-family:Jeju Gothic;font-size:13px;font-weight:normal;text-align:center;cursor:pointer;background-color:#e9e9e9; border:1px solid #c0c0c0;color:#a0a0a0;}
.tabheader ul li.on{background-color:#ffffff; border-bottom:1px solid #ffffff;color:#000000;}