:root{--theme:#333333}	

	@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");
	* {	font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  }
	
	::-webkit-scrollbar { width:0; height:0; } 
	::-ms-clear {  display: none; }
	::-ms-reveal {  display: none; }
	::selection { background:var(--theme); color:#FFF }

	input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration{ display:none;}
	input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }
	input::-webkit-outer-spin-button { -webkit-appearance:none; margin: 0; }
	input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; }

	input::-webkit-input-placeholder { color:#aaa; font-weight:normal; letter-spacing:0; font-size:95%;  }
	textarea::-webkit-input-placeholder { color:#aaa; font-weight:normal; letter-spacing:0; font-size:95%;  }
	input:focus::-webkit-input-placeholder { color:var(--theme); letter-spacing:0 }
	textarea:focus::-webkit-input-placeholder { color:var(--theme); letter-spacing:0 }

	* { 
		outline:0; border:0; margin:0 auto; padding:0; border-spacing:0;
		scrollbar-width:none; -ms-overflow-style:none;
		-webkit-border-radius:0; 
		-webkit-overflow-scrolling:touch; 
		-webkit-tap-highlight-color:rgba(0,0,0,0); 
		-webkit-touch-callout : none; 
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		caret-color: red;
		-webkit-appearance: none;
		resize:none; 
		box-sizing:border-box;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center;
	}
	a,b,i,span,label,small { display:inline-block; color:inherit; text-decoration:none;  }
	b { font-weight:700;  }
	html, body { width:100%; height:100%; overflow:hidden; color:#444; font-weight:300; line-height:160% }
	
	#body { width:100%; height:100vh; overflow-y:auto; }
	
	mask { 	position:fixed; 
			background:rgba(0,0,0,0.4); 
			left:0; right:0; top:0; bottom:1px;
			height:calc(100% - 1px);
			width:100%;
			overflow-x:hidden; overflow-y:auto; 
			outline:solid 1px rgba(0,0,0,0.4);
			animation:fade 0.5s ease 1 both
	}

	dot { font-size:85%; opacity:0.5}
	sp { padding:0 0.5em }
	.inner { width:100%; max-width:850px; padding:3vw 20px; }
	button { border-radius:3px; cursor:pointer; width:100%; height:45px; margin-top:-1px; padding:0 1em; font-size:100%;background-color: #389fe0; /*background-color:var(--theme);*/ color:#FFF }
	button.small, button[small] { font-size:13px; border-radius:99em; height:30px; color:#FFF; padding:0 1em; width:auto; font-weight:600; line-height:100%;  }
	button.smallsmall, button[smallsmall] { font-size:13px; font-weight:600;  border-radius:12px; height:24px; padding:0 1em; color:#FFF; width:auto;  }


	header { display:block; position:fixed; top:0; left:0; right:0; transition:all 0.2s; color:#FFF }
	header .menulist { height:50px; text-align:right; overflow:hidden }
	header .menulist > a { padding:0 1em; line-height:50px; margin-bottom:50px; font-weight:400; font-size:85%; transform-origin:center; transform:scaleY(1.25); }

	header .menulist > a.active { background:rgba(170,170,170,0.2) }
	header .menulist > a > p { display:none }
	header b { color:#FFF; cursor:pointer; width:50px; height:50px; line-height:50px; margin:1vw; text-align:center; font-size:130% }
	header i[i] { cursor:pointer; width:50px; height:50px; padding:14px; line-height:0; margin:1vw; }
	header i[i] i { background:#FFF; width:5px; height:5px; margin:3px; }
	header.xor { background:#FFF; color:#000; box-shadow:0 0 10px 5px rgba(0,0,0,0.2) }
	header.xor b { color:var(--theme) }
	header.xor i[i] i { background:var(--theme) }
	header.xor a[pt] { color:var(--theme) }

	banner { display:block; padding-top:1.5em;
			background-image:url(./Res/BgBanner.png);
			/*box-shadow:0 0 999px 999px rgba(0,0,0,0.3) inset;*/
			font-size:min(18px,calc(0.5vw + 12px));
			color:#CCC; 
			margin-bottom:1vw;
			filter: opacity(0.5) drop-shadow(0 0 0 #1920ff);
	}
	banner td { padding:2em 0; position:relative }
	banner td balance { position:absolute; right:1%; text-align:right; line-height:200%; white-space:nowrap; }
	banner td balance p { font-size:200%; color:#FFF; transform-origin:0; transform:scaleX(0.8); width:60%; }
	banner td subject { display:block; color:#FFF; font-size:200%; font-weight:100; padding:0.5em 0; line-height:1.3em; }
	banner td message { display:block; line-height:max(1.7em, 2.2vw); padding-right:40%;  }
	banner td button { margin-top:1em; background:rgba(255,255,255,0.3);  }

	.copyright { font-size:90%; display:block; line-height:1.8em; color:#ccc; /*background:#F8F9FA; */
		background-image:url(./Res/BgBanner.png); background-position:center bottom; box-shadow:0 0 999px 999px rgba(0,0,0,0.3) inset;  
		filter: opacity(0.5) drop-shadow(0 0 0 #1920ff);
	}
	.copyright img[logo] { float:left; height:75px; margin-right:1em; height:5em; filter:grayscale(1) brightness(0.7) }
	.copyright span { padding-right:2em; }
	.copyright flags img { height:3.5em; width:3.5em; margin:1em 1em 1em 0; border-radius:50%; filter:grayscale(0.5) } 

	menu {	transition:right 0.3s;
		 	box-shadow:none !important;
		 	position:fixed; 
		 	background:#FFF; 
		 	top:0; bottom:0; right:-80%;
		 	width:80%; max-width:350px; height:100%; 
		 	overflow-x:hidden; overflow-y:auto; 	
		 	text-align:center;
		 	padding:30px min(5%, 30px);
	}
	menu > close { position:absolute; right:5px; top:5px }
	menu > .menulist > a { display:block; padding:5%; font-weight:700; border-bottom:solid 1px #eee; text-align:left }
	menu > .menulist > a[pt] { color:#F78D54 }
	menu > .menulist > a.active { background:#F4F4F4 }
	menu > .menulist > a > p { color:#888; transform-origin:0; transform:scaleX(0.8); width:125%; font-weight:300 }

	menu > label { height:150px; cursor:pointer; transition:height 0.3s; line-height:90% }
	menu > label.small { position:absolute; top:10px; left:15px; height:40px; }
	body[menu="on"] menu { right:0; }

	header + div { box-shadow:none !important; transition:background 0.3s; position:fixed; left:0; top:0; }
	body[menu="on"] header + div { background:rgba(0,0,0,0.4); height:100%; width:100%; }
	
	@media screen and (min-width: 769px) {
	  *[find].temail { width:43px; background-image:url(Res/Email.svg); background-size:45%;position: absolute;left: 10px;}
	}

	@media screen and (min-width: 550px) and (max-width: 768px) {
	  *[find].temail { width:43px; background-image:url(Res/Email.svg); background-size:45%;position: absolute;left: -80px;}
	}

	@media screen and (max-width:550px) {
		grids { grid-template-columns:1fr !important; } 
		grids .nvalue { margin-top:-3em }
		grids .nvalue caption as { display:none }
		grids[cols="3:2"] { grid-template-columns:1fr 1fr !important; } 
		grids[cols="3:2"] > *:last-child { grid-column:span 2 } 
		*[find].temail { width:43px; background-image:url(Res/Email.svg); background-size:45%;position: absolute;}
	}
	@media screen and (max-width:500px) {
		*[find].temail { width:43px; background-image:url(Res/Email.svg); background-size:45%;position: absolute;}
	}
	@media screen and (max-width:450px) {
		header .menulist { display:none }
		*[find].temail { width:43px; background-image:url(Res/Email.svg); background-size:45%;position: absolute;}
	}		

	mHint { display:block;
			cursor:default; 
			color:#FFF; 
			line-height:20px; 
			background:var(--theme); 
			border-radius:4px;
			width:auto; 
			margin-top:9px; 
			position:absolute; 
			padding:13px 17px; 
			z-index:1;
	}
	mHint:before { content:"▲"; color:var(--theme); position:absolute; font-size:90%; margin-top:-15px; display:block; line-height:0; transform-origin:center; transform:scaleY(1.6);  }



	input[type="checkbox"] + label, input[type="radio"] + label { 
		opacity:0.8; cursor:pointer; font-weight:200; 
		line-height:20px; padding-left:25px; margin:20px 0;
		background-image:url(./Res/Check.svg?m); 
		background-size:20px auto; 
		background-position:0 top; 
	}
	input:checked + label { 
		font-weight:500; opacity:1; color:var(--theme); 
		background-position:0 bottom; 
	}


	input, textarea, .input { border-radius:3px; width:100%; border:solid 1px #DDD; margin-top:-1px; color:#000; background:#FFF;
		font-size:100%; height:auto; padding:11px 1em; min-height:45px; line-height:21px; 
		white-space:normal; word-break:break-all
	}
	textarea { padding:0.7em 1em }

	input:focus, textarea:focus, .input[contenteditable]:focus, .input[onclick]:active, input:active, textarea:active { border:solid 1px var(--theme); color:var(--theme); position:relative; box-shadow:none !important }
	*[disabled] { border:solid 1px #EEE !important; position:static !important; background:rgba(127,127,127,0.07);  }

	*[find] { position:absolute; right:1px; margin-top:0; padding:0 0.8em; border-radius:3px; display:inline-block;
			height:43px; min-width:43px; width:auto; background-color:rgba(0,0,0,0);
	}
	*[find].scan { width:43px; background-image:url(./Res/Scan.svg); background-size:45%; }
	*[find].qr { width:43px; background-image:url(./Res/Qrcode.svg?1111); background-size:30px; }
	*[find].copy { width:43px; background-image:url(./Res/Copy.svg); background-size:14px; }
	*[find]:active { box-shadow:none !important; margin-top:1px }
	/*20241119*/
	*[find].email { width:43px; background-image:url(Res/Email.svg); background-size:45%; }
	

	copy { background-image:url(./Res/Copy.svg?); background-size:14px; }
	copy:before { content:""; display:inline-block; width:1.5em }

	circle { text-align:center; 
		font-weight:800; 
		font-size:85%; 
		color:#FFF; 
		border-radius:2em; 
		height:1.3em; 
		min-width:1.3em; 
		line-height:1.3em;
		padding:0 0.2em;
		background:var(--theme); 
		box-shadow:0 0 0 3px var(--theme);
	}


	name { display:block; padding:1em 0 7px 0.7em; font-weight:300; color:#666; line-height:150%; font-size:110%; transform-origin:0; transform:scaleX(0.8); width:123%; }
	name::first-line { color:#333; font-weight:600;  }
	name:before { content:""; display:inline-block; width:0.3em; height:0.7em; background:var(--theme); margin-left:-0.7em; margin-right:0.4em; }
	name[top0] { padding-top:0 }

	Box { 	display:inline-block; 
			position:relative; 		
			border-radius:4px; 
			max-width:360px; 
			width:calc(100% - 20px); 
			text-align:left; 
			background:#FFF;
			margin:10px;
			box-shadow:5px 5px 5px 5px rgba(0,0,0,0.2);
			animation:zoom 0.2s ease 1 both; 
			font-size:90%;
	}
	Box close { cursor:pointer; top:10px; right:10px; }
	Box subject { 	display:inline-block; 
					border-bottom:solid 2px var(--theme); 
					color:var(--theme); 
					margin:0 0 10px 25px; 
					padding:20px 0 18px 0; 
					font-weight:bold;
					font-size:110%;
	}
	Box message { display:block; padding:10px 25px; word-break:break-all; line-height:2em;  }
	Box hr { border:0; height:0; margin:1em 0; padding:0; border-top:solid 1px #ddd }
	Box ol { padding:0.5em 1em 0 1.8em; border-top:solid 1px #ddd; margin-top:5px }
	Box ol li { padding:0.2em 0.3em }
	Box .pin i { font-style:normal; font-size:35px; margin:0 2px; line-height:100px; color:#ddd; display:inline-block; transform-origin:center center; transform:scaleY(0.3); transition:all 0.3s ease; }
	Box .pin i.on { color:#111; transform:scale(1,1); }


/*
	Box button { width:35%; float:right; border-radius:0; background-color:#888; margin-top:25px }
	Box button:first-of-type, Box button[name="load"] { width:65%; background-color:var(--theme) }
*/
	Box button { float:right; cursor:pointer; border:0; height:3em; width:auto !important; 
				background-color:#FFF !important; min-width:80px; padding:0 1em; color:#888; margin:15px 0 25px 0;
	}
	Box button:first-of-type, Box message button[name="load"] { color:var(--theme); font-weight:bold; margin-right:25px; }

	
	close { background-image:url(./Res/CloseBlack.svg?1); cursor:pointer; position:absolute; display:inline-block; width:50px; height:50px; background-size:80%; }
	close[white] { background-image:url(./Res/CloseWhite.svg) }
	clear { display:block; clear:both;}


	grids { position:relative; display:grid; column-gap:20px; grid-template-columns:1fr;
		justify-content:start; 
		align-items:end; 
	}
	grids.gvalue { align-items:start; grid-template-columns:1fr 3fr; }
	
	grids > * { width:100%;  }
	*[cols="2"] { grid-template-columns: repeat(2,1fr); }
	*[cols="3"], grids[cols="3:2"], grids[cols="1:2"] { grid-template-columns: repeat(3,1fr); }
	*[cols="4"] { grid-template-columns: repeat(4,1fr); }
	*[span="2"] { grid-column: span 2 }
	*[span="3"] { grid-column: span 3 }

	tabs { display:table; width:100%; height:3em; max-width:800px; padding:0 1em;  }
	tab { display:table-cell; width:1%;	padding-bottom:0.3em; text-align:center; vertical-align:middle; color:#FFF; 
		border-top-left-radius:5px; border-top-right-radius:5px; 
	}
	tab[no] { cursor:not-allowed; color:#888;  }
	tab[active] { background:#9ad8f1; color:#111; padding:0; font-weight:700;font-size: x-large; }
	tab[active]:active { box-shadow:none !important}
	
	
	date, date b { display:block; line-height:1.5em; white-space:nowrap; font-size:140%; font-weight:200;  }
	date button { margin:0.5em 0}

	caption, .caption { text-align:left; padding:1.4em 0 0.6em 0; font-weight:200; font-size:130%; }
	caption am, .caption am { float:right; font-weight:600; color:var(--theme) }
	am[val^="-"] { color:#b00 }

	.nvalue { width:100%; border-top:solid 2px #000; border-collapse:collapse; text-align:left; line-height:120%; font-size:calc(max(0.5vw,4px) + 10px) }
	.nvalue tr { height:2.8em; border-bottom:solid 1px #ddd; }
	.nvalue th { background:#F6F6F6; font-weight:300; padding:0.5em 15px; white-space:nowrap; width:33%;   }
	.nvalue td { background:#FFFFFF; font-weight:300; padding:0.5em 15px; white-space:normal; word-break:break-all;  }
	.nvalue td am { font-weight:600; }
	Box .nvalue { font-size:14px }

	bbs { display:block; font-weight:300;  }
	bbs hr { border-top:dotted 2px #ccc; height:1em }
	bbs:last-child hr { display:none;  }
	bbs h1 { font-weight:300; margin:0.5em 0 1em 0; line-height:1.2em}
	bbs img { border-radius:4px; max-width:100% }
	bbs a[file] { margin-bottom:1em; padding:0 0.5em  }
	bbs ext { font-weight:700; display:inline-block; background:var(--theme); color:#FFF; font-size:11px; line-height:1em; padding:6px 10px; border-radius:4px }
	bbs p { margin-bottom:2em }

	pager { display:block; visibility:hidden }
	pager th { width:41px; min-width:41px; line-height:41px; height:41px; cursor:pointer; border-radius:3em }
	pager th:active { background:#EEE;  }
	pager th.selection { background:var(--theme); color:#FFF}


	.zoom { animation:zoom 0.2s ease 1 both }
	.face { animation:face 0.3s ease 1 both }
	.spin { animation:spin 1s linear 1 both }
	@keyframes fade { 0% { opacity:0; } 100% { opacity:1;  } }
	@keyframes zoom { 0% { opacity:0; transform:scale(0.5) } 100% { opacity:1; transform:scale(1) } }
	@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } }
	.spin { background:url(./Res/Progress.svg) no-repeat center center; background-size:100%;  
			display:inline-block; width:50px; height:50px; 
	}
	



	button:active { box-shadow:0 0 88px 88px rgba(128,128,128,0.4) inset;  }
	*[onclick] { cursor:pointer }
	*[onclick]:active, Box button:active { box-shadow:0 0 88px 88px rgba(128,128,128,0.15) inset }
	


	*[border] { border:solid 1px #c00 }
	*[center], .center, center { text-align:center; }
	*[left], .left, left { float:left; }
	*[right], .right, right { float:right; }
	*[absolute], .absolute, absolute { position:absolute; }
	*[relative], .relative, relative { position:relative; }
	*[inline], .inline, inline { display:inline-block; }
	*[block], block, .block { display:block; }
	*[hidden], hidden, .hidden { visibility:hidden; }
	*[none], .none { display:none !important; }
	*[cwhite] { color:#FFF }
	*[nowrap], nowrap, .nowrap { white-space:nowrap !important; }
	*[wrap], wrap, .wrap { white-space:normal; word-break:break-all; }
	*[r], r, .r { color:#b00; }
	*[y], y, .y { color:#FF0; }
	*[w], w, .w { color:#FFF; }
	*[o], o, .o { color:#F78D54; }

	*[round], round, .round { border-radius:99em !important; }
	
	*[align="top"] { vertical-align:top !important;}
	*[align="middle"] { vertical-align:middle !important;}
	*[align="bottom"] { vertical-align:bottom !important;}
	*[align="left"] { text-align:left !important;}
	*[align="center"] { text-align:center !important;}
	*[align="right"] { text-align:right !important;}
	*[scaleX] { transform-origin:0; transform:scaleX(0.8); width:125% }

	*[fw100] { font-weight:100 !important  }
	*[fw200] { font-weight:200 !important  }
	*[fw300] { font-weight:300 !important }
	*[fw400] { font-weight:400 !important  }
	*[fw500] { font-weight:500 !important  }
	*[fw600] { font-weight:600 !important }
	*[fw700] { font-weight:700 !important  }
	*[fw800] { font-weight:800 !important  }
	*[fw900] { font-weight:900 !important  }



	input[type="pass"] { -webkit-text-security:disc !important; letter-spacing:5px !important;  }

	button, pager, *[onclick], *[click] {
		-webkit-user-select: none;
  		-moz-user-select: none;
  		-ms-user-select: none;
  		user-select: none;
  	}

/*
	.touchnone, .touchnone * { touch-action:none; overflow-y:hidden }
	.touchauto, .touchauto * { touch-action:auto !important; overflow-y:auto !important }
*/

	.whiteform { line-height:150%; color:#444; position:relative; text-align:left; background:#FFF }
	.whiteform input::-webkit-input-placeholder, .whiteform textarea::-webkit-input-placeholder { color:#000; }
	.whiteform input, .whiteform .input, .whiteform textarea { color:#444; height:3em; border-bottom:solid 1px #ddd; font-weight:bold }
	.whiteform textarea  { height:4em; padding-top:0.9em;  }
	.whiteform input[disabled], .whiteform .input[disabled], .whiteform textarea[disabled] { background:rgba(0,0,0,0.05); border-bottom:solid 1px #bbb; cursor:not-allowed !important }
	.whiteform input:focus, .whiteform textarea:focus, .whiteform .input:focus { background-color:#F8F8F8; border-color:#c00; }
	.whiteform .input { font-size:14px; word-break:break-all; height:auto; padding:0.7em 1em }
	.whiteform dot { color:rgba(0,0,0,0.6)  }
	.whiteform button { height:3.35em; }
	.whiteform input + button { color:#000 !important; font-size:90%; height:41px; }
	.whiteform button[onclick="goBack()"] { background-color:#555; display:inline-block; width:35%; float:left}
	.whiteform button[onclick="goBack()"] + button { display:inline-block; width:65%; float:left }

	/*
        .whiteform button:active { text-shadow:0 1px 1px #000000; color:rgba(0,0,0,0) !important; }
        button o { font-size:150% }
        .whiteform.blue u { color:#08A; border-color:#08A }
        .whiteform.blue button[type="button"] { background-color:#555; display:inline-block; width:35%; float:left}
        .whiteform.blue button[name="load"] { background-color:#08A; display:inline-block; width:65%; float:left }
        .whiteform.blue name:before { background-color:#08A; }
    */

	button[type="submit"] { height:3.7em }
	.zoom { display:block; width:90%; max-width:400px; margin:15px auto; background:#FFF; color:#444; animation:zoom 0.2s ease 1 both }
	@keyframes zoom {
		0% { opacity:0; transform:scale(0.5); }
		100% { opacity:1; transform:scale(1);  }
	}
	.spin {	animation:spin 2s infinite linear; background:url(res/progress.png) no-repeat center center; background-size:100%;  }
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(359deg); }
	}

	.grid { width:100%; border-top:solid 2px #888; border-collapse:collapse; margin-top:0.4em; font-size:90%; text-align:right;   }
	.grid tr { border-bottom:solid 1px #ddd; }
	.grid tr[top] { border-top:solid 2px #888; }
	.grid th { text-align:left;  height:2.8em; line-height:1.3em; padding:0.5em 1em; background:#f2f2f2; width:33%; white-space:nowrap;  }
	.grid td { height:2.8em; line-height:1.3em; padding:0.5em 0 0.5em 1em; word-break:break-all; white-space:normal }

	xBlack { cursor:pointer; position:absolute; z-index:1; right:3px; top:3px; display:inline-block; width:55px; height:55px; background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8c3ZnIHZpZXdCb3g9IjAgMCAxMDEgMTAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPGxpbmUgeDE9IjIwIiB5MT0iMjAiIHgyPSI4MCIgeTI9IjgwIiBzdHJva2U9IiM0NDQ0NDQiIC8+DQo8bGluZSB4MT0iODAiIHkxPSIyMCIgeDI9IjIwIiB5Mj0iODAiIHN0cm9rZT0iIzQ0NDQ0NCIgLz4NCjwvc3ZnPg0K) no-repeat center center;}