/* BASIC css start */
/*====================================================================*/
/******************************* header *******************************/
/*====================================================================*/

header{position:fixed; left:0; top:0; width:100%; height:42px; background:rgba(253,253,255,0.3); z-index:101; -webkit-transition:0.35s ease-in-out; -moz-transition:0.35s ease-in-out; -o-transition:0.35s ease-in-out; transition:0.35s ease-in-out;}

/* 삼선메뉴 */
header #menu{position:absolute; left:0; top:0; padding:16px; cursor:pointer;}
header #menu a{display:block; position:relative; width:14px; height:10px;}
header #menu a span{display:block; width:100%; height:1px; opacity:1; position:absolute; right:0; background:#757575; text-indent:-9999px; z-index:9999;}

/* 위치 */
header #menu a span:nth-child(1){width:100%; top:0px;}
header #menu a span:nth-child(2){width:100%; top:4px;}
header #menu a span:nth-child(3){width:100%; top:8px;}

/* 로고 */
header .logo{text-align:center;}
header .logo a{display:inline-block; font-size:18px; height:42px; line-height:42px; font-family:'Rufina', 'Jeju Myeongjo', serif; color:#454545; font-weight:300; padding:0 30px;}

/* 장바구니 */
header .cart{position:absolute; right:0; top:0; padding:11px 18px 14px; cursor:pointer;}
header .cart a{display:block; position:relative;}
header .cart a img{width:13px; height:auto;}
header .cart a > span{position:absolute; bottom:-6px; left:-6px; width:10px; height:10px; line-height:10px; text-align:center; background:#c58876; color:#fff; border-radius:50%;}
header .cart a > span strong{display:block; font-weight:300; font-size:10px; transform:scale(0.8); padding-top:1px;}


/* 카테고리박스 */
#one_cate {width:100%; padding-top:46px;}
#one_cate ul{font-size:0; line-height:0; letter-spacing:0; border-bottom:1px solid #f3f3f3; box-sizing:border-box;}
#one_cate ul li{display:inline-block; vertical-align:top; border-top:1px solid #f3f3f3; border-bottom:0; width:33.33%; box-sizing:border-box; position:relative;}
#one_cate ul li:before{content:""; position:absolute; top:11px; left:0px; width:1px; height:12px; background:#f0f0f0;}
#one_cate ul li:nth-child(3n+1):before{background:transparent;}
#one_cate ul li a{display:block; text-align:center; padding:7px 0; font-size:10px; line-height:16px; text-transform:uppercase; letter-spacing:0.3px; color:#8a7c7c}




/*====================================================================*/
/******************************** side ********************************/
/*====================================================================*/

aside{z-index:99999; position:fixed; left:-250px;top:0px; visibility:hidden; opacity:0;overflow:auto; overflow-x:hidden; width:70%; height:100%; font-size:11px; background-color:#fff; box-sizing:border-box; transition:.3s ease-in-out;}
aside a{font-size:10px; line-height:16px; letter-spacing:0.5px;}

/* 닫기 버튼 */
aside .btnClose{position:absolute; top:0; right:0; display:block; padding:13px 20px; font-size:12px;}

/* 유저영역 */
#user{padding:13px 0 13px 30px;}
#user ul{font-size:0; line-height:0; letter-spacing:0;}
#user ul li{display:inline-block; vertical-align:middle; margin-right:20px; position:relative;}
#user ul li a{font-size:10px; line-height:16px; letter-spacing:0.3px; color:#8a7c7c;}
#user ul li.xans-layout-orderbasketcount a strong{display:inline-block; font-size:10px; margin-left:5px; font-weight:600; color:#c58876; height:15px; border-bottom:1px solid #c58876; box-sizing:border-box;}

#joinpoint{position:absolute; bottom:-26px; left:-6px; background:#f5f5f5; width:52px; text-align:center; line-height:20px; border-radius:3px; font-size:10px;}
#joinpoint .tail{position:absolute; left:23px; top:-5px; border-bottom:5px solid #f5f5f5; border-right :5px solid transparent; border-left :5px solid transparent;}

aside .inner{width:100%; text-align:left; padding:10px 30px; box-sizing:border-box;}

#cate ul li:nth-child(1) a{color:#c58876 !important; font-weight:bold;}
#cate ul li:nth-child(2) a{font-weight:bold;}

/* 검색영역 */
aside .searArea{position:relative; width:100%; margin-bottom:30px;}
aside .searArea input{ background:transparent;}
aside .searArea input#keyword{width:85%; box-sizing:border-box; height:30px; line-height:30px; border-bottom:1px solid #afafaf; background:transparent;}
aside .searArea .btn i{position:absolute; top:0; right:0; font-size:14px; padding:8px;}


/* 카테고리, 게시판 목록 */
aside .inner .list{font-size:0; line-height:0; letter-spacing:0; margin-bottom:30px;}
aside .inner .list section{ vertical-align:top; width:50%; margin-top:30px; }
aside .inner .list section ul{}
aside .inner .list section ul li{position:relative; font-weight:400; line-height:20px; letter-spacing:0.3px; box-sizing:border-box; color:#747474; text-transform:uppercase;}

/* 소셜 */
#sns{}
#sns ul{}
#sns ul li{display:block; margin-bottom:4px;}
#sns ul li a{display:block; color:#7f7f7f;}
#sns ul li a span{display:inline-block; vertical-align:middle; line-height:20px; text-decoration:underline;}
#sns ul li a i{display:inline-block; vertical-align:-3px; font-size:14px; margin-right:7px;}



/* 확장 */
html.expand body{position:fixed; top:0; left:0; width:100%;}
html.expand #container{}
html.expand #btnFoldLayout{}
html.expand aside{overflow-x:hidden;visibility:visible;opacity:1;left:0;top:0;}
#mask{opacity:0;visibility:hidden;position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:9999;}
html.expand #mask {opacity:0.35;visibility:visible;}

/* 트랜지션 */

html.expand aside,
html aside,
#mask,
html.expand #mask{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;transition-delay:.13s}

/* BASIC css end */