/* BASIC css start */
.menu_on { height:100%; overflow:hidden;}
.menu_off {height:auto;overflow:initial}
#mask {width:100%;height:100%;position:fixed;top: 0;left:0;right:0;bottom:0;background-color: #111;z-index:1000;display:none;opacity: 0.7;}
#allWrap{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#contents { margin-top: 85px;}
.menuOn #allWrap{max-height:100%;overflow:hidden;}

.mb1rem{margin-bottom: 1rem;}
.mb2rem{margin-bottom: 2rem;}
.mb3rem{margin-bottom: 3rem;}

.displaynone{display:none !important; opacity: 0 !important; overflow: hidden !important; visibility: hidden !important;}

#dimmed{ display:none; position: fixed; left:0; top:0; width: 100vw; height: 100vh; z-index: 999; background: rgba(0,0,0,0.5);}
#dimmed.on{ display: block;}

#top-banner{ width: 100%; height: 32px; text-align: center; overflow: hidden;}
#top-banner .swiper-slide{ width: 100%; background: #000; }
#top-banner .swiper-slide a{color: white; line-height: 32px; font-weight: 400; font-size: 13px; }
#top-banner .swiper-slide a span{ font-size: 13px; font-weight: 400;}


/* 헤더 */
#header {width:100%; margin:0 auto; padding:0; background:transparent; position:relative; z-index:996; 
    box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
    position: absolute; top: 32px;
}
#header img{ width: 100%;}

#header .headerMenu{ background: #fff; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.3rem; }

#header.invert .headerMenu{ filter: invert(1);}
#header.invert .headerMenu .btnWrap .btn-basket .quan{filter: invert(1);}

