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

header{position:fixed; left:0; top:0; width:100%; height:70px; padding:0 20px; box-sizing:border-box; background:rgba(253,253,255,1); z-index:1019;-webkit-box-shadow:3px 3px 8px 0 rgba(0,0,0,0.015);-moz-box-shadow:3px 3px 8px 0 rgba(0,0,0,0.015);-ms-box-shadow:3px 3px 8px 0 rgba(0,0,0,0.015);box-shadow:3px 3px 8px 0 rgba(0,0,0,0.015);}

/* 카테고리박스 */

#cateBox{width:100%; }
#cateBox .cate{font-size:0; line-height:0; letter-spacing:0; box-sizing:border-box;border-top: 1px solid #eee;}
#cateBox .cate li{display:inline-block; vertical-align:top;border-bottom: 1px solid #eee;width:33.33%; box-sizing:border-box; position:relative;}
#cateBox .cate li:before{content:""; position:absolute; top:0px; left:0px; width:1px; height:100%; background:#f0f0f0;}
#cateBox .cate li:nth-child(3n+1):before{background:transparent;}
#cateBox .cate li a{display: block;text-align: center;padding: 12px 0;font-size: 10px;line-height: 1;text-transform: uppercase;letter-spacing: 1px;color: #2f2f2f;}
#cateBox .cate li.active a {color:red}

#cateBox .cate.cate_point {}
#cateBox .cate.cate_point li {width:50%;border-bottom:0;}
#cateBox .cate.cate_point li a {    color: #bfa494 !important;
    font-size: 12px;
    letter-spacing: .5px;}


/* commu */
#cateBox .commu { position: relative;border-bottom: 1px solid #eee;padding: 10px 22.5px;/* background: #fbfbfb */;}
#cateBox .commu h2 { display: block;font-size: 10px;font-weight: normal;letter-spacing: 1px;text-align: center;line-height: 18px;}	
#cateBox .commu ul { display: none;position: absolute;left: 0;top: 0;top: 39px;z-index: 99;background: #fff;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cateBox .commu.active ul {display: block;}
#cateBox .commu ul li {position: relative;display: block;}
#cateBox .commu ul li a { display: block;padding: 12px 20px;border-bottom: 1px solid #eee;letter-spacing: .5px;color: #4a443e;line-height: 1;}
#cateBox .commu ul li a i { position: absolute;right: 11px;top: 9px;font-size: 15px;color: #dab9a6;}


/**************************** 좌측 ****************************/

/* 삼선메뉴 */
header #menu{display:inline-block; vertical-align:middle; padding:10px; cursor:pointer;}
header #menu a{display:block; position:relative; width:14px;}
header #menu a span{display:block; width:100%; height:1px; margin:3px 0; background:#474852; text-indent:-9999px;}

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

