@charset "euc-kr";

/* font */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800');



/* ===========================
   공통 스타일
=========================== */

/* 미리보기 숨기기 */
#m_skin_preview_wrap {display:none !important;}


/* 기본 */
* {-webkit-text-size-adjust:none;}
body {position:relative;font-size:0.813em;line-height:1.188em; color:var(--pri-black); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}
body,input,textarea,select,button,table { font: 0.75em "Montserrat", "Pretendard Variable", Pretendard, sans-serif; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,figure{margin:0;padding:0}
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:100%; word-break: break-all;}
ul, ol, li {list-style:none;}
fieldset, img {border:none;}
img {max-width:100%;vertical-align:middle;}
hr {display:none;}
form, fieldset, legend, label {margin:0; padding:0;}
fieldset{border:0 none;}
fieldset legend {position:absolute; visibility:hidden; overflow:hidden; width:0; height:0; margin:0; padding:0; font:0/0 Arial;}
em,address{font-style:normal;}
input,textarea,select,button,table{font-size:inherit;font-family:inherit;line-height:inherit;color: var(--pri-black);}
button, input, select, textarea { vertical-align: middle; outline: none; margin: 0;}
label { cursor:pointer; }
table {border-collapse: collapse; border-spacing: 0;}
select {-webkit-appearance: none; -moz-appearance: none; background:url('/design/xexymix/new_xexy/img/mo/defult-select-arrow.svg') no-repeat center right 8px; background-size:16px auto ; }
a { color:var(--pri-black); text-decoration:none; -webkit-tap-highlight-color:transparent; }
* html input { margin:-1px 0; }
*:first-child+html input { margin:-1px 0; }
input[type='checkbox'] { width:16px; height:16px; vertical-align:middle; margin-top: -2px;}
input[type='checkbox']:before { width: 16px; height: 16px; top: 0; left: 0; position: relative; content: ''; display: inline-block; visibility: visible; background: url(/design/xexymix/new_xexy/img/mo/check-off.svg) no-repeat #fff; cursor: pointer; background-size: 16px; vertical-align:top;}
input[type='checkbox']:checked:before { width: 16px; height: 16px; top: 0; left: 0; position: relative; content: ''; display: inline-block; visibility: visible; background: url(/design/xexymix/new_xexy/img/mo/check-on.svg) no-repeat #fff; background-size: cover; }
input[type="radio"] { width: 16px; height: 16px; cursor: pointer; border-radius: 3px; background: url(/design/xexymix/new_xexy/img/mo/radio-off.svg) transparent no-repeat center/16px; appearance: none; -moz-appearance: none; -webkit-appearance: none; } 
input[type="radio"]:checked { background: url(/design/xexymix/new_xexy/img/mo/radio-on.svg) transparent no-repeat center/16px; } 
input[type="text"], input[type="date"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], select {height:44px; border:1px solid var(--gray-15); vertical-align: middle; padding-left:10px; box-sizing: border-box; -webkit-border-radius:0; border-radius: 0; width:100%;}
input[type="radio"], input[type="checkbox"] {vertical-align: middle; margin-right:2px;}
textarea {border:1px solid var(--gray-15); vertical-align: middle; box-sizing:border-box; background-color:var(--pri-white); padding:10px; -webkit-border-radius:0; border-radius:0; width:100%;}

img.MS_prod_img_s {width: 100%;}
img.MS_prod_img_l {width: 100%;}
.MK-product-icons img {padding-right: 3px; padding-bottom: 3px; width: auto !important; height: 16px !important; }

.flex{display: -webkit-flex; display: -ms-flex; display: flex;}
.bold { font-weight:bold; }
.show { display:block !important; }
.hide { display:none !important; }
.no-scroll {overflow:hidden !important;}
.left {float:left !important;}
.right {float:right !important;}
.text-left {text-align:left !important;}
.text-center {text-align:center !important;}
.text-right {text-align:right !important;}
.text-bold {font-weight:bold !important;}
.relative {position:relative;}
.none-data {display:flex; align-items: center; justify-content: center; gap: 5px; min-height:100px;}
th.none-data,
td.none-data {padding:0 !important; font-weight:400;}


/* body */
body.scroll-lock {overflow:hidden !important; }
body.overlay, body.slider-overlay {overflow:hidden !important; }
body:before { background:rgba(0,0,0,0.0); content:""; transition:background 0.3s ease-in-out; }
body.overlay.overlay_fadeout:before { position:fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:3000; background:rgba(0,0,0,0.0); content:""; transition:background 0.3s ease-in-out; }
body.overlay:before, body.slider-overlay:before { position:fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:3000; background:rgba(0,0,0,0.5); content:""; }
body.notscroll {overflow: hidden;}
body.scroll {overflow: auto;}


/* 페이징 */
#container .paging { margin:30px auto; padding:0px; text-align:center;}
#container .paging a { display:inline-block; position:relative; width:24px; height:24px; margin:0px 2px; border:none; background:none; font-weight:normal; color: var(--pri-black); font-size:12px; line-height:24px; vertical-align:middle;}
#container .paging a.now { background: var(--pri-black); color: var(--pri-white); font-weight:700; }
#container .paging a.now:after { position:absolute; bottom:0px; left:50%; width:8px; height:1px; margin-left:-4px; background: var(--black-01); content:""; }
#container .paging a.next:before { position:absolute; top:0px; left:0px; width:25px; height:25px; line-height:25px; content:">"; background: url(/design/xexymix/new_xexy/img/mo/b-r-arrow.svg) no-repeat center; background-size: 12px; }
#container .paging a.prev:before { position:absolute; top:0px; left:0px; width:25px; height:25px; line-height:25px; content:"<"; background: url(/design/xexymix/new_xexy/img/mo/b-r-arrow.svg) no-repeat center; background-size: 12px; transform:rotate(180deg); }
#container .paging a.last:before { position:absolute; top:0px; left:0px; width:25px; height:25px; line-height:25px; content:">>"; background: url(/design/xexymix/image/p_last.png) no-repeat center; background-size: 9px; }
#container .paging a.first:before { position:absolute; top:0px; left:0px; width:25px; height:25px; line-height:25px; content:"<<"; background: url(/design/xexymix/image/p_first.png) no-repeat center; background-size: 9px; }
.paging a.next, 
.paging a.prev, 
.paging a.first, 
.paging a.last  {text-indent: -9999px !important;}


/* 팝업 */
.layer {width: 100%; min-height: 100%; z-index: 903; position: fixed; left: 0; top: 0; background:rgba(0,0,0,0.6);}
.layer .layer-pop {width:100%; background-color: var(--pri-white); position: absolute; bottom:0; border-radius: 20px 20px 0 0; overflow:hidden;}
.layer .layer-pop .layer-title {position: absolute; width: 100%; background: var(--pri-white); top: 0; z-index: 1;}
.layer .layer-pop .layer-inner {max-height: 500px; overflow-y: auto; padding-top:78px; box-sizing:border-box;}
.layer .layer-pop h3  {padding:28px 20px 20px; font-weight:600; font-size:18px;}
.layer .layer-pop .txt {padding:0 20px;}
.layer .layer-pop .close {position:absolute; top:30.5px; right:20px;}
.layer .layer-pop .close:before {content:''; display:inline-block; background:url(/design/xexymix/new_xexy/img/mo/popup-closed.svg)no-repeat center; width:16px; height:16px; background-size:cover;}
.layer .layer-pop .close span {display:none;}
.popup .pop h3  {background-color: #efefef; height: 36px; line-height: 36px; font-weight: bold; padding: 0 10px; }
.popup .pop .txt {padding:10px;}
.popup .pop .close {width:45px; height:36px; color:var(--pri-white); line-height: 42px; position:absolute; top:0; right:0; background-color: #4f4f4f; text-align: center;}
#passimg {width: 90%; background-color: #fff; top:30%; left: 0; right: 0; margin: 0 auto; text-align: center; padding: 20px 0; box-shadow: 0 1px 10px #717171;}
#passimg .head {color:#f26c09;}
#passimg .btns {padding:0 10px; margin-top: 10px;}
#passimg .btns a {display:block; background-color: var(--black-04); color:var(--pri-white); padding:10px 0;}


/* 레이아웃 */
#commonLayout {max-width: 600px; margin: 0 auto; }
#layoutFooter {max-width: 600px; margin: 0 auto; }
#container {overflow: hidden; max-width: 600px; margin: 0 auto; padding-top:102px;}
#container .contents {position: relative; }


/* 버튼 */
.fixButtonR {position:relative; padding-right:120px;}
.fixButton {width:115px !important; position:absolute; top:0; right:0;}
.btn_White {width:100%; height:44px; line-height:44px; background-color:#fff; text-align:center; display:block; border:1px solid #c6c6c6; box-sizing: border-box; vertical-align: middle;}
.btn_Black {width:100%; height:44px; line-height:44px; background-color:#393939; color:#fff; text-align:center; display:block; border:1px solid #393939; box-sizing: border-box; vertical-align: middle;}
.btn_Red {width:100%; height:44px; line-height:44px; background-color:#ab3e41; color:#fff; text-align:center; display:block; border:1px solid #ab3e41; box-sizing: border-box; vertical-align: middle;}
.btn_Grey {width:100%; height:44px; line-height:44px; background-color:#858585; color:#fff; text-align:center; display:block; border:1px solid #858585; box-sizing: border-box; vertical-align: middle;}

.basic-btn {line-height:44px; background:var(--gray-15); text-align:center; display:block; font-size:14px; font-weight:500;}
.yellow-btn {line-height:42px; background:#FFDE02; text-align:center; display:block; font-size:14px; font-weight:500;}
.black-btn {line-height:44px; background:var(--pri-black); text-align:center; display:block; color:var(--pri-white); font-size:14px; font-weight:500;}
.white-btn {line-height:42px; background:var(--pri-white); text-align:center; display:block; border:1px solid var(--gray-15); font-size:14px; font-weight:500;}
.grey-btn {line-height:44px; background:var(--gray-05); text-align:center; display:block; font-size:14px; font-weight:500;}
.orange-btn {line-height:42px; background:var(--pri-brand); text-align:center; display:block; font-size:14px; font-weight:500; color:var(--pri-white);}
.talk-btn {line-height:44px; background:#FFB940; text-align:center; display:block; font-size:14px; font-weight:500;}
.talk-btn:before {content:''; display:inline-block; background:url(/design/xexymix/new_xexy/img/mo/qa-icon.svg)no-repeat center; width:16px; height:16px; background-size:cover; vertical-align: text-top; margin-right: 4px; margin-left:-4px;}

.MoreAll {position: absolute; top: 0; right: 3px;}
.MoreAll a {display: block; position: relative; width: auto; border: 0; height: 27px; line-height: 29px; color: var(--gray-00); margin: 0 15px; font-size: 13px; font-weight: 500; padding-right: 12px; text-align: center;}
.MoreAll a:after {content: ""; position: absolute; width:6px; height:6px; top: 11px; margin-left: 3px; border-bottom: 1px solid var(--gray-00); border-right: 1px solid var(--gray-00); transform: rotate(-45deg);}
.MoreBtn {padding-top: 20px;}
.MoreBtn a { display: block; position: relative; width: auto; height: 44px; line-height: 44px; margin: var(--defalt-margin); padding-right: 12px; text-align:center;  background:var(--pri-black); color:var(--pri-white); font-size: 14px; }
.MoreBtn a:after { content: ""; position: absolute; top: 19px; width: 6px; height: 6px; margin-left: 7px; transform: rotate(-45deg); border-bottom: 1px solid var(--pri-white); border-right: 1px solid var(--pri-white); }
.listMoreBtn { padding-top: 20px; }
.listMoreBtn a { display: block; position: relative; width: auto; height: 44px; line-height: 44px; margin: var(--defalt-margin); padding-right: 12px; text-align:center;  background:var(--pri-black); color:var(--pri-white); font-size: 14px; }
.listMoreBtn a:after { content: ""; position: absolute; top: 16px; width: 6px; height: 6px; margin-left: 7px; transform: rotate(45deg); border-bottom: 1px solid var(--pri-white); border-right: 1px solid var(--pri-white); }


/* 로그인 */
.login {padding: var(--defalt-padding);}
.login .caution {margin-bottom:10px;}
.member .area {margin-top: 20px;}
.login #keyboard {text-align:center; margin:0 auto;}
.login #keyboard p {text-align:right; margin-bottom:12px;}
.login #keyboard img {display:none; width:100%;}
.log-tab {}
.log-tab ul {display: flex; align-items: center; justify-content: center;}
.log-tab ul li {flex:1; text-align:center; border-bottom:1px solid var(--gray-10); height: 50px; line-height: 50px; box-sizing: border-box;}
.log-tab ul li.on {border-bottom:2px solid var(--pri-black);}
.log-tab ul li a {font-size:14px; font-weight:400; color:var(--gray-30); display:block;}
.log-tab ul li.on a {font-weight:700; color:var(--pri-black);}
.login .loginInput {}
.login .loginInput dl {margin-bottom:20px;}
.login .loginInput dl:last-child {margin-bottom:0;}
.login .loginInput dl dt {font-size:14px; font-weight:600; margin-bottom:12px;}
.login .loginInput dl dd {}
.login .loginInput dl dd input {font-size:14px;}
.login .loginInput input {width:100%; display:block; margin-bottom:10px;}
.login .loginCheck {margin-top:20px;}
.login .loginCheck label {margin-right:12px; font-size:14px;}
.login .loginCheck label input {vertical-align: middle;}
.login .loginMiddle {margin:20px 0 50px;}
.login .loginMiddle .btn_Red {font-size:1.167em; margin:10px 0;}
.login .loginMiddle .btn_White {font-size:1.167em;}
.login .loginBottom {background-color:#eaeaea; padding:18px 15px; margin-top:20px;}
.login .loginBottom h4 {background-color:#eaeaea; margin-bottom:5px; padding:0; font-weight:bold;}
.login .loginBottom a {font-size:1.167em;}
.login .loginBottom a.btn_Black {margin-top:16px;}
.login .loginBottom a.btn_Black:last-child {margin-top:10px;}
.login .loginBottom a.btn_White {margin-top:10px;}
.log-banner {margin:32px 0 24px; position:relative;}
.log-banner img {width:100%;}
.log-banner p {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--pri-white); text-align:center; font-size:15px; font-weight:500; line-height:23px; width:100%;}
.log-banner p span {color:var(--pri-brand);}
.lost-btn {text-align:center; margin:12px 0 0; display: flex; align-items: center; justify-content: center;}
.lost-btn span {width:1px; height:12px; background:var(--pri-black); display:inline-block; margin:0 12px;}
.lost-btn a {font-size:13px; font-weight:600;}
.lost-btn a:last-child {font-weight:500;}
.sns-login {}
.sns-login .sns-title img {width: 100%; max-width: 300px;}
.sns-login .kakaotalk {background:#fae300; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative;}
.sns-login .kakaotalk span {display: none; /*display:inline-block;*/ background: var(--pri-white); font-size:13px; font-weight:600; width:186px; height:32px; border:1px solid var(--pri-black); border-radius:32px; box-sizing: border-box; position:absolute; top:-36px; left:50%; margin-left:-93px; line-height: 32px; text-align: center;}
.sns-login .kakaotalk span:after {content: ''; display: inline-block; width: 8px; height: 8px; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); bottom: -5px; border-bottom: 1px solid var(--pri-black); border-right: 1px solid var(--pri-black); background: var(--pri-white);}
.sns-login .kakaotalk a {display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600;}
.sns-login ul {display:flex; justify-content: center; gap: 16px;}
.sns-login ul li {}
.sns-login ul li a {}
.sns-login ul li a img {width:40px;}
.sns-login ul li span {}

#check_auth {padding:15px 0;}
#check_auth .head {text-align:center; color:#f46b00; margin-bottom:10px;}
#check_auth .contents table {margin:0 auto;}
#check_auth .contents table td {padding:5px 0;}
#check_auth .contents table td input {width:100% !important; height:35px !important; margin-bottom:0 !important;}


/* 스와이프 */
.swiper-button-prev, 
.swiper-button-next { outline: 0; }
.swiper-slide img {width: 100%;}


/* ===========================
   게시판
=========================== */

/* 게시판 보기 */
#review-board-list .board-list li dt p .reply_status {display:none;}
#review-board-type .rbInfo .rb_subject {flex-wrap: wrap;}
#review-board-type .order-number {margin-bottom: 15px; font-size: 13px;}
#review-board-type .btn-report {display:none !important;}

/* 게시판 쓰기 */
#bw_input_writer {color: var(--gray-50);}
#bw_input_subject {background:var(--gray-05); color: var(--gray-50); border-color:var(--gray-05);}


/* ===========================
   상품리스트
=========================== */

/* 상품 기본 레이아웃 */
.productSection { position: relative; padding-bottom: 64px; }
.section-title { position: relative; margin: var(--defalt-margin); margin-bottom: 20px;}
.section-title .title-M { font-size: 24px; font-weight: 700; line-height: normal; letter-spacing: 0; }
.section-title .title-S { font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: 0; padding-top: 6px; }
.items .productThumb { position:relative; }
.items .productThumb .no {position:absolute; top:0; left:0; width: 28px; height:28px; line-height:28px; background: var(--pri-white); color:var(--black-05); font-size:13px; font-weight:500; text-align: center; }
.items .productThumbMV { position: relative; aspect-ratio: 183 / 275; overflow: hidden; }
.items .productThumbMV .no {position:absolute; top:0; left:0; width: 28px; height:28px; line-height:28px; background: var(--pri-white); color:var(--black-05); font-size:13px; font-weight:500; text-align: center; z-index: 2; }
.items .productThumbMV #myFrame { aspect-ratio: 0.666; position: absolute; inset: 0; width: 100%; border: 0; top: 50%; transform: translateY(-50%); }
.items .productThumbMV .fake-div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; }
.items .productThumbMV .fake-div > a { display: block; width: 100%; height: 100%; }
.items .productInfo { padding: 10px 12px 0 12px; overflow: hidden; }
.items .productInfo .priceBox { position:relative; margin:7px 0 5px; }
.items .productInfo .listName { font-size:14px; font-weight:500; line-height:18px; letter-spacing: -0.3px; /*word-break: keep-all;*/ overflow: hidden; }
.items .productInfo .listNameSub { /*display: none;*/ border-top:1px solid var(--gray-08); color: var(--gray-75); font-size:12px; line-height:15px; margin-top:5px; padding-top:7px; font-weight:normal; letter-spacing: -0.5px; white-space: normal; }
.items .productInfo .listNameSub .txtcon1 { display: table; padding: 1px 4px; border-radius: 3px; margin-bottom: 3px; border: 1px solid var(--pri-brand); line-height: 13px; color: var(--pri-brand); font-size: 11px; }
.items .productInfo .listSoldout {font-size:11px; color:#ff0004; font-weight:600; }
.items .productInfo .listDiscount { color: var(--pri-black); font-size: 14px; font-weight: 600; }
.items .productInfo .listPrice { color:var(--pri-black); font-size:14px; font-weight:600; line-height:15px; display:inline-block; margin-right:2px; }
.items .productInfo .percent { padding-right: 2px; color: var(--pri-brand); font-weight: 500; font-size: 13px; }
.items .productInfo .listPrice strike {color: var(--gray-75); font-weight: 500; font-size: 12px; }
.items .productInfo .listIcon { display: none; }
.items .productInfo .listIcon img { padding-right: 3px; padding-bottom: 3px; width: auto !important; height: 16px !important; }
.items .productInfo .color { display: block; margin-bottom: 8px; position:relative; padding-right:8px; overflow:hidden; }
.items .productInfo .color.showPlus {height: 15px;}
.items .productInfo .color.showPlus:after {content: "+"; position: absolute; top: -1.5px; right: 0; font-size: 14px; font-weight: 600;}
.items .productInfo .color span { display:inline-block; width: 15px; height: 15px; border-radius: 15px;}
.items .productInfo .listCode { position: relative; text-align: left; }
.items .productInfo .listCode img { margin-left:3px; }
.items .productInfo .listCode .styleCode { position: absolute; left: 0; top: 0; font-size: 11px; color:var(--gray-75); width: 70%; text-align: left; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.items .productInfo .listCode .crema-product-reviews-count { color: #eb5e3e;font-size: 10px !important; position: absolute; right: 0; top: 0; }
.items .productInfo .listCode .crema-product-reviews-count b { font-weight: 500; }
.items .productInfo .listCode .crema-product-reviews-score { color: #8f8f8f; font-size: 10px !important; font-weight: 500; }
.items .productInfo .listCode .crema-product-reviews-score b { color: #111; font-weight: 600; font-size: 12px !important; }
.items .productInfo .listCode .crema-product-reviews-score .crema_product_reviews_score__container { padding: 3px 0; }
.items .productInfo .listCode .crema-product-reviews-score .crema_product_reviews_score_star_wrapper { width: 12px !important; height: 12px !important; top: -2px !important; }
.items .productInfo .listCode .crema-product-reviews-score .crema_product_reviews_score_star_wrapper svg { fill: #ffc300 !important; }
.items .productInfo .couponPrice { padding-bottom:5px; color:var(--pri-brand); font-weight:500; font-size:11px; line-height:15px; }
.items .productInfo .couponPrice .coupon-discount {  font-weight:bold; font-size:14px; }


/* 가로배열 */
.cols2 .items { display: grid !important; gap: 24px 10px; grid-template-columns: repeat(2, minmax(calc(50% - 10px), 1fr)); list-style: none; width: 100%; }
.cols3 .items { display: grid !important; gap: 24px 10px; grid-template-columns: repeat(3, minmax(calc(33.3% - 10px), 1fr)); list-style: none; width: 100%; }


/* 세로배열 타입1 */
.row1 .items { display: grid; }
.row1 .items li figure { display: flex; }
.row1 .items .productThumb { position:relative; width: 33%; }
.row1 .items .productInfo { width: 62%; padding: 0 12px; }


/* 세로배열 타입2 */
.row2 { display: flex; flex-direction: column; }
.row2 .items { padding: 0; list-style: none; width: 100%; }
.row2 .items li figure { display: flex; }
.row2 .items .productThumb { position:relative; width: 33%; }
.row2 .items .productInfo { width: 62%; padding: 0 12px; }


/*회원 혜택가*/
.groupBenefitWrap {display: none; margin-top:5px; margin-bottom:5px; }
.groupBenefitWrap .maxBenefit .openBtn { display: block; font-size:11px; color:var(--pri-brand); line-height:13px; font-weight:600; margin-bottom: 3px; word-break: keep-all; }
.groupBenefitWrap .maxBenefit .openBtn:after {content: ""; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); border-top: 1px solid var(--pri-brand); border-right: 1px solid var(--pri-brand); margin: 0 0 1px 2px;}
.groupBenefitWrap .maxBenefit .benefitPrice span { display:block; font-size:14px; line-height:16px; color:var(--pri-brand); font-weight:700; }
.userBenefit { display:flex; align-items:center; }
.userBenefit .groupName{ padding: 0 2px; margin-right:4px; border: 1px solid var(--gray-15); line-height: 14px; font-size: 8.5px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; }
.userBenefit .groupName img{ width: 11px; height: 11px; margin-right: 2px; }
.userBenefit .groupPrice{ font-size:14px; line-height:16px; font-weight:700; color:var(--pri-brand); vertical-align:middle; }

/*회원 혜택가 팝업*/
.benefitListPop { visibility:hidden; opacity: 0; transition: opacity 0.3s ease-in-out; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000;}
.benefitListPop.is-visible { visibility:visible; opacity: 1;}
.benefitListPop .bgMask { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4; z-index:99999998; }
.benefitListPop .benfitPopWrap { position:fixed; bottom:0; left:0; width:100%; padding:28px 20px; box-sizing:border-box; background:var(--pri-white); z-index:99999999; border-radius: 20px 20px 0 0;}
.benefitListPop .benfitPopWrap .popHeader { margin-bottom:8px; }
.benefitListPop .benfitPopWrap .popHeader strong { display:block; margin-bottom:28px; font-size:18px; line-height:21px; font-weight:600; }
.benefitListPop .benfitPopWrap .popHeader span { display:inline-block; font-size:12px; line-height:18px; background:#ebebeb; }
.benefitListPop .benfitPopWrap .popClose { position:absolute; display:block; top:30.5px; right:20px;}
.benefitListPop .benfitPopWrap .popClose img { display:block; width:100%; }
.benefitListPop .benfitPopWrap ul li {border-bottom:1px solid var(--gray-10); }
.benefitListPop .benfitPopWrap ul li .box {display:flex; align-items:center; height:56px;}
.benefitListPop .benfitPopWrap ul li .box .grade {margin-right:8px;}
.benefitListPop .benfitPopWrap ul li .box .benefit {flex: 1;}
.benefitListPop .benfitPopWrap ul li .box .benefit .name-txt {font-size:16px; font-weight:600; display: inline-block; line-height: 20px;}
.benefitListPop .benfitPopWrap ul li .box .benefit .dc-txt {font-size:13px; font-weight:700; color:var(--pri-brand); margin-left: 2px; position:relative; top:-1px;}
.benefitListPop .benfitPopWrap ul li .box .benefit p {font-weight:500; color:var(--gray-35); margin-top:2px;}
.benefitListPop .benfitPopWrap ul li .box .gradePrice {}
.benefitListPop .benfitPopWrap ul li .box .gradePrice span {font-size:14px; font-weight:600;}
.benefitListPop .benfitPopWrap .noti {margin-top:10px; line-height:18px; color:var(--gray-60);}
.benefitListPop .benfitPopWrap .btns {margin-top:24px; }


/* ===========================
   메인페이지
=========================== */

/* 서브 메인페이지 */
.submain .MoreBtn {padding-top: 40px;}
.submain .listMoreBtn {display:none;}


/* 실시간급상승_컬러칩갯수제한 */
.realtime_slide .items .productInfo .color span:nth-child(9) { position: relative; background: var(--pri-white) !important; }
.realtime_slide .items .productInfo .color span:nth-child(9):before { content: "+"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; }
.realtime_slide .items .productInfo .color span:nth-child(10),
.realtime_slide .items .productInfo .color span:nth-child(11) { display: none; }


/* ===========================
   분류페이지
=========================== */

/* 레이아웃 */
.wrapper {position: relative; width: 100%; overflow: hidden; padding-bottom: 70px;}


/* 타이틀 */
#product-list .section-title {font-size: 22px; font-weight: 700;}
.list_review_tit { padding:25px 0; font-size:18px; font-weight:500; text-align:center; }


/* 리스트정렬 */
.list_wrap { margin-bottom: 50px; }
.list_array { display: flex; padding: var(--defalt-margin); padding-top:5px; padding-bottom:5px; }
.list_array .item_ea { width:100%; line-height: 40px; text-align: left; font-size: 12px; }
.list_array .item_sort { position:relative; width:100%; text-align: right; }
.list_array .item_sort:after { content: ""; position: absolute; top: 16px; right: 2px; width: 5px; height: 5px; margin-left: 7px; transform: rotate(45deg); border-bottom: 1px solid var(--gray-95); border-right: 1px solid var(--gray-95); }
.list_array .item_sort select { width: auto; height:40px; border: 0; padding: 0 15px 0 0; text-indent: 0; background: var(--pri-white); color: var(--gray-95); direction: rtl; font-size: 13px; }


/* 중분류부터 경로 */
.add-navi { position: relative; padding: var(--defalt-padding); text-align: left; border-bottom: 1px solid var(--gray-10); box-sizing: border-box; }
.add-navi li { position: relative; display: inline-block; line-height:39px; padding-left:17px; }
.add-navi li:before { content: ""; position: absolute; top: 17px; left: 2px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--gray-80); border-right: 1px solid var(--gray-80); }
.add-navi li a { display: block; font-size: 15px; color: var(--gray-30); font-weight:500; }
.add-navi li:first-child {padding: 0;}
.add-navi li:first-child:before { display: none; }
.add-navi li:last-child a { color: var(--pri-black); }


/* 분류페이지 상단 카테고리 공통 */
#listTab_btn { position: absolute; width: 100%; background: var(--pri-white); overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--gray-17); z-index: 10; white-space: nowrap; }
#listTab_btn.fixed { position: fixed; left: 0; z-index: 992; -webkit-transition: top .3s ease; -moz-transition: top .3s ease; -ms-transition: top .3s ease; -o-transition: top .3s ease; transition: top .3s ease; }
.cate-menu {position:relative; min-height:39px;}
.cate-menu .cate-list .class-list {display: flex; overflow-x: auto;}
.cate-menu .cate-list .class-list.cate3_wrap {background:var(--gray-05);}
.cate-menu .cate-list #depth4 {border-top:1px solid var(--gray-15);}
.cate-menu .cate-list .class-list ul {display: flex; gap: 16px; padding-left:16px; padding-right:16px; overflow: auto; scrollbar-width: none; }
.cate-menu .cate-list .class-list ul::-webkit-scrollbar { display: none; }
.cate-menu .cate-list .class-list li {scroll-snap-align: start; white-space: nowrap; line-height:39px;}
.cate-menu .cate-list .class-list li a { position: relative; color:var(--gray-30); font-size: 15px; font-weight:500; display:block; padding:0 3px; }
.cate-menu .cate-list .class-list li.on a { color:var(--pri-black); font-weight:700; }
.cate-menu .cate-list .class-list.cate1_wrap li.on a:after,
.cate-menu .cate-list .class-list.cate2_wrap li.on a:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--pri-black); }


/* 상품 다중 이미지 슬라이더 */
.prd-img-slider { position: relative; }
.prd-img-slider img { max-width: 100%; }
.prd-img-slider .swiper-pagination-bullet { display: inline-block; width: 5px; height: 5px; padding:0; margin: 0 2px !important; border-radius: 50%; background: var(--pri-white); opacity: .4; font-size:0; text-indent: -9999px;}
.prd-img-slider .swiper-pagination-bullet-active{ background: var(--pri-black); opacity: 1; }
.prd-img-slider .swiper-button-prev { left: 0;  color: var(--pri-black);}
.prd-img-slider .swiper-button-prev:after { font-size: 12px; }
.prd-img-slider .swiper-button-next { right: 0; color: var(--pri-black); }
.prd-img-slider .swiper-button-next:after { font-size: 12px; }


/* 서브페이지 타이틀 */
.title-text {display:none; font-weight:600; line-height:50px;}
.page-title .title-text {font-size:16px; display:inline-block;}


/* 서브페이지 네비 */
.top-navi {display: flex; align-items: center; justify-content: right; margin:32px 0 24px;}
.top-navi a {color: var(--gray-35); font-size: 13px;}
.top-navi a:last-child {color: var(--pri-black); font-weight: 600;}
.top-navi img {margin: 0 4px;}


/* 킵그로우 체크박스 */
html #keepgrowLogin #formWrap .loginCheckBox li input[type="checkbox"]:before { background: transparent; }


/* ===========================
    ROOT
=========================== */

:root{
    /* COLOR */
    --pri-white:#fff;
    --pri-black:#000;
    --pri-brand:#EB5E3E;
    --black-01:#333;
    --black-02:#383838;
    --black-03:#3b3b3b;
    --black-04:#393939;
    --black-05:#111;
    --gray-00:#aaa;
    --gray-01:#fafafa;
    --gray-02:#f3f3f3;
    --gray-03:#f9f9f9;
    --gray-04:#f5f5f5;
    --gray-05:#f2f2f2;
    --gray-06:#bbb;
    --gray-07:#f4f4f4;
    --gray-08:#eaeaea;
    --gray-09:#e9e9e9;
    --gray-10:#e8e8e8;
    --gray-11:#cecece;
    --gray-12:#f8f8f8;
    --gray-13:#bebebe;
    --gray-14:#eee;
    --gray-15:#dbdbdb;
    --gray-16:#ddd;
    --gray-17:#dfdfdf;
    --gray-18:#f6f6f6;
    --gray-19:#f7f7f7;
    --gray-20:#ccc;
    --gray-21:#cecece; 
    --gray-22:#c6c6c6;
    --gray-23:#c7c7c7;
    --gray-24:#f1f1f1;
    --gray-25:#bababa;
    --gray-26:#cbcbcb;
    --gray-27:#d8d8d8;
    --gray-30:#a6a6a6;
    --gray-35:#8f8f8f;
    --gray-40:#757575;
    --gray-41:#787878;
    --gray-42:#777;
    --gray-43:#707070;
    --gray-45:#a9a9a9;
    --gray-50:#575757;
    --gray-55:#565656;
    --gray-60:#444;
    --gray-61:#555;
    --gray-62:#424242;
    --gray-63:#636363;
    --gray-64:#5e5e5e;
    --gray-65:#666;
    --gray-66:#656565;
    --gray-69:#e1e1e1;
    --gray-70:#ebebeb;
    --gray-71:#e5e5e5;
    --gray-72:#e6e6e6;
    --gray-73:#e3e3e3;
    --gray-74:#949494;
    --gray-75:#979797;
    --gray-80:#a5a5a5;
    --gray-90:#222;
    --gray-92:#828282;
    --gray-93:#808080; 
    --gray-94:#888;
    --gray-95:#999;
    --error:#F04438;
    
    /* DEFALT-PADDING */
    --defalt-padding:0 20px;
    --defalt-padding-16:0 16px;
    
    /* DEFALT-MARGIN */
    --defalt-margin:0 20px;
    --defalt-margin-16:0 16px;
}