/* 공통 부분 설정 */
*{margin:0;border:0;padding:0;outline:0;line-height:1.4em;vertical-align:baseline;text-decoration:none;}
html,body{width:100%;height:100%;font-family:"나눔 고딕", "Nanum Gothic", Helvetica, Arial, Sans-serif;font-size:100%;font-size-adjust:.7;font-style:normal; font-weight:normal; color:rgb(0,0,0);}
body{min-width:200px;}
#side{background-color:rgb(140,140,202);}

a:hover{color:rgb(22,22,100); text-shadow:rgba(22,22,100,.7) 1px 1px 1px; cursor:pointer; text-decoration:underline; /* outline:10px double rgba(135,127,107,0.65); */}
ul{list-style:none;}
li{line-height:1.6em;}
li span:hover{color:rgb(22,22,100); text-shadow:rgba(22,22,100,.7) 1px 1px 1px; cursor:pointer; text-decoration:underline;}

.lft{text-align:left;} .cnt{text-align:center;} .rht{text-align:right;}

#showlist{width:40px; margin:0 auto; position:fixed; top:47%; right:10%;}
#controll{display:none; width:40px; margin:0 auto; position:fixed; top:50%; right:10%;}

/* 상 품 목 록 */
#sangpumlist{border-collapse:collapse;}
#sangpumlist th, table#sangpumlist td{padding:0.5em 0;}
#sangpumlist td{text-align:center; font-size:0.8em;}
#sangpumlist td:hover{cursor:pointer;}

/* 게시판 목록 */
#boardTable{border-collapse:collapse; font-size:0.8em;
	border-top:3px double rgb(150,150,150); border-bottom:3px double rgb(150,150,150);
}
#boardTable th, #boardTable td{padding:0.5em 0;
	border-top:1px dotted rgb(150,150,150); border-bottom:1px dotted rgb(150,150,150);
}
#boardTable td span:hover{font-weight:bold; text-decoration:underline; cursor:pointer;}
#writeBoard{text-align:left;}
#writeBoard li{padding:0.5em;}
#writeBoard textarea{width:80%; border-right:1px dotted gray; border-bottom:1px dashed gray;}
#deleteBoard{line-height:2em; background-color: gray; text-align:center;}
#reading{font-size:0.85em;}
#reading .centerPosition{text-align:center;}


