@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
@import url(http://fonts.googleapis.com/css?family=Ruda);

.lo_100 {width:100%; clear:both; position:relative;}

* { margin:0; padding:0; font-family:'³ª´®°íµñ', 'Nanum Gothic','µ¸¿ò', 'dotum', 'applegothic', sans-serif; -webkit-text-size-adjust:none;}
html, body	{ height:100%;font-size: 1.3em; line-height: 1.7em;}

* {margin:0; padding:0; -webkit-text-size-adjust:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,input {margin:0;padding:0;}
img, fieldset, iframe {max-width:100%; margin:0; border:0 solid transparent; vertical-align:top;}
hr, button img {border:0;}
button {border:0px;}
ul, li, ol, dl, dt, dd {margin:0; padding:0; list-style:none; display:inline;}
li img {vertical-align:middle;} /* for IE image margin */
a {text-decoration:none;}	
a, a:link, a:visited, a:hover, a:active, a:focus {text-decoration:none; color:#555555;}	
textarea {overflow:auto; font-size:1em;	padding:5px;}
html:first-child select {padding-right:6px;	height:20px;} /* Opera 9 & Below Fix */
option {padding-right:6px;} /* Firefox Fix */
legend {position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* For Screen Reader */
input, textarea, img {color:#959595; vertical-align:middle;}
table caption {display:none;}
table td {border-collapse:collapse;}
.blind {display:none;}
.clearing {clear:both;}
.radio {width:auto;	border:0;}
.line {height:1px; width:100%; background:#535353;}

body {font-size:0.75em;z-index:1; margin:0 auto;}

/* ½ºÅ©·Ñ¸Þ´º */
.gnb {position:absolute; top:0; left:0; right:0; bottom:0; padding:30px 20px; width:260px; z-index:9999; display:none; background:rgba(0,0,0,0.9);}
.gnb .scroller {float:left; height:1900px;}
.gnb nav h1 {float:left; width:100%; text-align:center;}
.gnb nav .search {float:left; margin:10px 0; width:100%; text-align:center;}
.gnb nav .search input {padding:0 5px; width:95%; height:35px; font-size:14px; color:#fff; line-height:35px; border:1px solid #bbb; background:#000 url('/m/img/btn_search.gif') no-repeat right 0;;}
.gnb nav ul {float:left; margin:0; padding:0; width:260px;}
.gnb nav ol img {width:80%; max-width:332px;}
.gnb nav li {float:left; margin:0; padding:0; list-style:none; width:260px;}
.gnb nav li a {float:left; width:240px; display:block; font-size:14px; color:#fff; font-weight:bold; line-height:40px; background:url('/m/img/gnb_arrow.png') no-repeat 220px 14px;}
.gnb nav li a.act {background:url('/m/img/gnb_arrow_on.png') no-repeat 220px 14px;}

.gnb nav li dl {float:left; padding:10px 0;}
.gnb nav li dl dd {border:0; background:none;}
.gnb nav li dl dd a {padding:0 0 0 10px; font-size:12px; color:#fffff; line-height:25px; font-weight:normal; border-bottom:1px solid #8c8686; background:none;}

/* º»¹® */
.wrap {
  position:relative;
  width:100%;
  z-index: 30;
  -webkit-transition: all 300ms cubic-bezier(0.78, 0.01, 0.8, 0.81) 0;
  -moz-transition: all 300ms cubic-bezier(0.78, 0.01, 0.8, 0.81) 0;
  -o-transition: all 300ms cubic-bezier(0.78, 0.01, 0.8, 0.81) 0;
  transition: all 300ms cubic-bezier(0.78, 0.01, 0.8, 0.81) 0;
}

/* ½ºÅ©·Ñ¸Þ´º ´Ý±â */
.blockUi {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.5);
  z-index:100;
}

/* header */
#link {float:left; width:100%; border-bottom:1px solid #bababa; background:#f1f1f1}
#link .link {text-align:center;}
#link .link a {font-size:11px color:#505050; line-height:52px; letter-spacing:-0.10em;}
#link .link span {padding:0 5px; color:#999;}
#link .t_menu {float:right; width:53px; border-left:1px solid #bababa;}

#header {float:left; width:100%; padding:15px 0; background:#fff;}
#header .top {position:relative; margin:0 auto; width:100%; max-width:640px;     }

#header .top h1 {position:relative; margin:0 auto; text-align:center; max-width:200px;} 

#header .top_btn {overflow:hidden; *zoom:1;}
#header .top_btn ul {float:left; width:100%;}
#header .top_btn li {float:left; width:19.9%;}
#header .top_btn li.btn1 {position:absolute; top:0; left:5px;}
#header .top_btn li.btn2 {position:absolute; top:0; right:5px;}

#menu {float:left; width:100%; background:#ac299f;}
#menu .menu {position:relative; margin:0 auto; width:100%; max-width:640px; clear:both; *zoom:1; overflow:hidden;}
#menu .menu ul {float:left; width:100%;}
#menu .menu li a {float:left; width:19.7%; font-size:14px; color:#fff; letter-spacing:-0.07em; line-height:40px; text-align:center; border-left:1px solid #cf8dd5;}
#menu .menu li:first-child {border-left:0;}

/* main */
#mBody {float:left; width:100%;}
#mBody .mBody {position:relative; margin:0 auto; width:100%; max-width:640px;}

#visual {float:left; width:100%;}
#visual .visual {position:relative; margin:0 auto; width:100%; max-width:640px; text-align:center; overflow:hidden;}
#visual .visual .visual-img {float:left; width:100%;}
#visual .visual .visual-img img {width:100%; max-width:640px;}
#visual .visual .visual-btn {position:absolute; left:40%; top:300px; z-index:10;}
#visual .visual .visual-btn li {display:inline-block; padding:2px; cursor:pointer;}

.mBody .bn1 {float:left; width:100%; text-align:center;}
.mBody .bn1 ul {float:left; width:100%;}
.mBody .bn1 ul li {float:left; width:100%;}

.mBody .bn2 {float:left; width:100%; text-align:center;}
.mBody .bn2 ul {float:left; width:100%;}
.mBody .bn2 ul li {float:left; width:50%;}

.itemList {float:left; padding:0 10px;}
.itemList h1 {float:left; padding:40px 0 15px 0; font-size:24px; color:#bc2020;}
.itemList ul {float:left; width:100%;}
.itemList ul li {float:left; margin:0 0 20px 10px; width:48%; letter-spacing:-0.07em;}
.itemList ul li:nth-child(2n+1) {margin-left:0;}
.itemList ul li .img {float:left; width:40%; max-width:205px; text-align:left;}
.itemList ul li .img img {width:100%; max-width:195px;}
.itemList ul li .info {float:left; margin:0 0 0 5px; width:57%; line-height:140%;}
.itemList ul li h2 {font-size:16px; color:#bc2020;}
.itemList ul li p {font-size:14px; color:#000;}
.itemList ul li h3 {font-size:14px; color:#ff4040;}

.notice-area {float:left; margin:0 0 20px 10px; width:95%;}
.notice-area h1 {float:left; font-size:14px; color:#000;}
.notice-area h1 span {padding:0 0 0 10px; font-size:12px; color:#a1a1a1; font-weight:normal;}
.notice-area h2 {float:right; font-size:12px; color:#6a6a6a;}
.notice-area ul {float:left; margin:5px 0 0 0; padding:5px 0 0 0; width:100%; border-top:1px solid #a1a1a1;}
.notice-area ul li {float:left; width:70%; font-size:12px; color:#000; line-height:160%;}
.notice-area ul li a {color:#000;}
.notice-area ul li.date {float:right; width:30%; color:#727272; text-align:right;}

#customer {float:left; padding:20px 0; width:100%;}
#customer .customer {position:relative; margin:0 auto; width:100%; max-width:640px;}
#customer .customer ul {float:left; width:100%;}
#customer .customer li {float:left; width:49.5%;}
#customer .customer li:first-child {width:50%; border-right:1px solid #bababa;}
#customer .customer li img {float:left; margin:10px 5px;}
#customer .customer li .text {float:left; margin:10px 0;}
#customer .customer li h1 {font-size:12px; color:#000; line-height:140%;}
#customer .customer li h2 {padding:10px 0 0 0; font-size:16px; color:#cc2211; line-height:140%; letter-spacing:-0.07em;}
#customer .customer li h2 a {color:#cc2211;}
#customer .customer li p {padding:10px 0 0 0; font-size:12px; color:#444; letter-spacing:-0.07em; line-height:140%; letter-spacing:-0.07em;}
#customer .customer li p.po1 {color:#000; font-weight:bold;}


/* footer */
.guide_area {float:left; width:100%; font-size:12px; color:#fff; line-height:40px; font-weight:bold; text-align:center; background:#5b1f1f;}
.guide_area a {color:#fff;}
.guide_area a:hover {color:#fff;}
.guide_area span {padding:0 10px;}

#footer {float:left; clear:both; padding:20px 0; width:100%; font-size:12px; color:#fff; line-height:140%; letter-spacing:-0.07em; text-align:center; background:#943232;}

/* sub */
#sBody {float:left; width:100%; border-top:2px solid #ea0500; border-bottom:1px solid #bababa;}
#sBody .sBody {position:relative; margin:0 auto; width:100%; max-width:640px;}

.route {float:left; width:100%; border-bottom:1px solid #ddd; background:#ebebeb;}
.route p {float:left; padding:0 0 0 10px; font-size:18px; color:#000; font-weight:bold; line-height:44px;}
.route p span {padding:0 0 0 5px; font-size:14px; font-weight:normal;}
.route ul {float:right;}
.route ul li {float:left; width:44px;}

.sort {float:left; padding:10px 0; width:100%;text-align:right;}
.sort select {margin:0 10px 0 0;}

.pageTit {float:left; width:100%; height:34px; line-height:34px; text-align:center; background:url('/m/img/product_title_bg.gif') repeat-x 0 0;}
.pageTit p {padding:0 0 0 10px; font-size:18px; color:#fff; font-weight:bold; line-height:34px;}

.category-area {float:left; margin:10px 0 0 0; width:99.5%; border:1px solid #e9e9e9; background:#f7f7f7;}
.category-area ul {float:left; margin:10px; width:94%;}
.category-area ul li {float:left; margin:0 0 0 5px; width:32%; font-size:14px; line-height:200%;}
.category-area ul li:nth-child(3n+1) {margin-left:0;}
.category-area ul li a {color:#000;}
.category-area ul li a span {padding:0 0 0 5px; font-size:12px;}

.itemList2 {float:left; padding:0 10px;}
.itemList2 h1 {float:left; padding:40px 0 15px 0; font-size:24px; color:#bc2020;}
.itemList2 ul {float:left; width:100%;}
.itemList2 ul li {float:left; margin:0 0 20px 10px; width:48%; letter-spacing:-0.07em;}
.itemList2 ul li:nth-child(2n+1) {margin-left:0;}
.itemList2 ul li .img {float:left; width:100%; text-align:center;}
.itemList2 ul li .img img {width:100%;}
.itemList2 ul li .info {float:left; margin:5px 0 0 0; width:100%; line-height:140%;}
.itemList2 ul li h2 {font-size:16px; color:#bc2020;}
.itemList2 ul li p {font-size:14px; color:#000;}
.itemList2 ul li h3 {font-size:14px; color:#ff4040;}

#contents {float:left; padding:20px 10px; text-align:center;}

.tabBtn {float:left; margin:10px 0; width:100%;}
.tabBtn ul {float:left; width:100%;}
.tabBtn ul li a {float:left; margin:0 0 2px 2px; width:30%; font-size:14px; color:#fff; line-height:37px; letter-spacing:-0.07em; text-align:center; background:#555;}
.tabBtn ul li:nth-child(3n+1) a {margin:0 0 0 10px;}
.tabBtn ul li a.act {color:#fff; font-weight:bold; background:#ea0500;}


/* view */
.itemView-area {position:relative; margin:0 auto; width:100%; max-width:640px;}
.itemView-area .item {float:left; padding:10px 0; width:100%; text-align:center;}
.itemView-area .item img {width:95%;}
.itemView-area .info {float:left; width:100%; border-top:1px solid #ddd;}
.itemView-area .info ul {float:left; width:100%; border-bottom:1px solid #ddd; background:#f8f8f8;}
.itemView-area .info ul ol {float:left; padding:10px 0 10px 5%; width:25%; font-size:14px; color:#000; font-weight:bold; line-height:140%;}
.itemView-area .info ul li {float:right; padding:10px 0; width:70%; font-size:14px; color:#333; line-height:140%;}
.itemView-area .info ul li.name {font-size:18px; color:#000; font-weight:bold;}
.itemView-area .info ul li.price {font-size:18px; color:#ff0000; font-weight:bold;}
.itemView-area .info ul li input {padding:3px 5px; width:50px; height:20px; color:#000; font-size:14px; text-align:right; border:1px solid #ddd; background:#fff;}
.itemView-area .btn {float:left; padding:20px 0; width:100%; text-align:center;}
.itemView-area .btn img {height:45px;}

.detail_tabBtn {float:left; width:100%; border-top:1px solid #ddd;}
.detail_tabBtn ul {float:left; width:100%; background:#fff;}
.detail_tabBtn ul li {float:left; width:50%;}
.detail_tabBtn ul li a {float:left; padding:15px 0; width:100%; font-size:16px; color:#000; font-weight:bold; text-align:center; border-bottom:2px solid #fff;}
.detail_tabBtn ul li a.act {color:#ff0000; border-bottom:2px solid #ff0000;}

.detail-area {float:left; margin:0 0 30px 0; width:100%;}
.detail-area dl {float:left; width:100%; border-top:1px solid #ddd;}
.detail-area dl dd {float:left; padding:10px 0; width:100%; font-size:14px;}
.detail-area dl dd .tit {float:left; padding:7px 0; width:100%; font-size:18px; color:#fff; font-weight:bold; background:#5b5b5b;}
.detail-area dl dd .tit p {padding-left:20px;}
.detail-area dl dd .table1 {border-collapse:collapse;}
.detail-area dl dd .table1 th {border:1px solid #ddd; padding:5px; width:25%; font-size:14px; color:#000; background:#f8f8f8;}
.detail-area dl dd .table1 td {border:1px solid #ddd; padding:5px; width:25%; font-size:14px; color:#000;}

.detail-area dl dd.deliver-area {padding:0;}
.detail-area dl dd.deliver-area h1 {padding:10px; font-size:18px; color:#000; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f8f8f8;}
.detail-area dl dd.deliver-area p {padding:10px; font-size:14px; line-height:160%;}
.detail-area dl dd.deliver-area .point1 {color:#dd4242;}


.gap10 {float:left; width:100%; height:10px;}
.gap20 {float:left; width:100%; height:20px;}
.gap30 {float:left; width:100%; height:30px;}
.gap40 {float:left; width:100%; height:40px;}
.gap50 {float:left; width:100%; height:50px;}
.gap60 {float:left; width:100%; height:60px;}
.gap70 {float:left; width:100%; height:70px;}
.gap80 {float:left; width:100%; height:80px;}
.gap90 {float:left; width:100%; height:90px;}
.gap100 {float:left; width:100%; height:100px;}



/** @media **/
@media all and (max-width:640px) {

#header {padding:5px 0 5px 0;}

#header .top h1 {position:relative; margin:0 auto; text-align:center; top:0; max-width:52%;} 

#header .top_btn {overflow:hidden; clear:both; *zoom:1;}
#header .top_btn li.btn1 {top:7px; max-width:13%;}
#header .top_btn li.btn2 {top:7px; max-width:13%;}
#header .top_btn li img {width:100%;}

#visual .visual .visual-btn {left:37%}
#visual .visual .visual-btn {top:200px;}
#visual .visual .visual-btn li img {width:80%;}

}


/** @media **/
@media all and (max-width:430px) {

#header .top_btn {overflow:hidden; clear:both; *zoom:1;}
#header .top_btn li.btn1 {left:10px;}
#header .top_btn li.btn2 {right:10px;}

#visual .visual .visual-btn {left:35%;}
#visual .visual .visual-btn {top:180px;}

.itemList {padding:0 10px;}
.itemList h1 {padding:20px 0 10px 0;}
.itemList ul li {margin:0 0 20px 0; width:100%;}
.itemList ul li .img {width:40%;}
.itemList ul li .info {margin:0 0 0 10px; width:57%;}
.itemList ul li h2 {font-size:18px; color:#bc2020;}
.itemList ul li p {font-size:16px; color:#000;}
.itemList ul li h3 {font-size:16px; color:#ff4040;}

.customer li {text-align:left;}
.customer li img {float:left; margin:5px 10px 0 5px; width:20px;}
.customer li .text {float:left; margin:5px 0 0 0;}
.customer li h2 {padding:3px 0 0 0;}
.customer li p {padding:3px 0 0 0;}

}