@charset "utf-8";

/* html5를 인식하지 못하는 브라우져일 경우 신규로 추가된 TAG를 정의 */
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, summary, mark, meter, output, progress, time, video { display: block }
 
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
html { font-family:"Nanum Gothic"; }

/* 상점관리 */
#wrap {position:relative;width:100%;}

#leftWrap {width:220px;position:absolute;}
#leftWrap .logo {width:100%;padding:15px 0;text-align:center;}

#leftWrap .shop_info {width:100px;height:120px;margin:20px auto;}
#leftWrap .shop_info img {border-radius:50px;}
#leftWrap .shop_info span {display:block;text-align:center;margin-top:15px;font-size:14px;}

#leftWrap .my_info {width:90%;margin:0 auto;padding:10px 10px;background:#4c4849;}
#leftWrap .my_info img {border-radius:50px;}
#leftWrap .my_info span {display:inline;text-align:center;margin-left:5px;font-size:14px;color:#fff;}
#leftWrap .info_count {list-style:none;background:#fff;}
#leftWrap .info_count li {display:inline;}
#leftWrap .info_count li a {display:inline-block;width:31.5%;padding:10px 0;font-size:14px;text-align:center;border-right:1px solid #cdcdcd;}
#leftWrap .info_count li:last-child a {border-right:0;}
#leftWrap .info_count li a span {display:block;padding-top:5px;}

#leftWrap .left_block {width:100%;margin:0 auto;padding:10px 0;border-top:1px solid #cdcdcd;font-size:16px;text-align:center;}

#leftWrap .left_block.sub_title, #leftWrap .left_block.product {display:block;width:100%;background:#ddd;color:#444;}
#leftWrap .left_block.category_area ul {list-style:none;padding:0;margin:0;}
#leftWrap .left_block.category_area ul li a {display:block;width:205px;padding:10px 0 10px 15px;border-bottom:1px solid #cdcdcd;text-align:left;}
#leftWrap .left_block.category_area ul li a:hover, #leftWrap .left_block.category_area ul li a.on {background:#007237;color:#fff;}

#leftWrap .left_block.board {list-style:none;padding:0;margin:0;margin-bottom:30px;}
#leftWrap .left_block.board li.board a {display:block;width:100%;padding:10px 0;border-bottom:1px solid #cdcdcd;background:#ddd;color:#444;}
#leftWrap .left_block.board li.board a:hover {background:#fff;color:#007237;font-weight:bold;}
#leftWrap .left_block.board li.log {padding:10px 10px;}
#leftWrap .left_block.board li.log a {display:block;padding:10px 30px;border:1px solid #cdcdcd;background:#fff;color:#444;}
#leftWrap .left_block.board li.log a:hover {background:#007237;color:#fff;font-weight:bold;}

#leftWrap ul.shop_menu {list-style:none;margin:0;padding:0;}
#leftWrap ul.shop_menu li {}
#leftWrap ul.shop_menu li a {display:block;width:100%;padding:12px;padding-left:30px;font-size:18px;}
#leftWrap ul.shop_menu li a:hover {background:#007237;color:#fff;}
#leftWrap.shopping {padding-top:20px;}


#menuWrap {width:170px;float:left;margin-top:10px;}
#menuWrap .logo {width:100%;padding:15px 0;text-align:center;}

#menuWrap .shop_info {width:100px;height:120px;margin:20px auto;}
#menuWrap .shop_info img {border-radius:50px;}
#menuWrap .shop_info span {display:block;text-align:center;margin-top:15px;font-size:12px;}

#menuWrap .my_info {margin:0 auto;padding:10px 5px;background:#4c4849;}
#menuWrap .my_info img {border-radius:50px;}
#menuWrap .my_info span {display:inline;text-align:center;margin-left:5px;font-size:13px;color:#fff;}
#menuWrap .info_count {list-style:none;background:#fff;}
#menuWrap .info_count li {display:inline;}
#menuWrap .info_count li a {display:inline-block;width:31.5%;padding:10px 0;font-size:13px;text-align:center;border-right:1px solid #cdcdcd;}
#menuWrap .info_count li:last-child a {border-right:0;}
#menuWrap .info_count li a span {display:block;padding-top:5px;}

#menuWrap .left_block {width:100%;margin:0 auto;padding:10px 0;border-top:1px solid #cdcdcd;font-size:13px;text-align:center;}

#menuWrap .left_block.sub_title, #menuWrap .left_block.product {display:block;width:100%;background:#ddd;color:#444;}
#menuWrap .left_block.category_area {padding:0;}
#menuWrap .left_block.category_area ul {list-style:none;padding:0;margin:0;}
#menuWrap .left_block.category_area ul li a {display:block;width:155px;padding:10px 0 10px 15px;border-bottom:1px solid #cdcdcd;text-align:left;background:#fff;}
#menuWrap .left_block.category_area ul li:last-child a {border-bottom:0;}
#menuWrap .left_block.category_area ul li a:hover, #menuWrap .left_block.category_area ul li a.on {background:#4c4849;color:#fff;}

#menuWrap .left_block.board {list-style:none;padding:0;margin:0;margin-bottom:30px;}
#menuWrap .left_block.board li.board a {display:block;width:100%;padding:10px 0;border-bottom:1px solid #cdcdcd;background:#ddd;color:#444;}
#menuWrap .left_block.board li.board a:hover {background:#fff;color:#007237;font-weight:bold;}
#menuWrap .left_block.board li.log {padding:10px 10px;}
#menuWrap .left_block.board li.log a {display:block;padding:10px 30px;border:1px solid #cdcdcd;background:#fff;color:#444;}
#menuWrap .left_block.board li.log a:hover {background:#007237;color:#fff;font-weight:bold;}

