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

	::selection { background:var(--theme); color:#FFF }
	::-ms-clear {  display: none; }
	::-ms-reveal {  display: none; }

	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;
		-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 center;
	}
	a,b,i,span,label,small { display:inline-block; color:inherit; text-decoration:none;  }
	b { font-weight:600 }
	html, body { width:100%; height:100%; overflow:hidden }
	body { color:#444; font-weight:300; line-height:160%; background:var(--dark) url(./Res/BgBanner.png); background-size:cover; }
	#body { width:100%; height:100%; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
 	body[xor="on"] { background-color:#FFF; }
	
	mask { 	position:fixed; 
			background:rgba(0,0,0,0.4); 
			left:0; right:0; top:0; 
			width:100%; height:100vh; padding-bottom:60px;
			overflow-x:hidden; overflow-y:auto; 
			animation:fade 0.5s ease 1 both;
	}

	dot { font-size:85%; opacity:0.5}
	sp { padding:0 0.5em }
	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;  }

	label.button { cursor:pointer; font-size:13px; border-radius:99em; height:30px; line-height:30px; color:#FFF; padding:0 1em; width:auto; font-weight:600; background-color:var(--theme); }

	header { display:block; position:fixed; top:0; left:0; right:0; transition:all 0.2s; color:#FFF }
 	header th { white-space:nowrap; font-size:120%; width:1px; padding:0 20px }
	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; }
	body[xor="on"] header { background:#FFF; color:#000; box-shadow:0 0 10px 5px rgba(0,0,0,0.2) }
	body[xor="on"] header b { color:var(--theme) }
	body[xor="on"] header i[i] i { background:var(--theme) }
	body[xor="on"] header a[pt] { color:var(--theme) }
	
	.outer { background:#FFF; padding-bottom:3em; min-height:500px; }
	.inner { width:100%; max-width:850px; padding:3vw 20px; }

	banner { display:block; padding-top:1.5em;
			/*box-shadow:0 0 999px 999px rgba(0,0,0,0.3) inset; */
			font-size:min(18px,calc(0.5vw + 12px));
			color:rgba(255,255,255,0.9); 
	}

	banner:after { content:"포인트마켓 방문을 환영 합니다 !!"; 
		font-weight:400;
		letter-spacing:1px;
		display:block;
		color:#FFF; 
		line-height:1.3em; 
		padding:0.75em; 
		text-align:center; 
		background:rgba(255,255,255,0.3); 
	}	

	banner td { padding:2.5em 0 2em 0; position:relative }
	banner td subject { display:block; color:#FFF; font-size:200%; font-weight:100; line-height:1.3em; }
	banner td message { display:block; line-height:max(1.7em, 2.2vw);  }
	banner td button, banner td label.button { margin-top:1em; background:rgba(255,255,255,0.3);  }



	body[device="mo"] banner td subject { transform-origin:0; transform:scaleX(0.7); width:142%; }
	body[device="mo"] banner td message { font-size:120%; transform-origin:0; transform:scaleX(0.7); width:142%; }
	
	.copyright { font-size:90%; display:block; line-height:1.8em; color:rgba(255,255,255,0.9); /*box-shadow:0 0 999px 999px rgba(0,0,0,0.3) inset;*/ }
	.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) } 
	.copyright hr { margin:1em 0; border-top:dotted 1px rgba(255,255,255,0.3) }
	
	body[device="mo"] .copyright p { font-size:100%; width:125%; transform-origin:0 center; transform:scaleX(0.8); }
	body[device="mo"] .copyright span { padding-right:0; transform-origin:0; transform:scaleX(0.7); }

	menu {	transition:right 0.3s;
		 	box-shadow:none !important;
		 	position:fixed; 
		 	background:#FFF; 
		 	right:-80%; top:0; 
		 	width:80%; max-width:350px; height:100vh; 
		 	overflow-x:hidden; overflow-y:auto; 	
		 	text-align:center;
		 	padding:30px min(5%, 30px);
		 	padding-bottom:60px;
	}
	body[fit="on"] menu { padding-bottom:0 }
	body[fit="on"] mask { padding-bottom:0 }
	
	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:100vh; width:100%; }

	@media screen and (max-width:700px) {
		grids > bbs > grids { grid-template-columns:1fr !important; }
	}
	@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 } 
		.hide550 { display:none }
	}
	@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); 
		background-size:20px auto; 
		background-position:0 top; 
	}
	input:checked + label { 
		color:#000;
		font-weight:500; opacity:1;
		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 }

	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 { float:right; cursor:pointer; border:0; height:3em; width:auto !important; 
				background:#FFF; min-width:80px; padding:0 1em; color:#333; 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%;  }
	grids[cols="2"] { grid-template-columns: repeat(2,1fr); }
	grids[cols="3"], grids[cols="3:2"], grids[cols="1:2"] { grid-template-columns:repeat(3,1fr); }
	grids[cols="4"] { grid-template-columns: repeat(4,1fr); }
	grids > [span="2"] { grid-column:span 2 }
	grids > [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:var(--theme); padding:0; font-weight:bold;  }
	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 var(--theme); border-collapse:collapse; text-align:left; line-height:1.4em; 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 }
	
	hr[dot] { border-top:dotted 2px #ccc; margin:1em 0; }
	bbs:last-child hr { display:none;  }
	bbs { display:block; font-weight:300;  }
	bbs h1 { font-weight:200; 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; 
	}
	

	BtTop { display:inline-block; transform:scale(0); transition:transform 0.3s ease; cursor:pointer; position:fixed; right:1em; bottom:1em; width:45px; height:45px; line-height:45px; text-align:center; border-radius:50%; background-color:rgba(0,0,0,0.3); color:#FFF; }
	BtTop:before { content:"↑"; }
	BtTop.on { transform:scale(1); }


	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 }
	
	.themecolor { color:var(--theme)}


	*[cred], .cred, cred { color: #c00 }
	*[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;  }

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