@import "sub.css";
@import "my.css";
@charset "utf-8";

body,div,p,a,ul,ol,li,dl,dt,h1,h2,h3,h4,h5,h6,table,td,tr,img,dl,dd,dt,strong,span,form{padding:0; margin:0; }
body{font-size:12px; color:#444; font-family:'굴림','gulim';}
img{border:0;}
ul,ol{list-style:none;}
a{color:#444; text-decoration:none;}
select{margin:0; padding:0; border-collapse:collapse;}
input{vertical-align:middle; margin:0; }
body{ }

h2.title{text-align:center; background:#ccc; color:#fff; height:2.5em; line-height:2.5em; font-size:1.2em; margin-top:-1px;}

a.btn{display:inline-block; border-radius:3px; padding:0 7px; line-height:1.5em; border:1px solid #eee; text-align:center; }
.btn.gray{box-shadow:0 1px 1px #eee;
/*gradient*/
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #fff 0%, #f5f5f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* IE10+ */
background: linear-gradient(to bottom, #fff 0%,#f5f5f5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
}
.btn.gray.on{background:#444; color:#fff;}
.btn.white{line-height:2em; border-color:#d4d4d4;}
.btn.white.on{background:#444; color:#fff;}
.btn.blk{background:rgba(51,51,51,0.7); color:#fff; border:0; padding:0 10px;  min-width:4em; }
.btn.blk.on{background:rgba(51,51,51,1);}
.btn.gr{background:#85c005; color:#fff;}
.btn.gr.on{background:#77a80d; }
.btn.og{background:#f67400; color:#fff;}
.btn.og.on{background:#c75e00; }
.btn.sim{background:#f1f1f1; color:#666;}
.btn.sim.on{background:#ccc; }

.btn.box{display:block; }
.btn._25{line-height:2.5em; height:2.5em; font-size:1.2em; }

div.btn_group._05{margin:0.5em;}

dl.simple_nav{background:#fff; }
dl.simple_nav dt{background:#fafafa; border-bottom:1px solid #eee; line-height:2em; color:#999; text-indent:1em;}
dl.simple_nav dd{border-bottom:1px solid #eee; line-height:2.5em; font-size:1.3em; text-indent:1em;}
dl.simple_nav dd a{display:block; padding-right:0.5em; background:url('../images/simnav_arr.png') right center no-repeat; background-size:0.7em; background-origin:content-box; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
dl.simple_nav dd a:after{display:block; content:""; clear:both; }
dl.simple_nav dd a.on{background-color:#f1f1f1;}
dl.simple_nav dd span.info{float:right; margin-right:1.5em; color:#999; font-size:0.8em;}
dl.simple_nav dd span.info strong{font-weight:normal; color:#8eb833; padding-right:3px; font-size:1.2em; }

.grad_green{background:#c5dc3b;
background: -moz-linear-gradient(top, #cee24f 0%, #b7d12a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cee24f), color-stop(100%,#b7d12a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cee24f 0%,#b7d12a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cee24f 0%,#b7d12a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cee24f 0%,#b7d12a 100%); /* IE10+ */
background: linear-gradient(to bottom, #cee24f 0%,#b7d12a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cee24f', endColorstr='#b7d12a',GradientType=0 ); /* IE6-9 */}

#Wrap{}
#Main{}
#header{font-size:1.5em; border-bottom:1px solid #eee;}
#footer{}

#header:after{display:block; clear:both; content:""; }
#header h1{float:left; font-size:1em; }
#header h1 a{display:block; text-indent:-1000px; overflow:hidden; width:5em; height:3em; background:url('../images/logo.gif') center center no-repeat; background-size:contain; }
#header div.right{float:right; margin-right:0.5em;}
#header div.right .btn{vertical-align:middle; margin-top:0.5em; text-transform:uppercase; padding:0 12px;}

/*mypage*/
#header.myheader{}
#header.myheader h1{display:none;}
#header.myheader h2{font-size:1em; line-height:2.5em; text-align:center; background:#b2b2b2; color:#fff;}
#header .btn.login{position:absolute; right:0.5em; top:0.7em; font-size:0.8em; line-height:2em;}

#header div.mem_info{padding:0.5em; }
#header div.mem_info:after{display:block; clear:both; content:""; }
#header div.mem_info dl{float:left; height:1.5em; line-height:1.5em; }
#header div.mem_info dl dt,
#header div.mem_info dl dd{display:inline-block; font-size:0.7em; color:#999;}
#header div.mem_info dl strong{font-size:1.3em; color:#333;}
#header div.mem_info dl span.shop{color:#ff5400;}
#header div.mem_info dl span.personal{color:#6fbd48;}
#header div.mem_info dl span.manager{color:#2fb1c0;}
#header div.mem_info dl dd{margin-left:5px;  }
#header div.mem_info dl dd:before{content:""; display:inline-block; height:0.8em; vertical-align:middle; width:1px; background:#ccc; margin-right:5px;}
#header div.mem_info a.btn{float:right; font-size:0.8em; line-height:2em;}

#Main div.hero{padding:0.5em 2em; position:relative; }
#Main div.hero div.img_list{position:relative; margin:0 auto; overflow:hidden;}
#Main div.hero div.img_list ul.img{}
#Main div.hero div.img_list ul.img:after{display:block; content:""; clear:both;}
#Main div.hero div.img_list ul.img li{float:left; }
#Main div.hero div.img_list ul.img li img{width:100%;}
#Main div.hero div.img_list ul.abs{position:absolute; left:0; top:0; display:none;}
#Main div.hero ul.btn_dot{position:absolute; bottom:0; width:100%; text-align:center; z-index:1;}
#Main div.hero ul.btn_dot li{display:inline-block; margin-left:2px; margin-right:2px; margin-bottom:0.5em; width:1em; height:1em; border-radius:50%; background:#fff; text-indent:-1000px; overflow:hidden;}
#Main div.hero ul.btn_dot li.on{background:#333;}

#Main div.hero div.btn{}
#Main div.hero div.btn span{display:block; position:absolute; top:50%; margin-top:-1em;  background:url('../images/prevnext.png') no-repeat; background-size:4em; width:2em; height:2em;}
#Main div.hero div.btn span.prev{background-position:left top; left:0;}
#Main div.hero div.btn span.next{background-position:-2em top; right:0;}
#Main div.hero div.btn span.prev.on{background-position:left -2em;}
#Main div.hero div.btn span.next.on{background-position:-2em -2em;}

#Main div.news{margin:0 0.5em; font-size:1.2em; border-radius:5px; border:1px solid #eee; height:2.5em; line-height:2.5em; position:relative; padding-left:5em; box-shadow:0 1px 0 #f1f1f1; overflow:hidden;}
#Main div.news h1{font-size:1em; position:absolute; left:0; top:0; width:4em; background:url('../images/ico_arr.png') right center no-repeat; background-size:contain;}
#Main div.news h1 a{display:block; text-indent:-1000px; padding:0.5em 1.25em 0.5em 0.75em; height:1.5em; overflow:hidden; background:url('../images/ico_news.png') left center no-repeat; background-size:contain; background-origin:content-box;}
#Main div.news ul.titles{margin-top:-2.5em;}
#Main div.news ul.titles li{}
#Main div.news ul.titles li a{display:block; line-height:2.5em; }

#Main div.main_con{font-size:1.2em; margin:0.5em 0.5em; position:relative;}
#Main div.main_con div.search{position:absolute; left:0; top:0; width:50%; height:10em; background:#d99c53 url('../images/search_bg.jpg') left top no-repeat; background-size:cover; border-radius:5px; font-size:1em; }
#Main div.main_con div.search dl{padding:1em;}
#Main div.main_con div.search dl dt{color:#333; font-size:1.5em; font-weight:bold;}
#Main div.main_con div.search dl dd{opacity:0.7; color:#4b3838;}
#Main div.main_con div.search div.search_wrap{position:relative; padding-right:2.5em; height:2em; margin:0.5em;}
#Main div.main_con div.search div.search_wrap input{width:100%; border-radius:3px; border:1px solid #eee; background:rgba(255,255,255,0.8); height:2em; line-height:2em; font-size:1em; text-indent:5px; padding:0; margin:0; }
#Main div.main_con div.search div.search_wrap .zoom{position:absolute; right:-2px; top:-2px; width:2em; height:2em; background:url('../images/btn_zoom.png') center center no-repeat; background-size:contain; border:0; text-indent:-1000px; overflow:hidden; font-size:1.2em;}

#Main div.main_con div.nav{}
#Main div.main_con div.nav ul.menu{}
#Main div.main_con div.nav ul.menu:after{display:block; content:""; clear:both; }
#Main div.main_con div.nav ul.menu li a{display:block; border:1px solid #d4d4d4; text-indent:1em; border-radius:5px; margin-left:0.2em; background:#ffffff; position:relative;
background: -moz-linear-gradient(top, #fff 0%, #f5f5f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff 0%,#f5f5f5 100%); /* IE10+ */
background: linear-gradient(to bottom, #fff 0%,#f5f5f5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
}
#Main div.main_con div.nav ul.menu li a.on{background:#fff;}
#Main div.main_con div.nav ul.menu li:nth-child(1),
#Main div.main_con div.nav ul.menu li:nth-child(2){margin-left:50%;}
#Main div.main_con div.nav ul.menu li:nth-child(1) a{height:2em; line-height:2em; padding-top:3.5em;}
#Main div.main_con div.nav ul.menu li:nth-child(2) a{height:2em; line-height:2em; padding-top:2em; margin-top:0.2em;}
#Main div.main_con div.nav ul.menu li:not(:nth-child(1)):not(:nth-child(2)){float:left; width:25%; margin-top:0.2em;}
#Main div.main_con div.nav ul.menu li:not(:nth-child(1)):not(:nth-child(2)) a{height:2em; padding-top:3em;}
#Main div.main_con div.nav ul.menu li:nth-child(3) a{margin-left:0;}
#Main div.main_con div.nav ul.menu li a span{display:block; font-size:1em; position:absolute; left:0; bottom:0; height:2em; line-height:2em; z-index:1; }

#Main div.main_con div.nav ul.menu li a:after{display:block; position:absolute; left:0; top:0; width:100%; height:100%; content:""; border-radius:5px; background:center center no-repeat; background-size:cover; }
#Main div.main_con div.nav ul.menu li a.items:after{background-image:url('../images/bg_items.png');}
#Main div.main_con div.nav ul.menu li a.bargain:after{background-image:url('../images/bg_bargain.png');}
#Main div.main_con div.nav ul.menu li a.grbuy:after{background-image:url('../images/bg_grpur.png');}
#Main div.main_con div.nav ul.menu li a.recipe:after{background-image:url('../images/bg_recipe.png');}
#Main div.main_con div.nav ul.menu li a.news:after{background-image:url('../images/bg_news.png');}
#Main div.main_con div.nav ul.menu li a.wanted:after{background-image:url('../images/bg_wanted.png');}
#Main div.main_con div.nav ul.menu li a.useinfo:after{background-image:url('../images/bg_info.png');}

#Main+#footer{margin-top:0.5em; }
#footer{clear:both;border-top:1px solid #eee; }
#footer div.nav{margin:0 1em; padding:0.5em 0;}
#footer div.nav span.tel{display:inline-block; padding-left:1em; background:url('../images/ico_tel.png') left center no-repeat; background-size:0.5em;}
#footer div.nav a.right{float:right;}
#footer div.copy{background:#444;}
#footer div.copy ul.address{color:#eee; line-height:1.5; padding:0.5em 1em; }

/*페이져 -- 공통*/
div.pager{width:160px; margin:0 auto; padding:30px 0; position:relative; zoom:1;}
div.pager:after{display:block; clear:both; content:""; }
div.pager a.arr{position:absolute; top:30px; width:1em; height:1em; overflow:hidden; text-indent:-1000px; background:url('../images/pager.png') left top no-repeat; background-size:4em 2em; font-size:2em;}
div.pager a.arr.off{cursor:default;}
div.pager a.arr.prev{background-position:-1em -1em; left:-2em;}
div.pager a.arr.next{background-position:-2em -1em; right:-2em;}
div.pager a.arr.first{background-position:left -1em; left:-4em;}
div.pager a.arr.last{background-position:-3em -1em; right:-4em;}
div.pager a.arr.prev.off, div.pager a.arr.prev.off:hover{background-position:-1em top;}
div.pager a.arr.next.off, div.pager a.arr.next.off:hover{background-position:-2em top;}
div.pager a.arr.first.off, div.pager a.arr.first.off:hover{background-position:left top;}
div.pager a.arr.last.off, div.pager a.arr.last.off:hover{background-position:-3em top;}

div.pager ol.page{padding:2px 0; text-align:center;}
div.pager ol.page li{float:left;  vertical-align:middle;  width:2em; height:2em; margin:0 2px; padding:0; border-radius:3px; border:1px solid #ddd;}
div.pager ol.page li.cur{padding:0; color:#fff; background:#aad255; border-color:#aad255; }
div.pager ol.page li a{display:inline-block; width:2em; color:#999; font-weight:bold; text-align:center; line-height:2em; height:2em; }
div.pager ol.page li.cur a, div.pager ol.page li.cur a:hover{color:#fff;  }
div.pager ol.page li a:hover{color:#ff6600; }


/*카테고리*/
div.cate_nav{}
div.cate_nav a{display:block; -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;}
div.cate_nav a.on{background-color:#f1f1f1; }
div.cate_nav ul.nav{border-bottom:1px solid #eee;}
div.cate_nav li{border-top:1px solid #eee;}
div.cate_nav ul.nav>li{}
div.cate_nav ul.nav>li>a{color:#999; background:#fafafa; line-height:2em; padding:0 1em;}
div.cate_nav ul.nav ul.snav>li ul.dnav{display:none;}
div.cate_nav ul.nav ul.snav>li.open ul.dnav{display:block;}
div.cate_nav ul.nav ul.snav>li{position:relative;}
div.cate_nav ul.nav ul.snav>li>a{padding:0.5em 1em; color:#333; padding-right:3em; position:relative; font-size:1.2em; line-height:1.5em;}
div.cate_nav ul.nav ul.snav>li span.arr{position:absolute; right:0; top:0; width:3em; height:3em; cursor:pointer; z-index:1;
-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
div.cate_nav ul.nav ul.snav>li>a:after{content:""; display:block; position:absolute; right:1em; top:0.5em; width:1.5em; height:1.5em; background:url('../images/ico_arrup2.png') center center no-repeat; background-size:1.5em; background-origin:content-box;}
div.cate_nav ul.nav ul.snav>li.open>a:after{background-image:url('../images/ico_arrdwn.png');}
div.cate_nav ul.nav ul.dnav>li>a{padding:0.5em 2em; padding-right:3em; font-size:1.1em; line-height:1.5em; color:#666; position:relative; }
div.cate_nav ul.nav ul.dnav>li>a:after{content:""; display:block; position:absolute; right:1em; top:0.5em; width:1.5em; height:1.5em; background:url('../images/simnav_arr.png') center center no-repeat; background-size:1em; background-origin:content-box;}