/* BASIC css start */
#preview_wrap {display: none;}
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}

body.lock {overflow:hidden;}

#header {position:sticky;top: 0;left: 0;width:100%;max-width: 850px;margin:0 auto;background-color: var(--main-color);z-index:99;}
#header .header_top {position:relative;display:flex;align-items: center;justify-content: space-between;padding:15px 20px;}
#header .header_top h1 {text-align:center;}
#header .header_top .cart {position:relative;}
#header .header_top .cart .count {position: absolute;top: 0;right: -7px;width:15px;height:15px;background-color: var(--dark-color);border-radius:20px;text-align:center;color: var(--main-color);}
#header .header_top .cart .count {font-size:10px;line-height:15px;}

.headerCateWrap {display:flex;padding: 8px 10px;justify-content:space-between;align-items:center;width:100%;overflow:auto;box-sizing: border-box;background-color:#ffff} 
.headerCateWrap { -webkit-overflow-scrolling:touch; scrollbar-width:none; /* 파이어폭스 */ } 
.headerCateWrap::-webkit-scrollbar { display:none; /* 크롬,사파리 */ } 
.headerCateWrap a { display:block; font-size:14px; line-height:30px; text-align:center; font-weight:500; margin:0 10px; /* 각 요소 사이의 간격 설정 */white-space:nowrap; } 
.headerCateWrap a:first-child { margin-left:0; /* 첫 번째 요소는 왼쪽 여백 제거 */ } 
.headerCateWrap a:last-child { margin-right: 0; /* 마지막 요소는 오른쪽 여백 제거 */ } 



.h_side_menu {display:none; position:fixed;top:0;left: -200px;width:100vw;height:100%;background: #F6F4EE;transition: opacity 0.5s ease;z-index:999;}
.h_side_menu .inner {position:relative;height: 100vh;overflow-y: scroll;padding:20px;box-sizing: border-box;}
.h_side_menu .h_top {position:relative;}
.h_side_menu .close_btn {position:absolute;top:20px;right:20px;z-index: 10;}
.h_side_menu .h_top .greeting {font-size:14px;line-height:14px;color: #888888;}
.h_side_menu .h_top .h_top_menu {margin-top:44px;}
.h_side_menu .h_top .h_top_menu ul {width: calc(100% - 40px);margin:0 auto;display: flex;align-items: center;justify-content: space-between;}
.h_side_menu .h_top .h_top_menu ul li {text-align: center;max-width: 60px;width: 100%;}
.h_side_menu .h_top .h_top_menu ul li span {display: block;margin-top:10px;color:#6b6b6b;font-size: 12px;line-height: 14px;}
.h_side_menu .h_top .searchForm {position:relative;margin-top:30px;width:100%;}
.h_side_menu .h_top .searchForm input {width:100%;height: 50px;border:none;background-color: var(--dark-color);border-radius:6px;color:#b1b1b1;padding: 0 20px;}
.h_side_menu .h_top .searchForm input:fucus {border:none;}
.h_side_menu .h_top .searchForm .btn_search {position:absolute;right:15px;top:13px;}

.h_side_menu .h_cate {margin-top:12px;}
.h_side_menu .h_cate .ttl_menu {position:relative;background-color: #fff;margin-bottom:12px;border-radius:6px;}
.h_side_menu .h_cate .ttl_menu > a {display: block;padding: 20px;height:56px; font-size:15px;line-height:14px;letter-spacing: -0.3px;color:#000000;font-weight:500;box-sizing: border-box;}
.h_side_menu .h_cate .ttl_menu > ul {display:flex;flex-wrap:wrap;border-top: 1px solid #EFEFF0;display:none;}
.h_side_menu .h_cate .ttl_menu.on > ul {display:flex;}
.h_side_menu .h_cate .ttl_menu > ul > li {width:50%;padding:16px 20px;height:50px;border-bottom: 1px solid #EFEFF0;box-sizing: border-box;}
.h_side_menu .h_cate .ttl_menu > ul > li:last-child {border-bottom:0;}
.h_side_menu .h_cate .ttl_menu > ul > li:nth-child(odd) {border-right: 1px solid #EFEFF0;}
.h_side_menu .h_cate .ttl_menu > ul > li > a {font-size:14px;line-height:14px;letter-spacing: -0.3px;color: var(--dark-color);} 
.h_side_menu .h_cate .ttl_menu > ul > li .fa {display:none;}
.h_side_menu .h_cate .ttl_menu > ul > li > ul {display:none;}
.h_side_menu .h_cate .ttl_menu .btn {display:inline-block; background-color:#f6f4ee;width:24px;height:24px;border-radius:40px;position: absolute;right: 20px;top: 15px;}
.h_side_menu .h_cate .ttl_menu .btn span {width:10px;height:1px;background:#a39e98;display:inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.h_side_menu .h_cate .ttl_menu .btn span:last-child {transform: rotate(90deg);left: 7px;}
.h_side_menu .h_cate .ttl_menu.on .btn span:last-child {transform: rotate(0);}


.h_side_menu .h_bottom .recent_prd {background-color: #fff;margin-bottom: 12px;border-radius: 6px;}
.h_side_menu .h_bottom .recent_prd .recent_cont {display:none;}
.h_side_menu .h_bottom .recent_prd.on .recent_cont {display: block;}
.h_side_menu .h_bottom .recent_prd.on .recent_cont ul {display:flex;}
.h_side_menu .h_bottom .recent_prd strong {position: relative;display: block;height: 56px;padding: 20px;border-bottom: 1px solid #EFEFF0;font-size:15px;line-height:14px;letter-spacing: -0.3px;color:#000;font-weight: 500;box-sizing: border-box;}
.h_side_menu .h_bottom .recent_prd strong .btn {display: inline-block;background-color: #f6f4ee;width: 24px;height: 24px;border-radius: 40px;position: absolute;right: 20px;top: 15px;}
.h_side_menu .h_bottom .recent_prd strong .btn span {width: 10px;height: 1px;background: #a39e98;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.h_side_menu .h_bottom .recent_prd strong .btn span:last-child {transform: rotate(90deg);left: 7px}
.h_side_menu .h_bottom .recent_prd.on strong .btn span:last-child {transform: rotate(0);}


.h_side_menu .h_bottom .h_notice .notice {background-color:#ECEAE5;border-radius:6px;padding:20px;}
.h_side_menu .h_bottom .h_notice .notice span {font-size:15px;line-height:14px;letter-spacing: -0.3px;color:#000000;font-weight:500;}
.h_side_menu .h_bottom .h_notice .notice div {margin-top:10px;}
.h_side_menu .h_bottom .h_notice .notice div p {font-size:14px;line-height:24px;letter-spacing: -0.3px;color:#3f3f3f;font-weight:300;}
.h_side_menu .h_bottom .h_notice .cs_list {display:flex;justify-content: space-between;}
.h_side_menu .h_bottom .h_notice .cs_list a {display: inline-block;text-align:center;width: 49%;background-color:#ECEAE5;border-radius:6px;padding:20px;margin-top: 12px;font-size:15px;line-height:14px;letter-spacing: -0.3px;box-sizing: border-box;}


#MS_view_product {padding:20px;}
#MS_view_product li {width: 28.5%;}
#MS_view_product li img.listPic {object-fit:cover;border-radius: 6px;}
/* BASIC css end */