/* BASIC css start */
/* 메뉴 */
#commonNavi { position: fixed; top: 0; left: 0; width:100%; background: var(--pri-white); border-bottom: 1px solid var(--gray-10); box-sizing: border-box; z-index: 900; transition: top .3s linear; }
#commonNavi .header_logo { position: relative; width: 100%; height: 50px; margin: 0 auto; text-align: center; }
#commonNavi .header_logo a { width:24px; height:24px; padding: 3px; }
#commonNavi .header_logo .symbol {display:none; height: 50px; line-height: 50px; padding: 0; margin: 0 auto;}
#commonNavi .header_logo .logo { width: max-content; height: 50px; line-height: 50px; padding: 0; margin: 0 auto; }
#commonNavi .header_logo .logo img { height: 16px; }
#commonNavi .header_logo .inform { position:absolute; top: 13px; left: 8px; line-height: 17px; display:none;}
#commonNavi .header_logo .inform img { width: 18px; height: 18px; }
#commonNavi .header_logo .back_btn { display: block; position:absolute; top: 10px; left: 10px; }
#commonNavi .header_logo .search_btn { position:absolute; top: 10px; right: 48px; }
#commonNavi .header_logo .search_btn #MS_view_product { height: 37px; }
#commonNavi .header_logo .cart_btn { position:absolute; top: 10px; right: 10px; }
#commonNavi .header_logo .cart_btn .count { position: absolute; top: 0px; right: -1px; font-size: 8px; width: 15px; height: 15px; line-height: 15px; border-radius:50% 50%; text-align:center; background:var(--pri-brand); color:var(--pri-white); }
#commonNavi .header_cate { position: relative; overflow-x: auto; white-space: nowrap; }
#commonNavi .header_cate::-webkit-scrollbar { display: none; }
#commonNavi .header_cate .cate_box { display: inline-flex; padding: 8px 14px 11px 14px; }
#commonNavi .header_cate .cate_box .cate { flex-shrink: 0; padding: 0 4px; }
#commonNavi .header_cate .cate_box .cate a { display: block; padding: 7px 10px; border: 1px solid var(--gray-20); color: var(--gray-00); border-radius: 50px; line-height: 16px; font-size: 15px; font-weight: 500; letter-spacing: -.5px; }
#commonNavi .header_cate .cate_box .cate a:hover { background: var(--pri-black); border: 1px solid var(--pri-black); color: var(--pri-white); }
#commonNavi .header_cate .cate_box .cate a.on { background: var(--pri-black); border: 1px solid var(--pri-black); color: var(--pri-white); }
#commonNavi .header_cate .cate_box .cate a.on_home { background: var(--pri-black); border: 1px solid var(--pri-black); color: var(--pri-white); }
#commonNavi .header_cate .cate_box .cate a.event { border: 1px solid var(--pri-brand); color: var(--pri-brand);}
#commonNavi .header_cate .cate_box .cate a.event.on {background: var(--pri-brand); color: var(--pri-white); }
#commonNavi .header_cate .cate_box .cate a.event:hover { background: var(--pri-brand); color: var(--pri-white); }


