/* 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: 11px;line-height: 1;text-transform: uppercase;letter-spacing: 1px;color: #676563;}
#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: 11px;font-weight: normal ;letter-spacing: 1px;text-align: center;line-height: 18px; color: #676563 !important;}	
#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: #676563;}


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

/* 삼선메뉴 */
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: left;}
#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;}














/* 일반 카테고리만 색상 변경 */
#cateBox .cate:not(.cate_point) li a,
#cateBox .cate:not(.cate_point) li a:link,
#cateBox .cate:not(.cate_point) li a:visited,
#cateBox .cate:not(.cate_point) li a:hover,
#cateBox .cate:not(.cate_point) li a:focus,
#cateBox .cate:not(.cate_point) li a:active,
#cateBox .cate:not(.cate_point) li.active a {
    color: #6b625d !important;
}

/* ================================================================
   BUTINA MOBILE HEADER RENEWAL 2026-10
   기존 기능 클래스 유지, 레이아웃/소셜 아이콘만 변경
   ================================================================ */
header { padding: 0 12px; }
header > ul.butina-header-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; width: 100%; height: 100%; margin: 0; padding: 0;
  list-style: none;
}
header > ul.butina-header-row > * { display: block; }
header .logo {
  position: absolute; left: 50%; top: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%); margin: 0;
  text-align: center; white-space: nowrap; z-index: 1;
}
header .logo a, body.scroll header .logo a {
  pointer-events: auto; display: block; line-height: 1; font-family: Verdana, Arial, sans-serif;
  font-size: clamp(20px, 5.8vw, 29px); font-weight: 600;
  letter-spacing: 0.5px; color: #555;
}
/* SNS는 왼쪽, 기존 메뉴는 오른쪽: 위치는 부모 li에 지정 */
header .butina-header-row > .butina-social { order: 0; }
header .butina-header-row > .butina-left {
  order: 2; display: flex; flex: 0 0 auto;
  align-items: center; justify-content: flex-end;
  margin-left: auto; position: relative; z-index: 2;
}
#rightIcon { flex: 0 0 auto; text-align: right; padding: 0; }
#rightIcon > ul {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 5px; margin: 0; padding: 0; list-style: none;
}
#rightIcon > ul > li {
  display: block; flex: 0 0 23px; width: 23px; padding: 0;
  text-align: center; line-height: normal;
}
#rightIcon > ul > li > a {
  display: flex; width: 23px; height: 30px;
  align-items: center; justify-content: center;
}
#rightIcon > ul > li > a img { display: block; width: 19px; height: auto; opacity: .7; }
#rightIcon > ul > li > a.user img { width: 17px; }
#rightIcon > ul > li > a.basket img { width: 19px; }
header .butina-social {
  order: 0; flex: 0 0 auto; display: flex !important;
  align-items: center; justify-content: flex-start; gap: 8px;
  margin-left: 0; margin-right: auto; list-style: none;
  position: relative; z-index: 2;
}
header .butina-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px; height: 33px; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.045);
}
header .butina-social svg { display: block; width: 26px; height: 26px; }
header .butina-social .sns-youtube { background: #fff; }
header .butina-social .sns-instagram {
  background: linear-gradient(35deg, #feda75 2%, #fa7e1e 25%, #d62976 56%, #962fbf 78%, #4f5bd5 100%);
}
/* 회원가입 혜택 말풍선: 회원 아이콘 바로 아래 고정 */
#rightIcon > ul > li.btn_jointop { position: relative; }
#rightIcon > ul > li.btn_jointop > a + #join_box {
  position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
  width: 60px; box-sizing: border-box; padding: 9px 5px;
  line-height: 1.2; font-size: 11px; text-align: center;
  background: #bfa494; border-radius: 5px; color: #fff;
  z-index: 1020; white-space: nowrap;
}
#rightIcon > ul > li.btn_jointop > a + #join_box .triangle {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 6px solid transparent;
  border-right: 6px solid transparent; border-bottom: 6px solid #bfa494;
}
/* 70px -> 50px 스크롤 축소 시에도 수직 중앙 정렬 */
body.scroll #rightIcon { padding: 0; }
body.scroll #rightIcon > ul > li.btn_jointop > a + #join_box { top: 32px; }
body.scroll header .butina-social a { width: 30px; height: 30px; }
body.scroll header .butina-social svg { width: 24px; height: 24px; }
@media (max-width: 359px) {
  header { padding: 0 8px; }
  #rightIcon > ul { gap: 3px; }
  #rightIcon > ul > li { flex-basis: 21px; width: 21px; }
  #rightIcon > ul > li > a { width: 21px; }
  header .butina-social { gap: 4px; }
  header .butina-social a { width: 29px; height: 29px; }
  header .butina-social svg { width: 23px; height: 23px; }
  header .logo a, body.scroll header .logo a { font-size: 20px; }
}
/* BASIC css end */