@charset "UTF-8";

/*** CSS Style 사용자 전용                                                    ***/
/*** 디자인통에서 제공하는 스킨 패치시 임의 파일에 기술한 내용은 삭제 되며,   ***/
/*** 해당 문서의 내용은 삭제 되지 않습니다.                                   ***/





/** 상품 리스트 **/
.body-goods-list .sub_content { padding: 0; }
.goods_list_item .goods_list_item_tit { display: none; }
.goods_list_item .addition_zone { padding: 0; }
.list_item_category { margin: 40px 0 !important; }
.list_item_category ul { font-size: 0; }
.list_item_category ul li { margin: 0 10px; padding-bottom: 35px; }
.list_item_category ul li a { display: block; position: relative; width: 125px; height: 125px; border-radius: 63px; margin: 0; padding: 0; border: none; background-image: url("../../img/category/noimg.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; transition-duration: 0s; }
.list_item_category ul li a::after { content: ''; position: absolute; left: 0; top: 0; width: 119px; height: 119px; border: solid 3px #84388e; border-radius: 63px; transition-duration: 0.2s; opacity: 0; }
.list_item_category ul li a span { display: inline-block; position: absolute; left: 0; bottom: -35px; width: 100%; text-align: center; font-family: 'NanumBarunGothic'; font-size: 16px; color: #333; letter-spacing: 0em; }
.list_item_category ul li a span em { display: none; }
.list_item_category ul li.on a::after { opacity: 1; }
.list_item_category ul li:hover a::after { opacity: 1; }
.goods_pick_list { display: inline-block; width: 100%; }
.goods_pick_list ul.js-filter-select { float: left; font-size: 0; }
.goods_pick_list ul.js-filter-select li { display: inline-block; position: relative; }
.goods_pick_list ul.js-filter-select li a { display: block; width: 110px; height: 46px; line-height: 46px; text-align: center; background-color: #f5f5f5; border-radius: 23px; margin-right: 10px; font-family: 'NanumBarunGothic'; font-size: 16px; color: #333; letter-spacing: 0em; transition-duration: 0.2s; }
.goods_pick_list ul.js-filter-select li a:hover { color: #fff; background-color: #224241; }
.goods_pick_list ul.js-filter-select li.on a { color: #fff; background-color: #224241; }
.goods_pick_list ul.js-sort-select { float: right; font-size: 0; }
.goods_pick_list ul.js-sort-select li { display: inline-block; position: relative; margin-left: 16px; }
.goods_pick_list ul.js-sort-select li::before { content: ''; position: absolute; left: -8px; top: calc(50% - 8px); width: 1px; height: 16px; background-color: #333; }
.goods_pick_list ul.js-sort-select li:first-child::before { display: none; }
.goods_pick_list ul.js-sort-select li a { line-height: 46px; font-family: 'NanumBarunGothic'; font-size: 16px; color: #999; letter-spacing: 0em; transition-duration: 0.2s; }
.goods_pick_list ul.js-sort-select li a:hover { color: #224241; }
.goods_pick_list ul.js-sort-select li.on a { color: #224241; }
.goods_list_item .js-filter-search { margin-top: 10px; }
.goods_list_item .js-filter-search span { display: inline-block; position: relative; margin-right: 10px; }
.goods_list_item .js-filter-search span a { display: block; position: relative; width: calc(110px - 2px); height: calc(46px - 2px); line-height: 46px; text-align: center; border: solid 1px #e5e5e5; border-radius: 5px; font-family: 'NanumBarunGothic'; font-size: 16px; color: #333; letter-spacing: 0em; transition-duration: 0.2s; }
.goods_list_item .js-filter-search span a:hover { border-color: #84388e; color: #84388e; }
.goods_list_item .js-filter-search span.on a { border-color: #84388e; color: #84388e; }
.goods_list_item .js-filter-search span.color a { width: calc(46px - 2px); border-radius: 23px; }
.goods_list_item .js-filter-search span.color a::before { content: ''; position: absolute; left: 0; top: 0; width: 46px; height: 46px; background-image: url("../../img/main/icon_check.png"); background-repeat: no-repeat; background-position: center; background-size: 20px; opacity: 0; }
.goods_list_item .js-filter-search span.color em { display: block; text-align: center; font-size: 9px; margin-top: 2px; }
.goods_list_item .js-filter-search span.color a:hover { border-color: #e5e5e5; }
.goods_list_item .js-filter-search span.color a:hover::before { opacity: 1; }
.goods_list_item .js-filter-search span.color.on a { border-color: #e5e5e5; }
.goods_list_item .js-filter-search span.color.on a::before { opacity: 1; }
.goods_list ul.js-goods-list { display: inline-block; float: none; width: calc(100% + 24px); margin-left: -12px; min-height: 400px; }
.goods_list ul.js-goods-list li { width: 25%; }
.goods_list ul.js-goods-list li .item_cont { padding: 0 12px; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont { padding: 20px 0 0; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_tit_box a .item_name { font-family: 'NanumBarunGothic'; font-size: 16px; color: #000; letter-spacing: 0em; border-bottom: none; padding: 0; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box { display: flex; align-items: center; padding: 5px 0 0 0; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > span.discountRate { font-family: 'Roboto'; font-size: 18px; color: #84388e !important; letter-spacing: 0em; font-weight: 500; text-decoration: none !important; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > span.fixedPrice { font-family: 'NanumBarunGothic'; font-size: 12px; color: #000; letter-spacing: 0em; text-decoration: line-through; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > strong.item_price { position: relative; top: -1.5px; font-family: 'NanumBarunGothicBold'; font-size: 15px; color: #000 !important; letter-spacing: 0em; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > strong.item_price em { position: relative; top: 1.5px; font-family: 'Roboto'; font-size: 18px; font-weight: 500; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_review_box { padding: 7px 0 0 0; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_review_box > span { display: inline-block; vertical-align: middle; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_review_box .reviewAverage { position: relative; font-family: 'NanumBarunGothicBold'; font-size: 12px; color: #000; letter-spacing: 0em; padding-left: 20px; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_review_box .reviewAverage::before { content: ''; position: absolute; left: 0; top: -2px; width: 20px; height: 20px; background: url("../../img/main/icon_star.png") no-repeat center; background-size: 12px; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_review_box .reviewCnt { font-family: 'NanumBarunGothic'; font-size: 12px; color: #a1a09e; letter-spacing: 0em; padding-left: 7px; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_delivery_box { display: none; padding: 7px 0 0 0; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_delivery_box .deliveryCharge { font-family: 'NanumBarunGothic'; font-size: 11px; color: #999; letter-spacing: 0em; padding: 3px 7px; border-radius: 3px; background-color: #ededed; }
.goods_list ul.js-goods-list li .item_cont .item_info_cont .item_delivery_box .fresh { font-family: 'NanumBarunGothic'; font-size: 11px; color: #84388e; letter-spacing: 0em; padding: 3px 7px; border-radius: 3px; background-color: #f2c9f7; margin-left: 5px; }
.goods_list div.js-more-goods button { display: block; width: 384px; height: 60px; line-height: 60px; border: solid 1px #6d6d6c; border-radius: 5px; margin: 80px auto 0 auto; text-align: center; font-family: 'NanumBarunGothicBold'; font-size: 18.67px; color: #000; letter-spacing: 0em; cursor: pointer; }


/** 모바일 상품 리스트 **/
.mobile .body-goods-list .location_wrap { display: none; }
.mobile .body-goods-list .sub_content { padding-top: 0 !important; }
.mobile .goods_list_item .addition_zone { width: calc(100% + 20px); margin-left: -10px; }
.mobile .goods_list_item .addition_zone .mobileAddContents img.js-smart-img {width: 100%;}
.mobile .list_item_category { margin: 20px 0 !important; }
.mobile .list_item_category ul { display: flex; overflow-x: auto; }
.mobile .list_item_category ul li { width: auto !important; padding-bottom: 22px; }
.mobile .list_item_category ul li a { width: 60px; height: 60px; border-radius: 30px; }
.mobile .list_item_category ul li a::after { width: 54px; height: 54px; border: solid 3px #84388e; border-radius: 30px; }
.mobile .list_item_category ul li a span { bottom: -22px; font-size: 11px; }
.mobile .goods_pick_list ul.js-sort-select { display: none; }
.mobile .goods_pick_list ul.js-filter-select { display: flex; float: none; font-size: 12px; overflow-x: auto; }
.mobile .goods_pick_list ul.js-filter-select li a { width: 70px; height: 30px; line-height: 30px; font-size: 11px; border-radius: 15px; margin-right: 7px; }
.mobile .goods_list_item .js-filter-search { display: flex; overflow-x: auto; overflow-y: hidden; }
.mobile .goods_list_item .js-filter-search span { margin-right: 7px; }
.mobile .goods_list_item .js-filter-search span a { width: calc(70px - 2px); height: calc(30px - 2px); line-height: 30px; font-size: 11px; }
.mobile .goods_list_item .js-filter-search span.color a { width: calc(30px - 2px);  }
.mobile .goods_list_item .js-filter-search span.color a::before { width: 30px; height: 30px; background-size: 15px; }
.mobile .goods_list_item .js-filter-search span.color em { display: none; }
.mobile .goods_list ul.js-goods-list { width: calc(100% + 10px); margin-left: -5px; }
.mobile .goods_list ul.js-goods-list li { width: 50%; }
.mobile .goods_list ul.js-goods-list li .item_cont { padding: 0 5px; } 
.mobile .goods_list ul.js-goods-list li .item_cont .item_info_cont .item_tit_box a .item_name { font-size: 13.335px; }
.mobile .goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > span.discountRate { font-size: 15px; }
.mobile .goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > strong.item_price { font-size: 14px; }
.mobile .goods_list ul.js-goods-list li .item_cont .item_info_cont .item_money_box > strong.item_price em { font-size: 15px; }