/* 로고 */
header > ul {display:table;width:100%;}
header .logo{vertical-align:middle; text-align:left; margin-left:5px;}
header .logo a{ display: block;font-size: 20px;line-height: 70px;color: #454545;font-weight: 800;letter-spacing:0px;font-family: 'Baloo Paaji 2','noto sans kr',cursive;}

header > ul > * {display:table-cell;vertical-align: middle;}
/**************************** 우측 ****************************/ 

/* 아이콘들 */
#rightIcon{text-align: right;}
#rightIcon > ul{font-size:0; line-height:0; letter-spacing:0;}
#rightIcon > ul > li{display:inline-block; vertical-align:middle;padding-left:4px;width:24px;text-align: center;}
#rightIcon > ul > li > a{display:block; position:relative;}
#rightIcon > ul > li > a img {width:70%;opacity: 0.66;}

#rightIcon > ul > li > a.user img{width:53%;}
#rightIcon > ul > li > a.basket img{width:72%;}
#rightIcon > ul > li > a.basket strong{position:absolute; top:-3px; right:-3px; display:none; width:4px; height:4px; border-radius:30px; background:#fa3e3e; font-size:0;}







/*====================================================================*/
/******************************* aside ********************************/
/*====================================================================*/
aside{z-index:100; position:fixed; left:0; top:50px; visibility:hidden; opacity:0; overflow:auto; overflow-x:hidden; width:100%; height:calc(100% - 70px); font-size:11px; background-color:#fff; border-top:1px solid #f5f5f5; padding:40px 40px 40px 60px; box-sizing:border-box; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
aside a{font-size:10px; line-height:16px; letter-spacing:-0.3px;}
aside.open{visibility:visible; opacity:1; top:70px;}

body.scroll aside{top:30px; height:calc(100% - 50px);}
body.scroll aside.open{top:50px;}

/* 메뉴열었을 때 스크롤되지 않게 */
html.expand body,
html.expand #wrap,
html.expand #container,
html.expand aside{overflow:hidden;}

/* 닫기 버튼 */
aside .closeArea{position:absolute; bottom:0; left:0; width:100%; text-align:center;}
aside .closeArea a{display:block; background:#5b6575; padding:20px; font-size:20px; color:#fdfdfd;}

aside .inner{width:100%; height:calc(100% - 60px); overflow:auto; text-align:left; box-sizing:border-box; position:relative;}
aside .inner::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.4);}
aside .inner::-webkit-scrollbar { width:2px;}

/* 카테고리, 게시판 목록 */
aside .list section ul{}
aside .list section ul > li{position:relative;}
aside .list section ul > li > a{display:block; font-size:14px; font-weight:500; line-height:34px; letter-spacing:-0.5px; box-sizing:border-box;}

/* 중분류 */
aside .list section ul > li .icoBookmark{display:none;}
aside .list section ul > li > ul{padding:13px; box-sizing:border-box;}
aside .list section ul > li > ul > li{}
aside .list section ul > li > ul > li > a{font-size:13px; font-weight:300; line-height:28px; letter-spacing:-0.3px}

/* 소분류는 안보이게 */
aside .list section ul > li ul li > ul{display:none;}







/**************************** 스크롤시 ****************************/
header,
header .logo a,
#rightIcon,
#one_user{-webkit-transition: 0.25s ease-in-out;-moz-transition: 0.25s ease-in-out;-o-transition: 0.25s ease-in-out;transition: 0.25s ease-in-out;}
body.scroll header{position:fixed; top:0; left:0; height:50px;}
body.scroll header .logo a{line-height:50px;}
body.scroll #rightIcon{padding:4px 0 5px}
body.scroll #one_user{top:50px; height:calc(100% - 50px); border-color:transparent;}






/*====================================================================*/
/****************************** 레이어들 ******************************/
/*====================================================================*/

/**************************** 검색 ****************************/
#one_sear{position:fixed; top:0; left:0; background:rgba(21,21,24,0.85); width:100%; height:100%; z-index:102; opacity:0; z-index:101999;visibility:hidden; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#one_sear .searBox{width:85%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:0; line-height:0; letter-spacing:0; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out;}
#one_sear.open{opacity:1; visibility:visible;}
#one_sear.open .searBox{top:43%;}

/* 검색창 */
#one_sear .searBox fieldset{}
#one_sear .searBox fieldset input,
#one_sear .searBox fieldset .btn{display:inline-block; vertical-align:bottom; font-size:18px; line-height:18px; letter-spacing:-0.3px; font-weight:400;}
#one_sear .searBox fieldset input{width:85%; margin-right:2%; height:50px; border:0; border-bottom:2px solid rgba(255,255,255,0.95); padding:5px; box-sizing:border-box; color:#fdfdfd; border-radius:0;background:transparent;}
#one_sear .searBox fieldset .btn{width:10%; color:rgba(255,255,255,0.95); padding:1%; box-sizing:border-box; font-size:20px; letter-spacing:1px; font-weight:500; text-align:center; cursor:pointer;}

/* 인기검색어 */
#one_sear .searBox ul{}
#one_sear .searBox ul li{display:inline-block; vertical-align:middle; font-size:12px; line-height:20px; letter-spacing:-0.2px; margin:0 5px 10px 0; background:rgba(255,255,255,0.08); padding:6px 10px; border-radius:5px;}
#one_sear .searBox ul li a{display:block; font-weight:200; color:#fdfdfd;}



/**************************** 마이페이지 ****************************/
#one_user{position:fixed; top:70px; right:-60%; width:60%; height:calc(100% - 70px); background:#fff; border-top:1px solid #f5f5f5; border-left:1px solid #f5f5f5; padding:35px 30px; box-sizing:border-box; z-index:101;}
#one_user.open{right:0;}
#one_user > a{display:block; font-size:18px; margin-bottom:30px;}
#one_user i.close{padding:10px; font-size:18px; position:absolute; top:25px; right:20px; cursor:pointer;}
#one_user ul{}
#one_user ul li{}
#one_user ul li a{font-size:16px; line-height:35px;}

/* 마스크 */
#one_mask{position:fixed; top:0; left:0; width:100%; height:100%; background:#444448; z-index:100; opacity:0; visibility:hidden;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
#one_mask.show{opacity:0.4; visibility:visible;}






.btn_jointop {position:relative;} 
#rightIcon > ul > li > a + div#join_box {position: absolute;z-index: 99999999;background: #bfa494;border-radius: 5px;padding: 11px 5px;width: 50px;left: -14px;top: 29px;font-size: 11px;text-align: center;color: #fff;}
#rightIcon > ul > li > a + div#join_box > * {font-size:12px;line-height:1;}
#rightIcon > ul > li > a + div#join_box .triangle {position: absolute;left: 25px;top: -6px;display: block;width: 0;height: 0;border-right: 6px solid transparent;border-bottom: 6px solid #bfa494;border-left: 6px solid transparent;}

/* BASIC css end */