/* ※ */
	@charset "utf-8";
	@font-face { font-family:NotoSansKR; font-style: normal; font-weight:400; src:url(../Res/NotoSansKR400.woff) format('woff') }
	@font-face { font-family:NotoSansKR; font-style: normal; font-weight:800; src:url(../Res/NotoSansKR800.woff) format('woff') }

	::selection { background:#FF0; color:#550}
	::-moz-selection { background:#FF0; color:#550; } 
	::-ms-clear {  display: none; }
	::-ms-reveal {  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:#FFF; font-weight:normal; font-size:90% }
	input:focus::-webkit-input-placeholder { color:#000; }
	::-webkit-scrollbar { width:0; height: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; 
		word-break:keep-all;
 		overflow:hidden;
 		vertical-align:bottom;
		background-repeat: no-repeat;
		margin:0; border:0; outline:0; padding:0;
		text-decoration:none; 
		box-sizing:border-box;
		border-spacing:0;
		font-style:normal;	
	}
	html[lang="ko"] .mobile * { font-family:"Malgun Gothic", "맑은 고딕"; }
	html[lang="en"] .mobile * { font-family:"Malgun Gothic", "맑은 고딕"; }
	html[lang="ko"] .desktop * { font-family:"NotoSansKR", "Malgun Gothic", "맑은 고딕"; }
	html[lang="en"] .desktop * { font-family:"NotoSansKR", "Malgun Gothic", "맑은 고딕"; }

	html, menu > div, .mask { background-size:40%; background-repeat:repeat; background-position:center 0; /*background-image:url(Bg.png);*/ }
 	html { font-size:calc(0.6vw + 11px); overflow:hidden; width:100%; height:100%; /*box-shadow:0 0 99px 99px rgba(0,0,0,0.4) inset;*/ }
	body { color:rgba(255,255,255,0.9); overflow:hidden; line-height:1.5em; width:100%; height:100%;  }
	body > div { height:100%;  overflow-x:hidden; overflow-y:scroll }
	td, th { vertical-align:middle }
	.inner { max-width:1000px; width:90vw; margin:0 auto; position:relative }
	a,i,span,b,label,small,strong,pre { display:inline-block; }
	a { padding:0.5em 1em; color:inherit; border-radius:2.4em }
	
	input, .input, textarea { font-size:1.2rem; background:rgba(255,255,255,0.2); height:2.6em; padding:0 1em; width:100%; color:#FFF }
	textarea  { height:5em; padding-top:0.9em;  }
	input[ime] { ime-mode:disabled; }
	input[disabled], textarea[disabled] { background:rgba(0,0,0,0.2); cursor:not-allowed !important }
	input:focus, textarea:focus { background-color:rgba(255,255,255,0.8); color:#000; box-shadow:none !important; transform:translateY(0) !important; }
	input + button { position:absolute; right:0; min-width:3.13em; width:auto; background:rgba(0,0,0,0) }
	input + button:active { box-shadow:none !important; }
	input:focus + button { color:#000 } 
	input + .qr { background:url(../Res/Qr0.svg) no-repeat center center; background-size:40% }
	input:focus + .qr { background-image:url(../Res/Qr1.svg) } 
	
	input + button[text] { background:url(../Res/CopyWhite.svg) no-repeat center center; background-size:40% }
	input + button[search] { background:url(../Res/Search.svg) no-repeat center center; background-size:40% }
	
	
	.grid { width:100%; text-align:right; border-top:solid 2px #888; border-collapse:collapse; margin-top:0.4em; font-size:90%  }
	.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 1em; word-break:break-all; white-space:normal }


	.logo { font-size:2em; display:inline-block; margin:2vw 0; vertical-align:middle }
	.logo i { display:none; padding:0.5em 0.5em 0.5em 0; }
	.logo b { padding:0.5em 0.7em;  }

	close { cursor:pointer; position:absolute; z-index:1; right:5px; top:5px; display:inline-block; width:50px; height:50px; background-size:80%; background-repeat:no-repeat; background-position:center center; }
	close[white] { background-image:url(../Res/Xwhite.svg?) }
	close[black] { background-image:url(../Res/Xblack.svg?) }
	
	.arrowLeft { background:url(../Res/ArrowLeft.svg) no-repeat center center;  background-size:50% }
	.arrowRight{ background:url(../Res/ArrowRight.svg) no-repeat center center; background-size:50% }
	
	name { display:block; text-align:left; line-height:130%; padding:1.2em 0 0.3em 1em; font-weight:bold }
	name[top0] { padding-top:0 }
	name:before { content:""; display:inline-block; vertical-align:bottom; width:0.4em; height:0.8em; margin-bottom:0.2em; margin-left:-1em; margin-right:0.6em }
	gd { display:inline-block; width:0.7em; height:0.7em; margin-bottom:0.2em; margin-right:0.2em; border:solid 1px #fff; vertical-align:middle }
	
	button { font-size:1rem; height:3.13em; padding:0 1em; width:100%; cursor:pointer; color:#FFF; font-weight:bold; white-space:nowrap; }
	button[disabled] { text-shadow:1px 1px 1px rgba(255,255,255,0.8); color:rgba(0,0,0,0.5); cursor:not-allowed !important}
	
	account, .account { display:inline-block; border-radius:50%; vertical-align:middle; height:3rem; width:3rem; background-color:#CCC; background-size:102%; }

	.header { text-align:center; width:95%;}
	.pagename { display:none; text-align:center; vertical-align:middle; line-height:200%; }
	.smooth { -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease; }

	menuBt { position:fixed; display:none; top:0; right:0; width:calc(5.5vw + 28px); height:calc(5.5vw + 28px); background:url(../Res/Menu.svg) no-repeat center center; background-size:100%; z-index:1 }

	menu a { white-space:nowrap; padding:0.5em 1em; border-radius:0.4em; line-height:1.8em }
	menu a txt { display:inline-block; width:auto; font-size:11px }
	menu a txt o { display:block; font-size:30px }
	menu a hr { margin:0 auto; margin-top:4px; padding:0; height:0; width:0; border-top:dotted 2px rgba(255,255,255,0.5); -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease; }
	menu a:hover hr { width:100% }
	@media screen and (min-width:601px) {
		menu > div { background:rgba(0,0,0,0);  }
		.minvisible { display:none; }
	}
	
	.quick { text-align:center; padding-bottom:1em;  }
	.quick a { background:rgba(0,0,0,0); font-weight:normal; width:100px; padding:15px 5px; vertical-align:top; border-radius:0.5em; word-break:keep-all; white-space:normal}
	.quick a img { padding:2px; width:calc(1vw + 32px);  }
	.quick a p { font-size:70%; line-height:130%; transform-origin:0 0; transform:scaleY(1.5); margin-bottom:15px }

	.copyright { background:rgba(0,0,0,0.3); color:#EEE; font-size:75%; line-height:200%}
	.copyright hr { border-top:dotted 1px #888 }
	.copyright flags { vertical-align:middle; display:inline-block; margin-top:1em; padding-bottom:1px }
	.copyright flags img { height:40px; width:40px; margin-right:10px; border-radius:50% } 
	.copyright span { margin-right:25px;  }
	.copyright strong { font-size:1.8em; margin:0 15px 5px 0 }
	.copyright a { background:rgba(255,255,255,0.2); padding:0 0.5em; font-size:80%; border-radius:0  }
	.copyright a:after { content:"〉"; margin-left:0.5em; }


	@media screen and (max-width:600px) {
		.quick a { width:20%; }
		.minhidden { display:none; }
		.logo { font-size:1.3em;  }
		.logo i { display:inline-block;  }
		.pagename { display:inline-block; font-size:100%; font-weight:normal;  }
		menuBt { display:inline-block; }
		menu { position:fixed; z-index:2; top:0; bottom:0; left:100% }
		menu > div { max-height:100%; height:100%; overflow-y:scroll; padding-bottom:1.5em; background-size:90%; box-shadow:0 0 99px 99px rgba(0,0,0,0.4) inset;  }
		menu a { width:100%; margin:0; padding:0.5em 25px 0.3em 25px; text-align:left; border-radius:0 }
		menu a txt { font-size:100% }
		menu a txt o { display:inline-block; margin-right:10px; font-size:100% }
		menuBt.on + menu { animation:slideon 0.4s ease 1 both; }
		menuBt.off + menu { animation:slideoff 0.4s ease 1 both; }
		.header { text-align:left; }
	}
	@keyframes slideon { 
		0% { left:0; padding-left:100%; background:rgba(0,0,0,0)} 
		100% { left:0; padding-left:24%; background:rgba(0,0,0,0.5) } 
	}
	@keyframes slideoff { 
		0% { left:0; padding-left:24%; background:rgba(0,0,0,0.5) } 
		99% { left:0; padding-left:100%; background:rgba(0,0,0,0)} 
		100% { left:100%; } 
	}
	
	
	menu { box-shadow:none !important; cursor:default !important; }
	.flag { width:4em; margin:1em 1em 0 0; border-radius:50%; }
	clear, .clear, *[clear] { display:block; clear:both; }
	hr { border-top:solid 1px rgba(255,255,255,0.25); margin:1em 0}
	hr[dot] { border-top:dotted 2px rgba(255,255,255,0.6); }
	dot { color:rgba(255,255,255,0.6); font-size:85%; font-weight:normal }

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


	.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:#5A656B; display:inline-block; width:35%; float:left}
	.whiteform button[onclick="goBack()"] + button { display:inline-block; width:65%; float:right }

	.fieldset { padding:10px 20px 30px 20px }
	.fieldset field { display:inline-block }
	.fieldset field:nth-child(2n-1) { width:48%; float:left; clear:both }
	.fieldset field:nth-child(2n) { width:48%; float:right }
	.fieldset field:focus-within {   }
	.fieldset name { clear:both }
	@media screen and (max-width:500px) {
		.fieldset field:nth-child(2n-1) { display:block; width:100%; float:none }
		.fieldset field:nth-child(2n) { display:block; width:100%; float:none }
	}	

	button[type="submit"] { height:3.7em }
	
	.list { width:100%; text-align:left; margin-top:1em }
	.list th { width:22%; vertical-align:top; white-space:nowrap; padding:5px 1em 0 0; }
	.list td { color:#FFF; position:relative; vertical-align:top; }
	.list td am { position:absolute; right:0; padding:0 1em }
	.list td h4 { background:rgba(255,255,255,0.2); line-height:1.6em; padding:0.7em 1em; border-radius:5px }
	.list td list { display:block; padding:1em; line-height:2em;  }

	.table { width:100%; }
	.table th { height:3.1em; padding:0.6em 0; background:rgba(0,0,0,0.2); width:33.33% }
	.table td { height:3.0em; padding:0.6em 0; text-align:center; background:rgba(255,255,255,0.2); color:#FFF  }
	.table y { font-size:85% }
	
	dt { font-size:2em; padding-bottom:0.5em; }
	dt y { display:block; font-size:50%; font-weight:normal; color:#FFF; line-height:2.5em  }
	dt y w { color:#FFF; margin-left:0.5em; line-height:2.5em }

	#pager th { width:41px; min-width:41px; line-height:41px; height:41px; cursor:pointer; border-radius:3em }
	#pager th:hover { background:rgba(0,0,0,0.2); }
	#pager th:active { background:rgba(0,0,0,0.4) }
	#pager th.selection { background:rgba(255,99,99,0.5); }

	button.small { margin-left:0.3em; font-size:90%; width:auto; color:#FFF; height:auto; padding:0.5em 0.8em; line-height:1.5em; white-space:nowrap }
	button.smallsmall { font-size:85%; width:auto; color:#FFF; height:auto; padding:0.5em 0.8em; line-height:1em; white-space:nowrap }
	button.round { border-radius:3em }
	.rt { position:fixed; z-index:1; right:3vw; top:3vw; width:2.5em; height:2.5em; line-height:2.5em; border-radius:3em; padding:0; }
	
	u { display:inline-block; font-weight:bold; padding:1.2em 0; border-bottom:solid 2px #888; }

	
	button.sky { background:#2293B8   }
	button.green { background:#53B822   }

 	.dashboard { width:100%;  }
 	.dashboard th { text-align:right; padding:0.3em 0 0.3em 1em; }
	.dashboard name { padding-bottom:1em;  }
	.dashboard pie { display:inline-block; border-radius:50%; cursor:default }
	.dashboard pie b { color:#DD6688; font-size:140%; margin:1.2em; line-height:4.5em; width:4.5em; height:4.5em; transition:all 0.3s; display:inline-block; text-align:center; background:#FFF; border-radius:50%;  }

	name button { margin-top:-0.5em }
	form, .contentbox { box-sizing:content-box; }
	mask, mask input, mask textarea, mask button  { font-size:14px }
	demo { font-size:135%; position:fixed; display:block; padding:1em; bottom:-100%; width:100%; color:#FFF; text-align:center; opacity:0.85; transition:bottom 0.5s; }
	
	.file { width:100%; white-space:nowrap; padding-bottom:0.7em }
	.file b { text-transform:uppercase; display:inline-block; padding:0 0.6em; border-radius:0.3em; background:#FF0; color:#000; font-size:80%; font-weight:bold;;  vertical-align:middle  }
	.file a { color:#FF0; line-height:100%; width:90%; white-space:normal; word-break:break-all; border-radius:0; vertical-align:middle }
	
	.NotFound { border-radius:4px; padding:50px 0 30px 0; text-align:center; font-size:5em; font-family:SimpleLine; background:rgba(255,255,255,0.2) }
	.NotFound:after { content:"NO RESULT FOUND"; display:block; font-size:1rem; margin-top:3em  }
	
	ribbon { 	color:#FFF;font-weight:700; text-align:center; border:2px dashed #FFF;
				background:#E67; box-shadow: 0 0 0 3px #E67 !important; 
				line-height:2.6em; 
				display:block; margin:3px;
	}
	ribbon[rot] { z-index:1; position:absolute; 
		left:-50%; top:0; right:50%; transform:rotate(-45deg) translateX(0) translateY(3em);
		margin:0; line-height:2.2em; text-indent:1.5em;
	}
	ribbon[onclick]:active { text-shadow:0 1px 1px #FFF; color:rgba(0,0,0,0) !important; border:2px dashed rgba(255,255,255,0.7); }
	name, *[scale], .scale, input.scale:focus { transform-origin:0 0; transform:scale(0.7,1); letter-spacing:1px; font-size:110%; width:142.87%; }
	


	r { float:right }
	*[y], y,.y { color:#FF0 }
	*[red], red, .red { color:#C00 }
	i5 { display:block; height:0.5em; }
	*[relative], relative, .relative { position:relative }
	*[absolute], absolute, .absolute { position:absolute }
	*[fixed], fixed, .fixed { position:fixed }

	*[none], none, .none { display:none }
	*[block], block, .block { display:block }
	*[inline], inline, .inline { display:inline-block }
	*[silver], silver, .silver { color:#ccc }
	*[gray], gray, .gray { color:#888 }
	*[large], large, .large { font-size:120% }
	
	
	*[valign="top"] { vertical-align:top !important; }
	*[valign="middle"] { vertical-align:middle !important; }
	*[valign="bottom"] { vertical-bottom:middle !important; }
	*[align="left"] { text-align:left !important; }
	*[align="center"], *[center], .center, center { text-align:center !important; }
	*[align="right"] { text-align:right !important; }
	*[left], .left, left { float:left }
	*[right], .right, right { float:right }
	*[transparent], .transparent, transparent { background:rgba(0,0,0,0) }

	.absright { position:absolute; right:0; margin-top:-2.6em; }
	
	*[wrap], .wrap, wrap { white-space:normal; word-break:break-all; }
	*[nowrap], .nowrap, nowrap { white-space:nowrap;}
	*[onclick], .onclick { cursor:pointer }

	button[name="load"]:active,
	button[onclick="goBack()"]:active,
	button[onclick="goBack()"] + button:active
	 { transform:translateY(0) !important; text-shadow:0 1px 1px #FFF; color:rgba(0,0,0,0) !important }


	*[onclick]:active, 
	*[href]:active, 
	.onclick:active, 
	button:active {
		box-shadow:0 0 50px 0 rgba(0,0,0,0.2) inset;
		transform:translateY(1px);
	}




	input[type="radio"] { display:none }
	input[type="radio"] + label { cursor:pointer; line-height:1em }
	input[type="radio"] + label:before { content:""; display:inline-block; vertical-align:top; border:solid 3px #bbb; border-radius:1em; margin-left:3px; margin-right:0.5em; width:0.7em; height:0.7em; }
	input[type="radio"]:checked + label:before { border-color:#C00 }