@charset "utf-8";
	@font-face { font-family:NotoSansKR; font-style: normal; font-weight: 400; src:url(/fonts/NotoSansKR400.woff) format('woff') }
	@font-face { font-family:NotoSansKR; font-style: normal; font-weight: 800; src:url(/fonts/NotoSansKR800.woff) format('woff') }
	@font-face { font-family:SimpleLine; src:url(/fonts/SimpleLine.woff) format('woff'); }
	o { font-family:SimpleLine !important; font-style:normal; font-weight:normal; display:inline-block; text-align:center; }

	.freeoffice, .freeoffice * { border:0; padding:0; margin:0; outline:0 }
	.PC .freeoffice, .PC .freeoffice * { font-family:"NotoSansKR", "맑은 고딕" }
	.MO .freeoffice { font-size:15px }
	
	.freeoffice button { white-space:nowrap; background-color:#0067B3; color:#FFF; height:35px; min-width:35px; padding:0 1em; line-height:1em }
	.freeoffice button:hover { box-shadow:0 0 80px rgba(0,0,0,0.3) inset; }
	.freeoffice button[type="submit"] { padding:0 2em; min-height:3.5em; width:100%; font-size:110%; height:45px }
	.freeoffice button[small] { height:25px; font-size:90% }
	.freeoffice button[smallsmall] { height:18px; font-size:85% }
	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;}
	xBlack:active { background-color:#eee}
	
	.freeoffice .title { display:inline-block; margin:20px 0; padding-bottom:10px; font-size:150%; width:auto; color:#0067B3; border-bottom:solid 2px #0067B3 }
	.freeoffice .list { width:100%; text-align:left; /*border-collapse:collapse*/ }
	.freeoffice .list th { color:#0067B3; border-bottom:solid 1px #0067B3; padding:0 10px 10px 10px;}
	.freeoffice .list td { border-bottom:solid 1px #ddd; padding:0 10px 10px 10px;}
	.freeoffice .list td[am] { text-align:right; color:#0067B3; font-weight:bold }
	.freeoffice .list .sum td { border:none !important; }
	.freeoffice .list td[colspan="999"] { height:160px; text-align:center }

	.freeoffice name { display:block; font-weight:bold; padding:1em 0 0.5em 0;; color:#0067B3 }
	.freeoffice name[top0] { padding-top:0 }
	.freeoffice input { width:100%; padding:7px 10px; height:35px; box-sizing:border-box; border:solid 1px #ddd; background-color:#FFF; color:#333 }
	.freeoffice input:focus { border:solid 1px #97C1E0; background-color:#F0F6FA; color:#0436A9 }
	.freeoffice input[readonly] { border:solid 1px #ddd; background-color:#FFFFFF; color:#000 }
	.freeoffice input[disabled] { border:solid 1px #ddd; background-color:#f4f4f4; color:#000 }
	
	.freeoffice .item { display:block; line-height:35px; white-space:nowrap; padding:0 10px; box-sizing:border-box; font-size:13.3px; font-weight:bold; color:#333 }
	.freeoffice .item:hover { background-color: #eee }

	td.pager { width:35px; height:35px; text-align:center; border:solid 1px #ddd; cursor:pointer }
	th.pager { width:35px; height:35px; text-align:center; background-color:#666; cursor:pointer; color:#FFF }
	.pager.sel { background-color:#0067B3; color:#FFF }
	.pager:hover { box-shadow:0 0 80px rgba(0,0,0,0.1) inset; }
	
	.grid { width: 100%; border-collapse:collapse; font-size:90% }
	.grid th, .grid td { padding:0.8em 1.5em; border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; line-height:1.3em }
	.grid th { background-color: #eee; text-align:left }
	.grid *[colspan="99"] { text-align:center; height:100px}
	
	.under { border-bottom:solid 2px #0067B3; color:#0067B3; display:inline-block; font-size:15px; padding-bottom:15px; margin:15px 0 5px 25px; }
	box { position:relative; width:90%; max-width:350px; text-align:left; display:inline-block; background-color:#FFF; animation:zoom 0.2s ease 1 both  }
	box input { height:45px !important; font-size:110% }
	
	@keyframes zoom { 
		0% { opacity:0; transform:scale(0.5); } 
		100% { opacity:1; transform:scale(1);  } 
	}
	.fadein { opacity:0; animation:fadein 0.2s ease 1 both }
	@keyframes fadein { 
		0% { opacity:0;  } 
		100% { opacity:1; } 
	}
	*[drop], drop, .drop { display:inline-block; padding-right:12px;
			background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjAwIDgwMCI+DQo8cG9seWdvbiBwb2ludHM9IjgwLDMzMCAxOTMsNTQwIDMwNiwzMzAiIHN0eWxlPSJmaWxsOiM2NjY2NjYiIC8+DQo8L3N2Zz4NCg==);
			background-repeat:no-repeat; background-position:right center; 
			background-size:15px }

	x { display:inline-block; height:1em; width:1em }
	*[red], red, .red { color:#c00 !important; }
	*[blue], blue, .blue { color:#0067B3 !important; }
	*[black], black, .black { color:#333 !important; }
	*[gray], gray, .gray { color:#888 !important; }
	*[orange], orange, .orange { color:#F80 !important; }

	*[right], right, .right { float:right }
	*[relative], relative, .relative { position:relative }
	*[block], block, .block { display:block }
	*[bold], bold, .bold { font-weight:bold }
	*[nowrap], nowrap, .nowrap { white-space:nowrap }
	*[onclick], onclick, .onclick { cursor:pointer }

	button[red] { background-color:#B34400; color:#FFF !important; }
	button[black] { background-color:#333; color:#FFF !important; }
	button[gray] { background-color:#888; color:#FFF !important; }
	button[green] { background-color:#0A0; color:#FFF !important; }
	button[white] { background-color:#FFF; color:#000 !important;; border:solid 1px #ccc }
	button[white]:hover { box-shadow:none; cursor:default }


	*[gc0] { color:#555 }
	*[gc1] { color:#57E }
	*[gc2] { color:#C58 }
/*
	*[grade="0"]:before { content:"★"; white-space:nowrap; color:#555 }
	*[grade="1"]:before { content:"★"; white-space:nowrap; color:#57E }
	*[grade="2"]:before { content:"★"; white-space:nowrap; color:#C58 }
*/

	*[grade="0"]:after { content:" 준회원";   font-weight:bold; white-space:nowrap; color:#777; }
	*[grade="1"]:after { content:" 일반회원"; font-weight:bold; white-space:nowrap; color:#79E; }
	*[grade="2"]:after { content:" 특별회원"; font-weight:bold; white-space:nowrap; color:#E7A;}


	.agree .scroll { height:250px; overflow-y:auto; border:solid 1px #ddd; padding:10px 20px}
	.agree input[type="checkbox"] { width:20px; margin-right:10px; }
	.agree label { color:#c00; font-weight:bold }
	.agree input[type="text"] { margin-bottom:15px }
	.MO input { height:45px; }
	.MO button[type="submit"] { height:45px; width:100% }