#menuWrap ul.shop_menu {list-style:none;margin:0;padding:0;}
#menuWrap ul.shop_menu li {}
#menuWrap ul.shop_menu li a {display:block;width:100%;padding:12px;padding-left:30px;font-size:18px;}
#menuWrap ul.shop_menu li a:hover {background:#007237;color:#fff;}


#shopWrap {max-width:1000px;/* min-height:900px; */margin:0 auto;padding:10px 5px;background:#eee;}
#shopWrap:after {display:block;visibility:hidden;clear:both;content:""}

#shopviewWrap {float:left;width:800px;padding:10px 0 0 10px;}
#shopviewWrap:after {display:block;visibility:hidden;clear:both;content:""}

#shopviewWrap .contact {margin-top:10px;padding:0 10px;padding-bottom:4px;height:38px;}
#shopviewWrap .contact .btn_wrap {width:100%;text-align:center;}
/* #shopviewWrap .contact .btn_wrap .follow {width:49%;}
#shopviewWrap .contact .btn_wrap .follow.on {background:#fff;color:#444;} */
#shopviewWrap .contact .btn_wrap .message {width:100%;background:#fe7237;color:#fff;border:1px solid #fe7237;}
#shopviewWrap .contact .btn_wrap .product {width:100%;background:#fe7237;color:#fff;border:1px solid #fe7237;}

#contentWrap {min-height:500px;/* height:100%; */}
#contentWrap:after {display:block;visibility:hidden;clear:both;content:""}

/* 상단 검색 */
.search_area {margin:0 auto;width:300px;background:#fff;display:inline-block;border:1px solid #444;border-radius:3px;text-align:right;}
.search_area .txt_keyword {/* margin-left:4px; */width:215px;background:transparent;border:0px;font-size:16px;}
.search_area .btn_search {background:#444;color:#fff;border:0px;margin:0;padding:5px 20px;font-size:16px;border-top-right-radius:3px;border-bottom-right-radius:3px;}
.btn_add {display:inline-block;background:#444;color:#fff;border:0px;margin:0 15px;padding:6px 20px;font-size:16px;border-radius:3px;}

/* 게시판 */
#contentsArea .left_menu {width:180px;margin-top:20px;padding:0;float:left;border:1px solid #cdcdcd;border-radius:10px;background:#fff;}
#contentsArea .left_menu .left_sub_tit {display:block;padding:10px 0 10px 15px;font-size:16px;font-weight:bold;color:#fff;background:#464646;border-top-left-radius:10px;border-top-right-radius:10px;}
#contentsArea .left_menu ul {margin:0;padding:0;list-style:none;}
#contentsArea .left_menu ul li a {display:block;padding:10px 0 10px 15px;border-top:1px solid #cdcdcd;background:#fff;color:#444;font-size:16px;}
#contentsArea .left_menu ul li:last-child a {border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#contentsArea .left_menu ul li a:hover, #contentsArea .left_menu ul li a.on {background:#eee;}

#contentsArea #bo_list, 
#contentsArea #bo_v, 
#contentsArea #bo_w {width:770px;margin-top:20px;margin-left:18px;padding:5px 5px;float:left;background:#fff;border:1px solid #cdcdcd;border-radius:10px;}


@media all and (min-width:995px) {    /* 화면 너비가 995px 이상이고 미디어쿼리를 지원하는 브라우저라면 아래 코드를 해석함 */
	
}

@media (max-width:995px) {  /* 이 코드는 995px 이하의 해상도에서 해석 됩니다 */ 	
	#contentsArea .left_menu {width:99%;margin:0 auto;margin-bottom:20px;}
	#contentsArea #review,
	#contentsArea #bo_list, 
	#contentsArea #bo_v, 
	#contentsArea #bo_w {width:99%;margin:0 auto;margin-top:20px;padding:5px 0;border:0;border-radius:0;background:#fff;}

	/* 공지사항 게시판 (앱용) */
	.fz_wrap .fz_header {border-bottom:0;}
	.fz_wrap .fz_footer {border-top:0;}
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_box {padding-left:0;}
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_thumb,
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_content,
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_etc .fz_gallery_etc_info,
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_etc .fz_gallery_user {display:none;}

	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_box {position:relative;}
	.fz_gallery_list .fz_gallery_li_wrap .fz_gallery_etc {position:absolute;bottom:10px;right:10px;}

	.fz_gallery_list .fz_gallery_li_wrap {background:#fff;}
	.fz_gallery_list li:hover .fz_gallery_li_wrap, .fz_gallery_list li.active .fz_gallery_li_wrap{border:1px solid #fff;border-bottom:1px solid #ccc;}
	.fz_gallery_list li:hover .fz_gallery_box, .fz_gallery_list li.active .fz_gallery_box{margin:0 10px;padding-top:10px;}
	.fz_gallery_list .fz_gallery_li_wrap {border:1px solid #fff;border-bottom:1px solid #eee;}
	#bo_v_info {padding:0 10px;line-height:24px;text-align:right;}
	body {background:#fff;} 

	#contentWrap {width:100%;}

	#menuWrap {display:none;}

	#shopWrap {width:100%;padding:10px 0;}
	#shopWrap #shopviewWrap {width:100%;padding:0;}

	#shopWrap #shopviewWrap .shop_info .shop_menu li {width:19%;}
	#shopWrap #shopviewWrap .shop_stat li {width:49%;}
} 

@media (max-width:699px) { /* 이 코드는 699px 이하의 해상도에서 해석 됩니다 */ 
	
}

@media (max-width:420px) { /* 이 코드는 699px 이하의 해상도에서 해석 됩니다 */ 

}