/* 미디어 쿼리 */
/* 모바일 */
@media all and (max-width:480px) {
	/* 메인 레이아웃 */
	#outline{width:100%; height:auto; margin:1% 0 80px 0; position:relative;}
	#side{margin:0; padding:0; width:100%; height:auto; overflow:auto;}
	#side h1{font-size:1.5em; text-align:center;}
	#mainNavi ul{width:95%; margin:0 auto; text-align:center;}
	#mainNavi ul li{padding-left:5%; width:45%; float:left; text-align:left;}
	#mainNavi ul li ul{display:none; width:100px; height:100%; position:fixed; right:0; top:0; padding-top:35%; background-color:rgba(255,255,255,0.9); font-size:0.8em;}
	#mainNavi ul li ul li{display:block; width:100%;}
	#side dl{width:100%; height:10%; position:fixed; bottom:0; left:0; color:gray; background-color: rgb(255,255,255);}
	#side dl dt{padding-left:1%; width:24%; float:left;  font-size:0.8em;}
	#side dl dd{width:74%; float:right;  font-size:0.8em;}
	#contents{border:0px solid red;}
	#contents section{width:100%; height:auto; text-align:center;}
	#footer{width:100%; height:80px; position:fixed; left:0; bottom:0; font-size:0.7em; background-color:rgb(255,255,255);}

	/* 게 시 판 */
	#board{width:90%; margin:1em auto;}
	#deleteBoard{width:300px; height:70px; position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-150px; padding:5px; display:none;}
	#reading{width:90%; margin:1em auto; position:relative;}
	#reading fieldset{width:90%; margin-top:2em; border:1px solid gray;}
	#reading p{width:80%; margin:1.5em auto;}
	.showBorder{ border-bottom:1px dotted gray; }
}
/* 스마트 */
@media all and (min-width:481px) and (max-width:759px) {
	/* 메인 레이아웃 */
	#outline{width:98%; height:100%; margin:0 auto; padding:0; border:0;}
	#side{margin-top:10px; padding:0; width:100%; height:50px;}
	#side h1{margin:0; width:29%; height:auto; float:left; font-size:1.7em; text-align:center;}
	#mainNavi{margin:0; width:70%; height:auto; float:right; text-align:right;}
	#mainNavi ul{width:95%; margin:0 auto;}
	#mainNavi ul li{width:30%; float:left;}
	#mainNavi ul li ul{display:none; width:150px; position:absolute; left:0; top:25%; background-color:rgba(200,200,255,0.95); font-size:0.8em;}
	#mainNavi ul li ul li{display:block; width:150px; clear:both;}
	#cross{display:block; position:fixed; top:0; right:0px;}
	
/*	#footer{display:block; width:250px; height:70px; position:fixed; left:0; bottom:0; font-size:0.7em; background-color:rgb(255,255,255);} */
	#footer{display:block; font-size:0.7em; background-color:rgb(255,255,255); text-align:center; clear:both;}
	#contents{width:100%; height:auto; margin:0 0 70px 0;}
	#contents section{width:25%; height:auto; float:left; text-align:center;}
	section p{font-size:0.7em; text-align:center;} /* 나중에 공통으로 뺄 수도 있슴 */

	/* 게 시 판 */
	#boardTable{width:90%; margin:1em auto;}
	#deleteBoard{width:300px; height:70px; position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-150px; padding:5px; display:none;}
	#reading{width:90%; margin:1em auto; position:relative;}
	#reading fieldset{width:90%; margin-top:2em; border:1px solid gray;}
	#reading p{width:80%; margin:1.5em auto;}
	.showBorder{ border-bottom:1px dotted gray; }
}
/* 태블릿 */
@media all and (min-width:760px) and (max-width:999px) {
	section p{font-size:0.7em; text-align:center;} /* 나중에 공통으로 뺄 수도 있슴 */
	#outline{width:880px; height:100%; margin:0 auto; padding:0; position:relative;}
	#side{margin:0; padding:0; width:100%; height:auto;}
	#side h1{margin:0; padding:.2em 0; font-size:2.5em; text-align:center;}
	#mainNavi ul li{display:inline-block; width:15%; text-align:center; position:relative;}
	#mainNavi ul li ul{display:none; width:140px; height:auto; position:absolute; top:30px; left:10px; z-index:1;}
	#mainNavi ul li ul li{display:block; width:140px; height:auto; text-align:left; background-color:rgba(255,255,255,.9); font-size:0.8em;}
	
/*	#footer{width:250px; height:70px; position:fixed; left:50%; bottom:0; margin-left:-125px; background-color:rgba(255,255,255,0.8); z-index:1;} */
	#footer{text-align:center; clear:both;}
	#footer dl dt, #footer dl dd{padding-left:1em; font-size:.7em;}
	
	#contents{width:100%; margin:0 0 70px 0; position:relative;}
	#contents section{margin:0; padding:0; width:24%; height:100%; float:left; border-left:1px dotted gray;}
	#contents section p{width:99%;}

	/* 게 시 판 */
	#boardTable{width:80%; margin:1em auto;}
	#deleteBoard{width:300px; height:70px; position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-150px; padding:5px; display:none;}
	#reading{width:80%; margin:1em auto; position:relative;}
	#reading fieldset{width:90%; margin-top:2em; border:1px solid gray;}
	#reading p{width:80%; margin:1.5em auto;}
	#reading .showBorder{ border-bottom:1px dotted gray; }
}
/* 모니터 */
@media all and (min-width:1000px) {
	/* 메인 레이아웃 */
	#outline{width:904px; height:100%; margin:0 auto; overflow:hidden; position:relative;}
		#side{width:215px; height:100%; position:absolute; top:0; left:0;}
		#side h1{color:rgb(22,22,100); font-size:2.5em;}
			#mainNavi{margin-top:2em;}
			#mainNavi ul{margin-left:1.5em; font-size:0.9em;}
			#mainNavi ul li ul{display:none;}
		#side dl{position:absolute; bottom:1em; left:0;}
		#footer{width:215px; height:80px; position:absolute; left:0; bottom:0; font-size:0.7em;}
		#footer dl dt, article#footer dl dd{color:rgb(22,22,100);}
		#contents{margin:0; padding:0; width:686px; height:100%; position:absolute; top:0; right:0; overflow:auto;}
		#contents section{margin:0; padding:0; width:165px; height:100%; float:left; border-left:1px dotted gray;}
		#rubberSection{border:none;}
		section p{font-size:0.7em; text-align:center;} /* 나중에 공통으로 뺄 수도 있슴 */
	/* 상품 목록 */
	#sangpumlist{width:660px; margin:1em 0 0 0;}
	#sangpumlist tr td:hover{background-color:rgba(140,140,202,0.4);}
	
	
	/* 상품 설명 */
	#descript{width:680px; margin:1em 0 0 0; padding:0;}
	#descript img{float:right; padding:0.5em;}
	#detail{width:670px; margin:0 auto; border:3px double gray; clear:both; border-collapse:collapse;}
	#detail th, #detail td{padding:0.5em; font-size:0.8em; border:1px dotted gray; text-align:center;}
	/* 게 시 판 */
	#boardTable{width:670px; margin:2em auto;}
	#writeBoard{width:90%; margin:4em auto; border-top:3px double gray; border-bottom:3px double gray;}
	#reading{width:100%; position:relative;}
	#reading fieldset{width:90%; margin:10% auto; border:1px solid gray;}
	#reading p{width:80%; margin:1.5em auto;}
	.showBorder{ border-bottom:1px dotted gray; }
	#deleteBoard{width:300px; height:70px; position:absolute; top:50%; left:50%;
	margin-top:-35px; margin-left:-150px; padding:5px; display:none;}
	/* 오 링 */
	#oringList{width:90%; margin:10px auto; border-collapse:collapse; border:3px double green;}
	#oringList th, #oringList td{border:1px solid green; font-size:.9em; padding:5px; text-align:center;}
}