.logo_ani{ display:none; height: 150px; vertical-align: top; overflow: hidden; transition: 0.5s linear; background: #fff;}
.logo_ani img{ width: 100%; padding: 1.3rem; display: block;}


#header .headerMenu #logo{ width: 70px; }
#header .headerMenu .btnWrap{ display: flex; align-items: center;}
#header .headerMenu .btnWrap > a{ display: inline-block; margin-left: 14px;}
#header .headerMenu .btnWrap [class*="btn-"]{ }
#header .headerMenu .btnWrap .btn-search-open{ margin-top: 2px; width: 22px;}
#header .headerMenu .btnWrap .btn-basket{ position: relative; width: 22px; margin-top: -2px;}
#header .headerMenu .btnWrap .btn-basket .quan{ position: absolute; bottom: -3%; right: -21%; background: #000; width: 14px; height: 14px; border-radius: 40px; color: #fff; box-sizing: content-box; display: flex; align-items: center; justify-content: center;}
#header .headerMenu .btnWrap .btn-basket .quan #user_basket_quantity{ font-size: 10px; font-weight: 600; color: #fff;}
#header .headerMenu .btnWrap .btn-nav{ width: 24px;}

#gnb{ display:none; border-bottom: 1px solid #E2E2E2; background: #fff; position: relative; z-index: -1;}

#gnb ul{}
#gnb ul li{ display: inline-block; width: auto; text-align: center;}
#gnb ul li:first-child{ margin-left: 1.3rem;}
#gnb ul li a{  height:100%; display: inline-block; padding: 10px 0 12px; font-size: 16px;}
#gnb ul li a.eng{ font-size: 17px;}


/* 헤더 애니메이션 */
body.fixed #header{ position: fixed; top: 0;}
body.fixed .logo_ani{ height: 0;}
body.fixed #header .headerMenu{background: #fff;}
body.fixed #header #gnb{ display: block;}

main.main{margin-top: 205px; transition: 0.5s linear;}
body.fixed main.main{ margin-top: 0;}


/* 다찾다 검색 */
.search_layer{position:fixed; top:0px; left:0; bottom: 0; z-index:3002; width:100%; background: rgba(0,0,0,0.5); box-sizing:border-box; display:none; opacity:0; }
.search_layer .search-box { padding: 20px 1.3rem; background:white; height: fit-content;}
.search_layer .search-box h1 {text-align:left; color:#000; font-size:20px; font-weight:bold; margin-bottom:15px; }
.search_layer .search-box .search-close-btn { display:inline-block; float:right; }
.search_layer .search-box .search-close-btn img {width: 15px !important;}
.search_layer .search-box .input-box { position:relative; width:100%; height:58.5px; border-bottom:2px solid #000; box-sizing:border-box; }
.search_layer .search-box .input-box .search-icon { position:absolute; top:0px; left:0px; width:62px; height:58.5px; background:url('https://xexymix.img4.kr/PL/m/m_search_btn.png') no-repeat center center; background-size:18.5px 18px; }
.search_layer .search-box .input-box .MS_search_word { width:100%; height:54px; padding-left:20px; padding-right:60px; background:none; border:none; font-size:14px; line-height:54px; box-sizing:border-box; }
.search_layer .search-box .input-box .MS_search_word::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color:#999999; opacity: 1; /* Firefox */ }
.search_layer .search-box .input-box .MS_search_word:focus{outline:none;}
.search_layer .search-box .input-box .MS_search_word:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#999999; }
.search_layer .search-box .input-box .MS_search_word::-ms-input-placeholder { /* Microsoft Edge */ color:#999999; }
.search_layer .search-box .input-box .submit-btn { position:absolute; top:0px; right:0px; width:50px; height:54px; font-weight:600; font-size:13px; text-align:center; line-height:54px; }
.search_layer .search-box .input-box .submit-btn img { width: 50%; }
.search_layer .keyword-tab { padding:10px 24px; }
.search_layer .keyword-tab span { font-size:16px; font-weight:bold; }
.search_layer .keyword-list { padding:0 24px; }
.search_layer .keyword-list ul { }
.search_layer .keyword-list ul li { display:block; box-sizing:border-box; }
.search_layer .keyword-list ul li a { display:inline-block; color:#333333; font-size:14px; padding: 5px 7px; margin: 0 7px 10px 0; background: #f3f3f3; }
.search_layer .keyword-list ul li a:hover { background: #000; color: #fff; }
.search_layer .keyword-list ul li a:before {content:'#'; margin-right:5px;  }


/* 다찾다 임시 */
.search_layer th,
.search_layer td div:not(.finder-search){ display:none;}
.search_layer .finder-opt{ position: relative; margin: 35px 0px 25px ;}
.search_layer .finder-opt table{width:calc(100% - 60px);}
.search_layer td .finder-search{ display: flex; align-items: center; width:100%; background: #F6F6F6; border-radius: 3px; overflow:hidden; padding: 0 14px; height: 46px;}
.search_layer .smart_finder_auto_completion{ border:unset; width: 100%; background: #F6F6F6;}
.search_layer .smart_finder_auto_completion::placeholder{ color:#a2a2a2; font-size: 16px;}
.search_layer .fa-search{opacity: 0.4;}
.search_layer .fa-search::before{ display:none;}
.search_layer .finder-btn-c{ position: absolute; right: 0; top:0;}
.search_layer .finder-btn-c button[type="submit"]{ background: unset; border: unset; height: 46px; width: 52px; background:#393939; color: #fff; text-align: center; border-radius: 3px; margin-left: 8px;}

/* 다찾다 임시 */


/* 사이드 메뉴 */
.sideMenu{-webkit-transition:all 0.3s;transition:all 0.3s;position:fixed;top:0;right:-100%;width:100%;bottom:0;height:100%;z-index:1001}
.sideMenu.on{right:0;}
.sideMenu.on .shadow{display:block;}
.sideMenu .shadow{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(0,0,0,0.5);}
.sideMenu .asideClose{position:absolute;top: 20px;right: 20px;z-index:1;width: 15px;box-sizing:border-box;color:#fff;font-size:24px;text-align:center;}
.sideMenu .asideClose img{ width: 100%;}


.sideMenu .menuCnt{position:absolute;top:0;right: 0;bottom:0;z-index:1;width:80%;box-sizing:border-box;padding: 1.3rem 0 150px 1.3rem;background-color: #fff;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sideMenu .menuCnt .user_box{ margin: 3rem 1.3rem 15px 0; border-bottom: 1px solid #e2e2e2;}
.sideMenu .menuCnt .user_box .member{ padding:0; margin:3rem 0 0 ;}
.sideMenu .menuCnt .user_box .member .tx{display: flex; align-items: baseline; justify-content: space-between;}
.sideMenu .menuCnt .user_box .member .tx span{ font-size: 16px;}
.sideMenu .menuCnt .user_box .member .tx .user_name{ font-size: 19px;}
.sideMenu .menuCnt .user_box .member .tx .mypage{font-size: 13px; color: #575757; text-decoration: underline;}

.sideMenu .menuCnt .user_box .member .member_group{display: block;padding: 10px 0 20px;}
.sideMenu .menuCnt .user_box .member .member_group span{}

.sideMenu .menuCnt .user_box .member .member_info{ padding: 15px 0; display: flex; border-top: 1px solid #E2E2E2; }
.sideMenu .menuCnt .user_box .member .member_info a{ font-size:12px; height: 39px; width: calc(100% / 3); display: flex; flex-direction: column; justify-content: space-between;}
.sideMenu .menuCnt .user_box .member .member_info a > span{display:block;  font-size: 15px;}
.sideMenu .menuCnt .user_box .member .member_info a > span span{font-size: 8px; color: #1D9564; vertical-align: middle; padding: 0 0 4px 4px; display: inline-block;}
.sideMenu .menuCnt .user_box .member .member_info a > b{display:block; font-weight: 500;font-size: 15px;}
.sideMenu .menuCnt .user_box .member .member_info a > b span{ font-weight: 500;}
.sideMenu .menuCnt .user_box .member .member_info *{line-height: 1;}

.sideMenu .menuCnt .user_box .no-member{}
.sideMenu .menuCnt .user_box .no-member .copy{ font-size: 20px; line-height: 1.5; letter-spacing: -0.5px;}
.sideMenu .menuCnt .user_box .no-member .event{ display: flex; align-items: center; margin: 30px 0 10px;}
.sideMenu .menuCnt .user_box .no-member .event img{ width: 16px; margin-right: 8px;}
.sideMenu .menuCnt .user_box .no-member .event span{ font-size: 16px;}
.sideMenu .menuCnt .user_box .no-member .event span b{ font-size: 16px; font-weight: 500;}
.sideMenu .menuCnt .user_box .no-member .btn-login{ padding: 10px 20px; background: #000; color: #fff; font-size: 14px; border-radius: 50px; margin:25px 0 25px 0; display: inline-block;}


.sideMenu .menuCnt .benefit{ display: flex; align-items: center; justify-content: flex-start;  margin: 0 1.3rem 0 0;  overflow: hidden; border-radius: 5px; position: relative; }
.sideMenu .menuCnt .benefit .swiper-wrapper{}
.sideMenu .menuCnt .benefit .swiper-slide{}
.sideMenu .menuCnt .benefit .swiper-slide a{ display: block;}
.sideMenu .menuCnt .benefit img{ width: 100%;}
.sideMenu .menuCnt .benefit .swiper-pagination{ bottom: auto; top: 8px; left: auto; right: 8px; width: fit-content;background: #000;color: #fff; border-radius: 30px; padding: 2px 6px 3px; font-size: 10px; line-height:1;}
.sideMenu .menuCnt .benefit .swiper-pagination span{ color:#fff; font-size: 10px; line-height:1;}

.sideMenu .menuCnt ul.pageNav{margin-top:20px;}
.sideMenu .menuCnt ul.pageNav > li{border-bottom:solid 1px #E2E2E2;}
.sideMenu .menuCnt ul.pageNav > li > a{display:flex; align-items: center; position: relative; font-size: 18px; padding: 20px 0; color: #000; line-height: 1; letter-spacing: -0.1px;}
.sideMenu .menuCnt ul.pageNav > li > a.eng{ font-size: 19px;}
.sideMenu .menuCnt ul.pageNav > li > a span.point{ font-size: 8px; color: #1D9564; padding-left: 3px;}
.sideMenu .menuCnt ul.pageNav > li > a p.open{ display: block; position: absolute; left: 0; top: 0; text-align: right; width: 100%; height: 100%;padding-right: 1.3rem;}
.sideMenu .menuCnt ul.pageNav > li > a p.open span{ display: inline-block; width: 16px; height: 1px; background: #000; transform:translate(14px, 13px); }
.sideMenu .menuCnt ul.pageNav > li > a p.open span:last-child{ transform: translate(-2px, 13px) rotate(90deg);}
.sideMenu .menuCnt ul.pageNav > li.on > a p.open span{ transform:translate(0px, 12px);}
.sideMenu .menuCnt ul.pageNav > li.on > a p.open span:last-child{ display:none;}

.sideMenu .menuCnt ul.pageNav > li ul.depth2, .sideMenu .menuCnt ul.pageNav > li ul.depth2_con{ display:none;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2{ display:block; margin-top: 10px; padding-left: 12px; margin-bottom:9px;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2_con{display:flex; gap:4px; padding-right: 2.5rem; padding-bottom: 20px;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2_con>*{flex:1;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2_con img{width:100%;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2_con span{padding:0; padding-top:8px; font-size: 14px; color:#525252; display:block;}
.sideMenu .menuCnt ul.pageNav > li ul.depth2 > li{}
.sideMenu .menuCnt ul.pageNav > li ul.depth2 > li > a{display: block; padding: 7px 0; font-size: 16px; color: #525252;}
.sideMenu .menuCnt ul.pageNav > li ul.depth2 > li:first-child a{ padding-top: 3px;}


.sideMenu .menuCnt ul.pageNav > li li.depth3{ }
.sideMenu .menuCnt ul.pageNav > li li.depth3 > ul:not(.depth3_cont){ display: flex; }
.sideMenu .menuCnt ul.pageNav > li li.depth3 > ul:not(.depth3_cont) li a{ display: inline-block; padding: 6px 45px 6px 0; }
.sideMenu .menuCnt ul.pageNav > li li.depth3 > ul:not(.depth3_cont) li.on a{ font-weight: 600;}

.sideMenu .menuCnt ul.pageNav > li li.depth3.on > a{ font-weight: 600; margin-bottom: 10px;}
.sideMenu .menuCnt ul.pageNav > li li.depth3 .depth3_cont{ display: none;}
.sideMenu .menuCnt ul.pageNav > li li.depth3.on .depth3_cont{ display: flex;  overflow-x: scroll; -ms-overflow-style: none;}
.sideMenu .menuCnt ul.pageNav > li li.depth3.on .depth3_cont::-webkit-scrollbar{ display:none;}

.sideMenu .menuCnt ul.pageNav > li li.depth3 .depth3_cont a{ width: 30%; flex: 0 0 auto; }
.sideMenu .menuCnt ul.pageNav > li li.depth3 .depth3_cont a,
.sideMenu .menuCnt ul.pageNav > li .collection a{ display: inline-flex; flex-direction: column; margin-right: 8px; }
.sideMenu .menuCnt ul.pageNav > li li.depth3 .depth3_cont a img{ width: 100%;}
.sideMenu .menuCnt ul.pageNav > li li.depth3 .depth3_cont a span,
.sideMenu .menuCnt ul.pageNav > li .collection a span{padding: 10px 0 25px; font-size: 14px; color:#525252;}


.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li{width:100%;}
.sideMenu .menuCnt ul.pageNav > li.on ul.collection .depth3{display:flex; justify-content: flex-start; overflow-x: scroll;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li.box{flex: 0 0 40%; padding:7px 0; margin-right:2px;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li.box:last-child{margin-right:0}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li.box a{padding:0; margin:0;}
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li.box a img{width:100%;} 
.sideMenu .menuCnt ul.pageNav > li.on ul.depth2.collection li.box a span{padding:0; padding-top:10px; font-size: 12px; color:#525252; display:block;}


/* 그리드 공통 */
.prd_list{}
.prd_list img{ width: 100%;}
.prd_list .prd_info{ padding: 10px 6px;}
.prd_list .thumb{ position: relative;}
.prd_list .thumb .wish{ position: absolute; right: 10px; bottom: 10px; }
.prd_list .prd_info .color_chip{margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;}
.prd_list .prd_info .color_chip ul{ display: flex;}
.prd_list .prd_info .color_chip ul li{ width: 9px; height: 9px; margin:0 4px 0 0; border-radius: 20px;}
.prd_list .prd_info .color_chip p{ color: #A2A2A2; font-size: 12px; white-space: nowrap;}
.prd_list .prd_info .color_chip p .color_cnt{ color: #1D9564; font-size: 12px;}
.prd_list .prd_info .name{ font-size: 15px; margin-bottom: 6px;}
.prd_list .prd_info .sub_name{ font-size: 14px; margin-bottom: 12px; color: #707072;}
.prd_list .prd_info .price{display: flex; flex-wrap: wrap; align-items: baseline; }
.prd_list .prd_info .price > *{margin-right: 5px;font-size: 16px; }
.prd_list .prd_info .price > *:last-child{margin-right: 0;}
.prd_list .prd_info .price .custom_price{ color: #A2A2A2; font-size: 11px; text-decoration: line-through;}
.prd_list .prd_info .price .listDiscount,
.prd_list .prd_info .price .listDiscount span{color: #BF214B;}
.prd_list .prd_info .icon{ margin-top: 10px; }
.prd_list .prd_info .icon img{ padding: 2px 0; padding-right:4px; height:21px !important; width:auto !important;}


.my-wish-list{background-image:url(/design/jmomall/ECHO/uiux/icon/icon_heart_off.svg); display:block; width:20px; height:20px; background-repeat:no-repeat; background-size:contain; background-position:center; margin:0 auto;}
.my-wish-list.wish-on{background-image:url(/design/jmomall/ECHO/uiux/icon/icon_heart_on.svg?2);}


/* BASIC css end */