:root{--theme:#BA4650}	

	@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%;  }
	input: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%; font-size:14px}
	
	#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
	}
	@keyframes fade { 0% { opacity:0; } 100% { opacity:1;  } }

	dot { font-size:85%; opacity:0.5}
	sp { padding:0 0.5em }
	.inner { width:100%; max-width:850px; padding:3vw 20px; }

	header {  background:rgba(0,0,0,0.4); 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?1);
			box-shadow:0 0 999px 999px rgba(0,0,0,0.2) inset;
			font-size:calc(0.5vw + 12px);
			color:#CCC; 
			margin-bottom:1vw;
	}
	banner td { padding:2em 0; position:relative }
	banner td balance { position:absolute; color:#FFF; text-shadow:0 0 5px #000 ;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; text-shadow:0 0 10px #000; font-size:180%; font-weight:700; line-height:2.3em; }
	banner td message { display:block; color:#FFF; text-shadow:0 0 5px #000 ; font-weight:600; line-height:max(1.7em, 2.2vw); padding-right:40%;  }
	banner td button { margin-top:1em; background:var(--theme);  }

	.copyright { font-size:90%; display:block; line-height:1.8em; background:#F8F8F8; color:#000 }
	.copyright img[logo] { float:left; height:75px; margin-right:1em; height:5em; filter:grayscale(1) brightness(0.7) }
	.copyright nowrap { 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 (max-width:550px) {
		grids { grid-template-columns:1fr !important; } 
		grids[cols="3:2"] { grid-template-columns:1fr 1fr !important; } 
		grids[cols="3:2"] > *:last-child { grid-column:span 2 } 
	}
	@media screen and (max-width:500px) {
	}
	@media screen and (max-width:450px) {
		header .menulist { display:none }
	}		

	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;
			height:43px; min-width:43px; width:auto; background-color:rgba(0,0,0,0);
	}
	*[find].scan { background-image:url(./Res/Scan.svg); background-size:45%; }
	*[find].qr { background-image:url(./Res/Qrcode.svg?1111); background-size:30px; }
	*[find].copy { background-image:url(./Res/Copy.svg); background-size:14px; }
	*[find]:active { box-shadow:none !important; margin-top:1px }

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


	button { border-radius:3px; cursor:pointer; width:100%; height:45px; margin-top:-1px; padding:0 1em; font-size:100%; 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;  }

	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 }

	.zoom { display:block; transform-origin:center center; width:90%; 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);  } 
	}

	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 }
	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: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[active] { background:#FEFEFE; color:#111; padding:0; font-weight:400 }
	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 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}















	.spin { display:inline-block; 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); } 
	}


	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; }
	*[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;  }
	
/*
	.touchnone, .touchnone * { touch-action:none; overflow-y:hidden }
	.touchauto, .touchauto * { touch-action:auto !important; overflow-y:auto !important }
*/