:root{--theme:#4B6494; }
	:root{--dark: #1B273E; }

	input::-webkit-outer-spin-button { -webkit-appearance:none; margin: 0; }
	input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; }
	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; }

	.freeoffice, .freeoffice * { 
		outline:0; border:0; margin:0 auto; padding:0; border-spacing:0; box-sizing:border-box; 
	}
	* {
		-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;
		resize:none; 
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center center; scroll-behavior:smooth; 
		text-decoration:none !important;
	}
	a { color:#333 }
	a:hover { color:#000}

	.freeoffice a,
	.freeoffice b,
	.freeoffice i,
	.freeoffice span,
	.freeoffice label,
	.freeoffice small { display:inline-block; color:inherit; text-decoration:none;  }
	.freeoffice b { font-weight:600 }
	.freeoffice big,   .freeoffice .big,   .freeoffice *[big]   { font-size:110%; }
	.freeoffice small, .freeoffice .small, .freeoffice *[small] { font-size:85%; font-weight:200 !important; }
	
	html, body { width:100%; height:100%; overflow:hidden;  }

	mask, #body { width:100%; height:100%; overflow-x:hidden; overflow-y:auto;   }
	mask { 	position:fixed; left:0; right:0; top:0; bottom:0; z-index:1000; 
			background:rgba(0,0,0,0.4); 
			animation:fade 0.5s ease 1 both;
			outline:solid 1px var(--dark);
			-ms-overflow-style:none;
			scrollbar-width:none;
	}
	

	.freeoffice dot { font-size:85%; opacity:0.5}
	.freeoffice sp { padding:0 0.5em }
	.freeoffice button { border-radius:3px; cursor:pointer; width:100%; height:45px; line-height:1em; padding:0 0.5em; white-space:nowrap; font-size:100%; background-color:var(--theme); color:#FFF }
	.freeoffice button.small, 
	.freeoffice button[small] { font-size:13px; border-radius:99em; height:30px; color:#FFF; padding:0 1em; width:auto; font-weight:600; line-height:100%;  }
	.freeoffice button.smallsmall, 
	.freeoffice button[smallsmall] { font-size:13px; font-weight:600;  border-radius:12px; height:24px; padding:0 1em; color:#FFF; width:auto;  }

	@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 } 
	}
	@media screen and (max-width:500px) {
	}
	@media screen and (max-width:450px) {
	}		

	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 20px !important;  
			z-index:1;
	}
	mHint:before { content:"▲"; color:var(--theme); position:absolute; margin-top:-15px; display:block; line-height:0 !important; 
	}

	.freeoffice sbox { border-radius:3px; background:#eee; color:#000; font-size:85%; display:inline-block; padding:5px 7px 4px 7px; line-height:1em; margin-right:5px}
	.freeoffice *[bred] { background:#c00; color:#FFF; }
	.freeoffice *[bgray] { background:#888; color:#FFF; }
	
	.freeoffice input[type="checkbox"] + label, 
	.freeoffice input[type="radio"] + label { 
		opacity:0.8; cursor:pointer; font-weight:200; 
		line-height:20px; padding-left:25px; margin:20px 0;
		background-image:url(/mall/skin/Res/Check.svg); 
		background-size:20px auto; 
		background-position:0 top; 
	}
	.freeoffice input:checked + label { 
		color:#000;
		font-weight:500; opacity:1;
		background-position:0 bottom; 
	}


	.freeoffice input, 
	.freeoffice textarea, 
	.freeoffice .input { border-radius:3px; width:100%; border:solid 1px #DDD; 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
	}
	.freeoffice textarea { padding:0.7em 1em }

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

	.freeoffice *[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);
	}
	.freeoffice *[find].search { width:43px; background-image:url(/mall/skin/Res/Scan.svg); background-size:45%; }
	.freeoffice *[find].qr { width:43px; background-image:url(/mall/skin/Res/Qrcode.svg?1111); background-size:30px; }
	.freeoffice *[find].copy { width:43px; background-image:url(/mall/skin/Res/Copy.svg); background-size:14px; }
	.freeoffice *[find]:active { box-shadow:none !important; }

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

	cartqty { display:inline-block; text-align:center; background:#C00; color:#FFF; margin:0 0.5em; 
		font-weight:800; font-size:85%; 
		border-radius:99em; 
		height:1.3em; 
		line-height:1.3em;
		padding:0 6px;
	}


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

	.freeoffice Box { 	
			display:inline-block; 
			position:relative; 		
			border-radius:4px; 
			max-width:450px; 
			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%;
	}
	.freeoffice Box close { cursor:pointer; top:10px; right:10px; }
	.freeoffice 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%;
	}
	.freeoffice Box message { display:block; padding:10px 25px; word-break:break-all; line-height:2em;  }
	.freeoffice Box hr { border:0; height:0; margin:1em 0; padding:0; border-top:solid 1px #ddd }
	.freeoffice Box ol { padding:0.5em 1em 0 1.8em; border-top:solid 1px #ddd; margin-top:5px }
	.freeoffice Box ol li { padding:0.2em 0.3em; list-style-type:disc; }
	.freeoffice 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; }
	.freeoffice Box .pin i.on { color:#111; transform:scale(1,1); }
	.freeoffice 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;
	}
	.freeoffice Box button:first-of-type, 
	.freeoffice Box message button[name="load"] { color:var(--theme); font-weight:bold; margin-right:25px; }


	.freeoffice close { background-image:url(/mall/skin/Res/CloseBlack.svg?1); cursor:pointer; position:absolute; display:inline-block; width:50px; height:50px; background-size:80%; }
	.freeoffice close[white] { background-image:url(/mall/skin/Res/CloseWhite.svg) }
	.freeoffice 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 }

	.freeoffice date { padding-top:1em; font-size:110% !important;}	
	.freeoffice date, 
	.freeoffice date b { display:block; line-height:1.5em; white-space:nowrap; font-size:max(20px,min(35px,3vw)); font-weight:200;  }
	.freeoffice date button { margin:0.5em 0}




	.freeoffice caption, 
	.freeoffice .caption { display:table-caption;text-align:left; font-weight:200;  }
	.freeoffice caption am, 
	.freeoffice .caption am { float:right; font-weight:600; color:var(--theme); padding-right:0.5em }
	.freeoffice am[val^="-"] { color:#b00 }

	.freeoffice .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) }
	.freeoffice .nvalue tr { height:2.8em; border-bottom:solid 1px #ddd; }
	.freeoffice .nvalue th { background:#F6F6F6; font-weight:300; padding:0.5em 15px; white-space:nowrap; width:33%;  }
	.freeoffice .nvalue td { background:#FFFFFF; font-weight:300; padding:0.5em 15px; white-space:normal; word-break:break-all;  }
	.freeoffice .nvalue td am { font-weight:600; }
	.freeoffice Box .nvalue { font-size:14px }
	
	.freeoffice hr[dot] { border-top:dotted 2px #ccc; margin:1em 0; }

	.freeoffice pager { display:block; visibility:hidden }
	.freeoffice pager th { width:41px; min-width:41px; line-height:41px; height:41px; cursor:pointer; border-radius:3em }
	.freeoffice pager th:active { background:#EEE;  }
	.freeoffice 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; animation-iteration-count: infinite; background:url(/mall/skin/Res/Progress.svg) no-repeat center center; background-size:100%; display:inline-block; width:50px; height:50px; }
	.spin.small { width:25px; height:25px }
	@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) } }
	
	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); }

	*[onclick] { cursor:pointer }

	.freeoffice button:active { box-shadow:0 0 88px 88px rgba(128,128,128,0.4) inset;  }
	.freeoffice *[onclick]:active, 
	.freeoffice Box button:active { box-shadow:0 0 88px 88px rgba(128,128,128,0.15) inset }
	
	.freeoffice *[border] { border:solid 1px #c00 }
	.freeoffice *[center],   .freeoffice center,    .freeoffice center { text-align:center; }
	.freeoffice *[left],     .freeoffice .left,     .freeoffice left { float:left; }
	.freeoffice *[right],    .freeoffice .right,    .freeoffice right { float:right; }
	.freeoffice *[absolute], .freeoffice .absolute, .freeoffice absolute { position:absolute; }
	.freeoffice *[relative], .freeoffice .relative, .freeoffice relative { position:relative; }
	.freeoffice *[inline],   .freeoffice .inline,   .freeoffice inline { display:inline-block; }
	.freeoffice *[block],    .freeoffice block,     .freeoffice .block { display:block; }
	.freeoffice *[hidden],   .freeoffice hidden,    .freeoffice .hidden { visibility:hidden; }
	.freeoffice *[nowrap],   .freeoffice nowrap,    .freeoffice .nowrap { white-space:nowrap !important; }
	.freeoffice *[wrap],     .freeoffice wrap,      .freeoffice .wrap { white-space:normal; word-break:break-all; }
/*	.freeoffice *[round],    .freeoffice round,     .freeoffice .round { border-radius:99em !important; } */
	.freeoffice *[none],     .freeoffice .none { display:none !important; }
	.freeoffice cred, .freeoffice .cred, .freeoffice *[cred] { color:#C00; }
	
	.freeoffice *[align="top"] { vertical-align:top !important;}
	.freeoffice *[align="middle"] { vertical-align:middle !important;}
	.freeoffice *[align="bottom"] { vertical-align:bottom !important;}
	.freeoffice *[align="left"] { text-align:left !important;}
	.freeoffice *[align="center"] { text-align:center !important;}
	.freeoffice *[align="right"] { text-align:right !important;}
	.freeoffice *[scaleX] { transform-origin:0; transform:scaleX(0.8); width:125% }

	.freeoffice input[type="pass"] { -webkit-text-security:disc !important; letter-spacing:5px !important;  }
	
	not { display:block; grid-column:span 2; text-align:center; margin:5em 0 !important; }
	not:before { content:""; display:block; height:70px; background:url(/mall/skin/Res/NotFound.svg) no-repeat center center; }
	not:after { content:"결과가 하나도 없습니다"}

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

	.goods { position:relative; display:grid; 
		justify-content:start; 
		align-items:start; 
		grid-template-columns:repeat(2,1fr);
		column-gap:10px; row-gap:10px;
	}
	@media screen and (min-width:700px) {
		.goods { grid-template-columns:repeat(3,1fr); }
	}
	@media screen and (min-width:1000px) {
		.goods { grid-template-columns:repeat(4,1fr); }
	}
	@media screen and (min-width:1400px) {
		.goods { grid-template-columns:repeat(5,1fr); }
	}
	.goods item { display:block; width:100%; margin:20px 0 !important; max-width:300px; font-size:16px; cursor:pointer; }
	.goods item img { width:100%; border-radius:10px !important; }
	.goods item:active { transform:scale(0.98);  }
	.goods item div { padding:18px 5px 10px 5px !important; color:#000; }
	.goods item h2 { font-size:90%; color:#888; padding:10px 0 !important  }
	.goods item h3 { font-size:150%; color:#000;  }

	.mobilenav_top_wrap .mobilenav_category_con { scrollbar-width:none; -ms-overflow-style:none; }

	@media screen and (min-width:1282px) {
		#body { padding:0 20px; box-sizing:border-box;}
		#swipe { margin-left:-20px; margin-right:-20px; }
	}

	.board_view_wrap, .board_wrap, .board_list_wrap { max-width:1000px !important }


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