/* BASIC css start */
/* BASIC css start */

#overlay_layer, #fix_left { display: none !important; }

header { position:fixed; top: 0px;left: 0px;z-index: 12;width: 100%;}
header *,
header.active * {-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}

header.active { background-color: rgba(255, 255, 255, 0.8); }
header > ul {max-width:1615px;margin:0 auto;line-height:50px;display:table;width:100%;table-layout:fixed;}
header > ul > li > a {line-height:50px;}
header > ul > * {display: table-cell;font-size:12px;line-height:50px;vertical-align: middle;}	
header > ul > *:first-child {width:20px;}

/* 가입포인트 */

.btn_jointop {position:relative;} 
#join_box {position: absolute;z-index: 99;background: #c7b397;color: #fff;border-radius: 5px;padding: 2px 5px;letter-spacing: 1px;width: 50px;left: 20px;top: 30px;font-size: 11px;text-align: center;}
.triangle {position: absolute;left: calc(50% - 6px);top: -4px;border-bottom: 6px solid #c7b397;display: block;width: 0;height: 0;border-right: 6px solid transparent;border-left: 6px solid transparent;}


header h1 {display:block;text-align:Center;padding:15px 0 30px;}
header h1 a { letter-spacing: 2px;font-family: 'Chonburi',맑은 고딕,cursive;font-size: 28px;font-weight: 500;color: #403b2c;}
header h1 a img { width: 140px; }
header.active h1 {display:none;;padding:0 0 0;;}
header.active h1 img {height:60px;}

header #one_cate{width: auto;text-align:center;}
header #one_cate .position > ul > li {position:relative;display:inline-block;}
header #one_cate .position > ul > li > a {position:relative;font-size: 11px;font-family:Lato;font-weight: 400;display: block;text-align: center;letter-spacing: 0.8px;line-height:50px;padding:0 17px;}
header #one_cate .position > ul > li > a > span {display:none;position:absolute;left:0;top:0;width:100%;text-align:center;background:#fff;letter-spacing:0;}
/* 포인트 */
header #one_cate .position > ul > li:nth-child(1) > a,
header #one_cate .position > ul > li:nth-child(2) > a,
header #one_cate .position > ul > li:nth-child(3) > a{color:#894747}

header #one_cate .position > ul > li:hover > a > span {display:block;}


header #one_cate .position > ul > li .sub-category {position:absolute;top:50px;left:50%;transform:translateX(-50%);;background:#fff;z-index:9999;box-sizing:border-box;min-width:100px;padding:10px;width:min-content;opacity:0;visibility:hidden;}
header #one_cate .position > ul > li:hover .sub-category {opacity:1;visibility:visible;}
header #one_cate .position > ul > li .sub-category ul li a {line-height:25px;display:block;font-size:12px}

header #one_user {position: relative;text-align: right;width: 150px;line-height: 18px;box-sizing: border-box;height: 50px;}
header #one_user > .members,
header #one_user > a {position: relative;display: inline-block;padding: 0 5px;color: #423d3a;line-height: 18px;}
header #one_user > .members i,
header #one_user > a i {font-size:18px;}
header #one_user > a.cart {padding-right:20px;}
header #one_user > a > span {position:absolute;left:24px;top:0;}
header #one_user .members .subMenu {position: absolute;left: -48px;	top:26px;width: 128px;background: #fff;box-sizing: border-box;padding: 11px;text-align: center;border-radius: 0 0 10px 10px;opacity: 0;visibility: hidden;z-index:9999}
header #one_user .members .subMenu li {display:block;text-align:center;line-height:23px;}
header #one_user .members:hover .subMenu {opacity:1;visibility:visible;;}
header #one_cate .position > ul > li:nth-child(3) > a {color: #b20f0f; }
header #one_cate .position > ul > li:nth-child(4) > a {color: #81724A;font-weight:bold;}
header #one_cate .position > ul > li:nth-child(4):hover > a {;font-weight:bold;}}
/* BASIC css end */


/* 20240829 */
.header_20240829 {}
.header_20240829 .logo { display: inline-block; width: 100%; text-align: center;  padding: 15px 0px; }
.header_20240829 .logo img { width: 140px; }
.header_20240829 .menu-icon { position: absolute; cursor: pointer; width: 20px; height: 15px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; left: 50px; top: 50%; margin-top: 5px; z-index:10; }
.header_20240829 .menu-icon div { width: 20px; height: 1px; background-color: #333; transition: all 0.3s ease; }
.header_20240829 .menu-icon.change .bar1 { transform: rotate(45deg) translate(8px, 4px);  /* 각도를 45도로 하고, translate를 조정하여 중앙 정렬 */ }
.header_20240829 .menu-icon.change .bar2 { opacity: 0; }
.header_20240829 .menu-icon.change .bar3 { transform: rotate(-45deg) translate(5px, -2px); /* 각도를 -45도로 하고, translate를 조정하여 중앙 정렬 */ }

.header_20240829 .slide-layer { width: 300px; height: 100vh; background-color: #ffffff; position: fixed; top: 0; left: -300px; /* 기본적으로 화면 밖에 위치 */ transition: left 0.3s ease; /* 슬라이드 애니메이션 */ z-index: 2; }
.header_20240829 .slide-layer.show { left: 0; /* 레이어가 화면 안으로 슬라이드 */ }
.header_20240829 .menu { padding: 120px 50px 0px 50px; }
.header_20240829 .menu > ul > li { margin-bottom: 50px;}
.header_20240829 .menu > ul > li:last-child { margin-bottom: 0px;}
.header_20240829 .menu > ul > li > a { font-size: 12px; color:#343434; font-weight: bolder; }
.header_20240829 .menu > ul > li.grey > a { color:#7a7256;}
.header_20240829 .menu .sub_menu { display: none; padding-top: 10px; }
.header_20240829 .menu .sub_menu > ul > li { margin-bottom: 15px; }
.header_20240829 .menu .sub_menu > ul > li:last-child { margin-bottom: 0px; }
.header_20240829 .menu .sub_menu > ul > li > a { font-size: 13px; }


.header_20240829 .member { position: absolute; right: 50px; top: 50%; margin-top: 0px; }
.header_20240829 .member a { display: inline-block; margin-right: 20px;}
.header_20240829 .member a:last-child { margin-right: 0px; }
.header_20240829 .member a img { height: 20px; }

.pop_wrap { position: fixed; top: 0; right: -500px; width: 500px; height: 100%; background-color: #ffffff; transition: right 0.5s ease; z-index: 10000; }
.pop_wrap.active { display:block; right: 0; }
.pop_wrap .pop_close { position: absolute; top: 0px; right: 0px; padding: 5%; }
.pop_wrap .pop_close img { width: 20px; }
.pop_wrap .inner { padding: 0px 50px; }
.pop_wrap .inner li { font-weight:bold; }
.pop_wrap .inner li.naver { margin-bottom: 10px; }
.pop_wrap .inner li.naver a { display: block; width: 100%; line-height: 40px; height: 40px; text-align: center; border: 1px solid #5ab234; color:#5ab234; }
.pop_wrap .inner li.kakao a { display: block; width: 100%; line-height: 40px; height: 40px; text-align: center; border: 1px solid #f6e24b; color:#f6e24b; }
.pop_wrap .inner .tit { font-weight:bold; margin-bottom: 10px; }


.search_pop_wrap.pop_wrap { display: table; background-color: rgba( 255, 255, 255, 0.8); }
.search_pop_wrap.pop_wrap .inner { display: table-cell; vertical-align: middle; text-align: left; }
.search_pop_wrap .pop_close { position: absolute; top: 0px; right: 0px; cursor: pointer; font-size: 20px; }
.search_pop_wrap .pop_close img { width: 20px; }
.search_pop_wrap input { background-color:initial; width: 100%; color: #000; height: auto; max-width: 360px; padding: 0 0 16px 0; margin: 0 auto; display: block; border-top: 0; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 1); font-family: inherit; text-align: center; font-size: 36px; font-size: 2.25rem; font-weight: bold; letter-spacing: 1px; box-sizing: border-box; outline: 0; background-image:url('/design/jm057/search_btn.png'); background-repeat: no-repeat; background-size: 26px; background-position: right center;  }
.search_pop_wrap input::placeholder { color: white; opacity: 1; /* placeholder의 투명도를 100%로 설정 */ } /* Internet Explorer 10-11 대응 */
.search_pop_wrap input::-ms-input-placeholder { color: white; } /* Microsoft Edge 초기 버전 대응 */
.search_pop_wrap input::-ms-input-placeholder { color: white; }
.search_pop_wrap .guide-word { color:#fff; margin-top: 50px;}

.mypage_pop_wrap.pop_wrap { display: table; }
.mypage_pop_wrap.pop_wrap .inner { display: table-cell; vertical-align: middle; text-align: left; }
.mypage_pop_wrap.pop_wrap .inner input { width: 100%; height: 43px; line-height: 43px; padding: 0px 5px; border: 1px solid #dddddd;  box-sizing: border-box; }
.mypage_pop_wrap.pop_wrap .inner li.input { margin-bottom: 10px;  }
.mypage_pop_wrap.pop_wrap .inner li.find a { font-size: 10px; text-decoration: underline; color: #343434; margin-right: 10px; }
.mypage_pop_wrap.pop_wrap .inner li.btn { margin-top: 10px; margin-bottom: 10px; }
.mypage_pop_wrap.pop_wrap .inner li.btn:after { display: block; content:''; clear: both; }
.mypage_pop_wrap.pop_wrap .inner li.btn a { display:block; width: calc(50% - 5px); float: left; text-align:center; padding: 15px; box-sizing: border-box; border: 1px solid #343434; margin: 0 10px 10px 0; }
.mypage_pop_wrap.pop_wrap .inner li.btn a:last-child { background-color:#000000; color:#ffffff; margin-right: 0px; }


.mypage_pop_wrap.pop_wrap .inner li.box { float:left; width: calc(50% - 5px); text-align:center; padding: 10px; border: 1px solid #dddddd; margin-right: 10px; margin-bottom: 10px; box-sizing: border-box;}
.mypage_pop_wrap.pop_wrap .inner li.box:nth-child(2n) { margin-right: 0px; }
.mypage_pop_wrap.pop_wrap .inner li.box .text { font-weight:normal; color:#000000; margin-bottom: 5px; }
.mypage_pop_wrap.pop_wrap .inner li.box .ico {}
.mypage_pop_wrap.pop_wrap .inner li.box .ico img { width: 20px; }


/* BASIC css end */