/* 상단 point */
.cate_dot a:after{content:""; display:inline-block; border-radius:50%; background-color:var(--pri-brand); width:4px; height:4px;  transform:translate(3px, -8px);}
.cate_new a:before{content:"NEW";  display:inline-block; transform:translate(0px, -1px); color:var(--pri-brand); font-size:8px; font-weight:600; padding-right:3px;}
.cate_event a:after{content:"10%";  display:inline-block; transform:translate(0px, -1px); color:var(--pri-brand); font-size:9px; font-weight:600; padding-left:3px; }
.rolling_dot .menuBox { padding-right: 15px !important; }
.rolling_dot .menuBox:before { content:""; position:absolute; top: 16px; right: 10px; border-radius:50%; background-color:var(--pri-brand); width:4px; height:4px;  transform:translate(3px, -8px);}
.todayT a { position: relative; padding-left: 15px; }
.todayT a:before { content: ""; display: inline-block; background: url(//xexymix.jpg3.kr/xexymix/main/web/2025/cate_icon_todayT_bk.png) no-repeat center .5px; background-size: cover; width: 13px; height: 13px; opacity: .7; margin-right: 2px; }
.todayT a.on:before { content: ""; display: inline-block; background: url(//xexymix.jpg3.kr/xexymix/main/web/2025/cate_icon_todayT_wh.png) no-repeat center .5px; background-size: cover; width: 13px; height: 13px; opacity: 1; }


/* 위로슬라이드 */
.menuBox { position: relative; overflow: hidden; height: 16px !important; border: 1px solid #eb5e3e !important; color: #eb5e3e !important; }
.menuBox:hover { background: #eb5e3e !important; color: #fff !important;}
/*.menuBox { position: relative; overflow: hidden; height: 16px !important; border: 1px solid #ccc !important; color: #aaa !important; }*/
.menuSlide { list-style: none; position: relative; top: 0; }
.menuSlide p { position: relative; padding-bottom: 16px; text-align: center; }


/* 검색창 */
.search_layer {position:fixed; top:0px; left:-9999px; z-index:3002; width:100%; background:white; box-sizing:border-box;opacity: 0; overflow-y: scroll; overscroll-behavior: contain; }
.search_layer.active { left:0px; bottom:0px; right:0px; opacity:1; padding-bottom: 100px; }
.search_layer .search_box { display: flex; position: relative; height: 50px; margin: 0 20px 0 10px; align-items: center; }
.search_layer .search_box .close_btn { display: flex; padding-right: 8px; }
.search_layer .search_box .close_btn a { width: 24px; height:24px; padding: 3px; }
.search_layer .search_box .close_btn a img {height:100%; }
.search_layer .search_box .search_area { display: flex; width: 100%; }
.search_layer .search_box .search_area form {  width: 100%; }
.search_layer .search_box .search_area .search_input { width: 100%; height: 36px; line-height: 36px; border-radius: 30px; background: var(--gray-04); border: 0; padding: 0 50px 0 15px; font-size: 12px; box-sizing: border-box; }
.search_layer .search_box .search_area .submit_btn { position:absolute; top: 0; right: 16px; line-height: 48px; }
.search_layer .search_box .search_area .submit_btn img { height: 26px; }
.search_layer h3 { padding: 30px 0 15px; }
.search_layer h3 span { color: var(--pri-brand); }
.search_layer .recmd_keyword { padding: var(--defalt-padding); }
.search_layer .ranking_keyword { padding: var(--defalt-padding); }
.search_layer .banner_slide { margin: var(--defalt-margin); padding: 40px 0 30px; }
.search_layer .banner_slide .swiper-pagination-bullet { background: var(--gray-02); width: 15px; height: 2px; margin: 0; border-radius: 0; opacity: 1; }
.search_layer .banner_slide .swiper-pagination-bullet-active { background: var(--pri-black); }
.txt_del {position: absolute; right: 48px; width: 15px; height: 15px; border-radius: 15px; background: var(--gray-20); }
.txt_del:after,
.txt_del:before { content: ""; width: 8px; height: 1px; position: absolute; top: 45%; right: 3.5px; background: var(--pri-white); transition: 0.4s; }
.txt_del:after { transform: rotate(45deg); }
.txt_del:before { transform: rotate(135deg); }


/* 실시간 상품 검색 순위 */
#mk_new_ranking_1 {position:relative; padding:0  !important; width:100% !important; border:0 !important; margin:0 auto;}
#mk_new_ranking_1 .mk_title_wrap .mk_h3 {display:none; font-weight:bold; font-size:13px; color:var(--pri-black); margin:0; padding:0;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 32px; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li {position:relative; padding:0; line-height: 28px; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(1) { grid-area: 1 / 1; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(2) { grid-area: 2 / 1; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(3) { grid-area: 3 / 1; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(4) { grid-area: 4 / 1; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(5) { grid-area: 5 / 1; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(6) { grid-area: 1 / 2; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(7) { grid-area: 2 / 2; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(8) { grid-area: 3 / 2; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(9) { grid-area: 4 / 2; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:nth-child(10) { grid-area: 5 / 2; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li:last-child { position: absolute; top: -38px; right: 0; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li a {display:block; width:auto !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--pri-black) !important;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_keywords_num {display: inline-block; width: 16px; margin-right:0; color:var(--pri-brand) !important;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_keywords_txt { display: inline-block; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_ico_txt_new_2 {position:absolute; right:0; top:10px !important; width:20px; height:7px; background: url(/makeshop/newmanager/assets/images/ico_txt_new_2.svg) no-repeat;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_up, 
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_down {position:absolute; right:0; top:11px; width:9px; height:10px;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_up {background: url(/makeshop/newmanager/assets/images/ico_ranking_up.svg) no-repeat;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_down {background: url(/makeshop/newmanager/assets/images/ico_ranking_down.svg) no-repeat;}
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li .mk_line {position:absolute; right:3px; top:0 !important; line-height: 28px; }
#mk_new_ranking_1 .mk_keyword_wrap .mk_keywords li.mk_txt_date {text-align:right; color:var(--gray-45); padding-right:0; font-size:12px;}


/* 추천 검색어 */
#mk_new_ranking_2 {position:relative; padding:0  !important; width:100% !important; border:0 !important; margin:0 auto;}
#mk_new_ranking_2 .mk_title_wrap .mk_h3 {display:none; font-weight:bold; font-size:13px; color:var(--pri-black); margin:0; padding:0;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li {position:relative; padding:0 1px 6px 0 !important; display: inline-block; }
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li a {display:block; width:auto !important; padding: 6.5px 14px; border-radius: 30px; line-height: 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; background: #fff8F6; color:var(--pri-brand);}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_keywords_num {display:none; margin-right:8px; color:var(--gray-95);}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_ico_txt_new_2 {position:absolute; right:0; top:12px; width:20px; height:7px; background: url(/makeshop/newmanager/assets/images/ico_txt_new_2.svg) no-repeat;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_up, 
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_down {position:absolute; right:0; top:11px; width:9px; height:10px;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_up {background: url(/makeshop/newmanager/assets/images/ico_ranking_up.svg) no-repeat;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_ico_ranking_down {background: url(/makeshop/newmanager/assets/images/ico_ranking_down.svg) no-repeat;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li .mk_line {position:absolute; right:3px; top:10px;}
#mk_new_ranking_2 .mk_keyword_wrap .mk_keywords li.mk_txt_date {text-align:right; color:var(--gray-45); padding-right:0; font-size:12px;}


/* 최근 검색어 */
.search_layer .search_sub { width: 100%; display: block; vertical-align: top; padding: var(--defalt-padding); box-sizing:border-box;}
.search_layer .search_sub > h3 {margin: 20px 0 15px; position:relative; padding:0;}
.search_layer .search_sub > h3 span { color: var(--pri-brand); }
.search_layer .search_sub > h3 #clear-button { font-size: 12px; font-weight: 400; color: var(--gray-30); position: absolute; right: 0; top: 0; line-height: 20px; cursor:pointer; } 
.search_layer .search_sub .search-inner .txt { color: var(--gray-55); font-size:13px; }
.search_layer .search_sub #keyword-list li {display: inline-block; color: var(--gray-55); font-size: 13px; padding: 0 14px; margin: 0 5px 6px 0; border-radius: 30px; background: var(--gray-03); line-height:28px;}
.search_layer .search_sub #keyword-list li span a {font-size:14px; color:var(--gray-55); font-weight:500;}
.search_layer .search_sub #keyword-list li button {position: relative; background: none; border: none; width: 17px; height: 17px; padding:0; font-size:0; text-indent:0; color:var(--gray-80);}
.search_layer .search_sub #keyword-list li button:after,
.search_layer .search_sub #keyword-list li button:before { content: ""; width: 10px; height: 1px; position: absolute; top: 45%; right: 0; background: var(--gray-80); transition: 0.4s; }
.search_layer .search_sub #keyword-list li button:after { transform: rotate(45deg); }
.search_layer .search_sub #keyword-list li button:before { transform: rotate(135deg); }


/* 검색창 배너 */
.search_banner { margin: 40px 20px 0 20px !important; padding-bottom: 30px; }
.search_banner .swiper-pagination-bullet { background: var(--gray-02); width: 15px; height: 2px; margin: 0 !important; border-radius: 0; opacity: 1; }
.search_banner .swiper-pagination-bullet-active { background: var(--pri-black); }


/* 좌측하단 네비 */
.filterX-box { position: fixed; bottom: 70px; left: 8px; display: flex; width: 40px; height: 40px; overflow: hidden; background-color: var(--pri-white); border-radius: 100px; z-index: 100; transition: width 0.3s ease; }
.filterX-box.expanded { width: 120px; }
.filterX-box::after { content: ""; position: absolute; inset: 0; z-index: 10; border: 1px solid var(--gray-70); border-radius: 100px; pointer-events: none; }
.filterX-wrap { display: flex; height: 40px; position: absolute; right: 0; z-index: 20; transition: transform 0.3s ease; }
.filterX-wrap button { width: 40px; height: 40px; font-size: 12px; border: none; background: none; cursor: pointer; transition: all 0.2s ease; border-radius: 100%; display: none; padding: 0; text-indent: 0 !important; }
.filterX-wrap.open button { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 0; }
.filterX-wrap.open button:first-child { border-radius: 100px 0 0 100px; }
.filterX-wrap.open button:last-child { border-radius: 0 100px 100px 0; }
.filterX-button.active { background-color: var(--pri-black); color: var(--pri-white); font-weight: 600; display: flex; justify-content: center; align-items: center; }
/* BASIC css end */