@charset "UTF-8"; /* var import */ @import url(/resources/native/assets/css/var/border.css); @import url(/resources/native/assets/css/var/color.css); @import url(/resources/native/assets/css/var/font.css); /****************************************/ /* Name:HIMART /* PART:브랜드 별 다품목 /****************************************/ /* 브랜드 별 다품목 */ /* html.ios body:has(.hm-multi-item__home) {overflow: hidden;width: 100%;height: 100%;} html.ios .hm-multi-item__home {height: 100dvh;overflow-y: auto;-webkit-overflow-scrolling: touch;} html.ios .hm-multi-item__home::-webkit-scrollbar {display: none;} html.ios.body-freezing .hm-multi-item__home {overflow-y: hidden;} */ html {overscroll-behavior: none;} .hm-multi-item .blind {overflow: hidden;position: absolute;clip: rect(0, 0, 0, 0);width: 1px;height: 1px;margin: -1px;} .hm-multi-item button,.hm-multi-item input {padding: 0;border: 0;outline: none;background-color: transparent;outline: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-radius: 0;cursor: pointer;} .hm-multi-item a {color: inherit;text-decoration: none;outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);cursor: pointer;} .hm-multi-item a:active, a:focus, a:hover {text-decoration: none;outline: none;} .hm-multi-item .hm-multi-item__benefit-guide {border-radius: 9px;background-color: #f8f9fa;margin: 14px 22px;padding: 15px 12px;} .hm-multi-item .hm-multi-item__benefit-guide button {display: flex;position: relative;width: 100%;height: 18px;text-align: left;} .hm-multi-item .hm-multi-item__benefit-guide button span {font-size: 14px;font-weight: 400;color: #111;} .hm-multi-item .hm-multi-item__benefit-guide button::after {content: "";display: inline-block;width: 16px;height: 16px;background: url(../img/icon/ico_arrow_down_16_gray.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: absolute;top: 50%;right: 0;transform: translateY(-50%);} .hm-multi-item .hm-multi-item__benefit-guide-icon {width: 18px;height: 18px;display: inline-block;margin-right: 8px;} .hm-multi-item .main-slide__item {width: calc(100% - 44px);height:auto;padding-top: 0;visibility: hidden;} .hm-multi-item .main-slide__item.swiper-slide-prev, .hm-multi-item .main-slide__item.swiper-slide-active, .hm-multi-item .main-slide__item.swiper-slide-next {visibility: visible;} .hm-multi-item .main-slide__item::before {content: none;} .hm-multi-item .main-slide__item::after {content: none;} .hm-multi-item .main-slide__item .main-slide__img-box {width: 100%;height: 100%;position: relative;overflow: hidden;border-radius: 15px;} .hm-multi-item .main-slide__item .main-slide__img-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 10;background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);border-radius: 15px;} .hm-multi-item .main-slide__item .main-slide__item-brand-img {position: absolute;top: 2px;left: 20px;z-index: 15;width: 60px;height: 60px;} .hm-multi-item .main-slide__item .main-slide__item-img {width: 100%;height: 100%;-webkit-transform: scale(1.2);transform: scale(1.2);transition: transform 500ms;} .hm-multi-item .main-slide__item__content {position: absolute;top: 44%;-webkit-transform: translateY(-40%);transform: translateY(-40%);text-align: center;width: 100%;height: auto;z-index: 101;} .hm-multi-item .main-slide__item__font {-webkit-transform: scale(0.7);transform: scale(0.7);transition: transform 500ms;min-height: 108.19px;} .hm-multi-item .main-slide__item__title {display: block;font-size: 32px;font-weight: 700;color: #fff;} .hm-multi-item .main-slide__item__txt {display: block;font-size: 14px;font-weight: 700;color: #fff;margin-top: 4px;line-height: 21px;} .hm-multi-item .main-slide__item__btn {display: inline-block;padding: 10px 19px;border-radius: 80px;background-color: #000000;color: #fff;font-size: 14px;line-height: 16px;text-align: center;font-weight: 700;margin-top: 22px;} .hm-multi-item .main-slide__item.swiper-slide-active .main-slide__item-img, .hm-multi-item .main-slide__item.swiper-slide-active .main-slide__item__font, .hm-multi-item .main-slide__item.swiper-slide-duplicate-active .main-slide__item-img, .hm-multi-item .main-slide__item.swiper-slide-duplicate-active .main-slide__item__font {-webkit-transform: scale(1);transform: scale(1);transition: transform 1000ms;} .hm-multi-item .main-slide__item, .hm-multi-item .main-slide__item .main-slide__img-box, .hm-multi-item .main-slide__item .main-slide__img-box::before, .hm-multi-item .main-slide__item .main-slide__item-brand-img, .hm-multi-item .main-slide__item__btn {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0)} .hm-multi-item .main-slide__item__shortcut {width: 100%;height: 24px;min-height: 38px;margin-top: 14px;} .hm-multi-item .main-slide__item__shortcut .shortcut__link {display: inline-block;width: auto;height: 100%;padding-left: 6px;} .hm-multi-item .main-slide__item__shortcut .shortcut-text {display: flex;justify-content: center;align-items: center;height: 24px;line-height: 24px;font-size: 14px;font-weight: 700;color: #fff;} .hm-multi-item .main-slide__item__shortcut .shortcut-text::after {content: "";display: inline-block;width: 12px;height: 12px;background: url(../img/icon/ico_arrow_right_12_white.svg) no-repeat 0 0;background-size: 100% auto;margin-left: 4px;} .hm-multi-item .sub-slide__wrap {position: absolute;bottom: 0;z-index: 100;width: 100%;padding-bottom: 22px;} .hm-multi-item .sub-slide__wrap .sub-slide__item {position: relative;;width: 74%;border-radius: 9px;background-color: rgba(255, 255, 255, 0.5);padding: 6px 20px 6px 6px;-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);} .hm-multi-item .sub-slide__wrap .sub-slide__item::after {content: "";position: absolute;top: 50%;right:-24px;transform: translateY(-50%);display: inline-block;width: 20px;height: 20px;vertical-align: top;background-image: url(../img/icon/ico_circle_plus_bk.svg);background-size: 100% auto;background-repeat: no-repeat;} .hm-multi-item .sub-slide__wrap .sub-slide__item:first-child {margin-left: -20px;} .hm-multi-item .sub-slide__wrap .sub-slide__item:last-of-type::after {content: none;} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__item-link {display: flex;align-items: center;} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__img-box {margin-right: 9px;background: #fff;border-radius: 7px;width: 48px;height: 48px;min-width: 48px;overflow: hidden;} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__img-box img {display: block;width: 100%;height: 100%;} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__cont-box {padding: 3px 0px;width: calc(100% - 58px);} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__item-model {width: auto;max-width: 100%;max-height: 18px;overflow: hidden;text-overflow: ellipsis;display: block;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space:nowrap;font-size: 12px;font-weight: 500;color: #121F26;line-height: 18px;} .hm-multi-item .sub-slide__wrap .sub-slide__item .sub-slide__item-price {font-size: 14px;font-weight: 700;color: #000;line-height: 22px;} .hm-multi-item .hm-multi-item__content {position: relative;margin:70px 22px 30px;} .hm-multi-item .hm-multi-item__content .title-box {padding-bottom: 19px;} .hm-multi-item .hm-multi-item__content .title-box__title {margin: 0;text-align: center;font-family: HimartHama;font-size: 22px;font-weight: 500;line-height: 33px;} .hm-multi-item .hm-multi-item__content .title-box__txt {display: block;} .hm-multi-item .hm-multi-item__content .search-box {position: relative;top: 0;} .hm-multi-item .hm-multi-item__content .search-box__inner {border-radius: 100px;height: 44px;padding: 10px 84px 10px 16px;background-color: #f4f4f4;box-sizing: border-box;} .hm-multi-item .hm-multi-item__content .search-box__inner input {caret-color: #222226;font-size: 14px;line-height: 24px;opacity: 1;overflow: hidden;text-overflow: ellipsis;vertical-align: top;white-space: nowrap;width: 100%;} .hm-multi-item .hm-multi-item__content .search__btn {position: absolute;top: 0;right: 12px;padding: 10px 4px;} .hm-multi-item .hm-multi-item__content .search__btn::after {content: "";display: block;width: 24px;height: 24px;background: url(../img/icon/ico_search.svg) no-repeat 0 0;background-size: 100% auto;} .hm-multi-item_tab {position:relative;margin:0;background:#fff;} .hm-multi-item_tab .hm-tab__nav {position: -webkit-sticky;position:sticky;top: 56px;left: 0;z-index: 105;background-color: #fff;height: 55px;} .hm-multi-item_tab .hm-tab__nav .tab-swiper {padding: 6px 28px 0;} .hm-multi-item_tab .hm-tab__nav-item {padding:16px 0 0px;width: auto;height: auto;line-height:20px;background:#fff;} .hm-multi-item_tab .hm-tab__nav-item .nav-item__emphasis {display: inline-block;max-width: 98%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: absolute;top: 2px;left: 0px;font-size: 11px;font-weight: 600;line-height: 12px;height: 12px;color: #FF1344;} .hm-multi-item_tab .hm-tab__nav-item .nav-item__title {display: inline-block;font-size:16px;line-height: 16px;font-weight: 400;color:#A9AAAA;width: auto;padding-bottom: 12px;} .hm-multi-item_tab .hm-tab__nav-item--active .nav-item__title {color:#111;font-weight: 700;border-bottom:3px solid #222226;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item {margin-top: 0;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .content-item__banner {margin: 16px 22px 20px;overflow: hidden;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .content-item__banner a > img {display: block;width: 100%;height: 100%;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .content-item__banner a > img {width: 100%;height: 100%;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .middle-category-box {width: 100%;height: 55px;background-color: #fff;position: -webkit-sticky;position: sticky;top: 110px;left: 0;z-index: 19;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .middle-category-box .hm-inner {position: relative;padding-top: 3px;} .hm-multi-item_tab .hm-tab__content .hm-tab__content-item .middle-category-box .middle-category__btn {position: absolute;top: 11px;right: 0;width: 76px;text-align: center;z-index: 10;} .hm-multi-item .category-product-box {position: relative;z-index: 10;} .hm-multi-item .category-product-box.mid-cate__active {margin-top: 72px;} .hm-multi-item .hm-multi-item-prod__list {padding: 20px 22px 140px;} .hm-multi-item .hm-multi-item__inner {display:flex; flex-wrap:wrap; justify-content: space-between;} .hm-multi-item .hm-multi-item__item {width: calc(50% - 4.5px);margin-bottom: 40px;} .hm-multi-item .hm-multi-item__link { display: block; } .hm-multi-item .hm-multi-item__thumbnail-container { display: block; position: relative; overflow: hidden; padding-bottom: 100%; border-radius: 9px;} .hm-multi-item .hm-multi-item__thumbnail-container .hm-item-soldout { width: 80px; height: 80px; margin: -40px 0 0 -40px; font-size: 14px; } .hm-multi-item .hm-multi-item__thumbnail-container .hmn-thumb { position: absolute; left: 0px; top: 0px; width: 100%;} .hm-multi-item .hm-multi-item__thumbnail-container::after {content: "";width: 100%;height: 100%;position: absolute;top: 0;right: 0;top: 0;background-color: rgba(0, 0, 0, 0.04);} .hm-multi-item .hm-multi-item__thumbnail-container .product__tagAD {position: absolute;top: 6px;left: 6px;padding: 2.5px 2px;border-radius: 4px;background-color: rgba(0, 0, 0, 0.2);font-size: 11px;font-weight: 500;line-height: 13px;color: rgba(255, 255, 255, 0.8);z-index: 1;} .hm-multi-item .hm-multi-item__thumbnail-container .product__tagAD::before {content: "";display: inline-block;width: 12.8px;height: 12.8px;margin-right: 1px;background: url(../img/icon/ico_exclamation_16_white.svg) 50% 50% no-repeat;background-size: 100% auto;vertical-align: top;opacity: 0.8;} .hm-multi-item .hm-multi-item__thumbnail-container .product__tagEvent {position: absolute;bottom: 6px;left: 6px;padding: 0px 6px;border-radius: 3px;font-size: 12px;max-width: calc(100% - 25px);height: 20px;color: #FFFFFF;z-index: 1;background-color: #5C7CFA;font-weight: 400;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;} .hm-multi-item .hm-multi-item__infomation-container { display: block; margin-top: 10px; } .hm-multi-item .hm-multi-item__brand {display: inline-block;font-size: 13px;font-weight: 700;margin-bottom: 6px;color: #424242;} .hm-multi-item .hm-multi-item__name { display: block; max-height: 36px; font-size: 14px; font-weight: 400;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hm-multi-item .hm-multi-item__price { display: block; font-size: 0px; margin-top: 5px; } .hm-multi-item .hm-multi-item__price .product__discount-rate {display: inline-block;font-size: 18px;font-weight: 700;line-height: 18px;vertical-align: top;color: #ff1344;margin: 4px 4px 0 0;} .hm-multi-item .hm-multi-item__price .product__unit {display: inline-block;font-size: 18px;font-weight: 700;line-height: 18px;vertical-align: top;} .hm-multi-item .hm-multi-item__price > b { position:relative; bottom:-1px; font-size: 18px; } .hm-multi-item .hm-multi-item__price .price_won {font-size: 13px;} .hm-multi-item .hm-multi-item__price .maximum-price {display: block;font-size: 18px;line-height: 18px;font-weight: 700;color: #FF1344;word-break: keep-all;padding-top: 2px;} .hm-multi-item .hm-multi-item__price .maximum-price__text {font-size: 13px;font-weight: 400;vertical-align: middle;} .hm-multi-item .hm-multi-item__benefit {margin-top: 8px;} .hm-multi-item .hm-multi-item__benefit-inner {display: flex; justify-content: space-between; align-items: center;font-size: 12px;font-weight: 600;color: #339AF0;} .hm-multi-item .hm-multi-item__benefit-btn {display: inline-block;padding-right: 10px;} .hm-multi-item .hm-multi-item__benefit-info_wrap {display: none; margin-top: 6px;} .hm-multi-item .hm-multi-item__benefit-info_wrap .hm-multi-item__benefit-info{display: flex; justify-content: space-between; font-size: 11px; font-weight: 400; margin: 0;} .hm-multi-item .hm-multi-item__benefit-banner {margin-top: 6px;} .hm-multi-item .hm-multi-item__benefit-banner span {display: inline-block;font-size: 12px;color: #339AF0;font-weight: 400;line-height: 16px;} .hm-multi-item .hm-multi-item__benefit-banner .benefit-point::before {content: "";display: inline-block;width: 11px;height: 12px;margin-top: 2px;margin-right: 4px;vertical-align: top;background-image: url(../img/icon/ico_benefit_point.svg);background-size: 100% auto;background-repeat: no-repeat;} .hm-multi-item .hm-multi-item__item__cart-btn-wrap {margin-top: 11px} .hm-multi-item .hm-multi-item__item__cart-btn {display: inline-block;vertical-align: middle;width: 50px;height: auto;font-size: 14px;border-radius: 100px;padding:9px 12px;border: 1px solid #e3e3e4;box-sizing: border-box;text-align: left;} .hm-multi-item .hm-multi-item__item__cart-btn.on {border-color: #000; background-color: #000; color: #fff;width: 78px;transition: width 0.2s ease-out;} .multiple-item-msg {position: fixed;bottom: -65px;left: 22px;right: 22px;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;width: auto;z-index: 10100;background-color: #000;border-radius: 8px;padding: 16px 20px;text-align: center;} .multiple-item-msg {animation: multipleItem-msg-show 3.5s;} .multiple-item-msg span {display: inline-block;font-size: 14px;font-weight: 700;color: #fff;line-height: 24px;background-color: inherit;padding: 0;} .multiple-item-msg span::before {content: "";display: inline-block;width: 24px;height: 24px;margin-right: 8px;vertical-align: top;background-image: url(../img/icon/ico_toast_checked.svg);background-size: 100% auto;background-repeat: no-repeat;} @keyframes multipleItem-msg-show { 0% {-webkit-transform:translateY(0);transform:translateY(0);} 15% {-webkit-transform:translateY(-100px);transform:translateY(-100px);} 85% {-webkit-transform:translateY(-100px);transform:translateY(-100px);} 100% {-webkit-transform:translateY(0px);transform:translateY(0px);} } .hm-bottom-calculator__header-wrap {display: none;position: fixed; bottom: -1px; z-index: 200;width: 100%; height: auto;background-color: transparent;} .hm-bottom-calculator__header-wrap::before {content: "";display: inline-block;width: 80px;height: 19px;margin: 0px 0px 0px 0px;background: url(../img/bottom_layer_book-mark_top.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: relative;top: 1px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%); box-shadow: 0px -8px 7px -7px rgba(0 0 0 / 7%); -webkit-box-shadow: 0px -8px 7px -7px rgb(0 0 0 / 7%);border-radius: 24px 24px 0 0;z-index: 30;} .hm-bottom-calculator__header-wrap .hm-coin-animation {position: fixed;bottom: 40px;width: 100%;height: auto;pointer-events: none;} .hm-bottom-calculator__header {height: 82px;background: #fff;border-radius: 16px 16px 0 0; -webkit-border-radius: 16px 16px 0 0; box-shadow: 0px -4px 8px 0 rgba(0 0 0 / 7%); -webkit-box-shadow: 0px -4px 8px 0 rgb(0 0 0 / 7%);position: relative;;z-index: 25;} .hm-bottom-calculator__header .hm-bottom-calculator__header-title {text-align: center;margin: 0;padding: 19px 0 25px;} .hm-bottom-calculator__header .header-title__txt {display: block;font-size: 14px; text-align: center; color: #5a5a5a; font-weight: 400; margin: 0; line-height: 14px;margin-bottom: 4px;} .hm-bottom-calculator__header .header-title__txt em {font-style: normal;color: #5A5A5A;font-weight: 700;} .hm-bottom-calculator__header .header-title__emphasis {display: block;font-size: 20px; text-align: center; color: #339AF0; font-weight: 700;line-height: 20px;} .layer__bottom-calculator {visibility: hidden; top: 72px; border-radius: 16px 16px 0 0; -webkit-border-radius: 16px 16px 0 0;} .layer__bottom-calculator.hm-app__layer-popup {-webkit-transform: translateY(calc(100% - 101px)); transform: translateY(calc(100% - 101px));} .layer__bottom-calculator.hm-app__layer-popup--done {-webkit-transform: translateY(0%); transform: translateY(0%);} .layer__bottom-calculator.hm-app__layer-popup--from-bottom-show {-webkit-animation-name:layer_max-bene_from-bottom-show;animation-name:layer_max-bene_from-bottom-show;-webkit-animation-timing-function:cubic-bezier(0.685, 0, 0.255, 1);animation-timing-function:cubic-bezier(0.685, 0, 0.255, 1);-webkit-animation-duration:0.35s;animation-duration:0.35s;} .layer__bottom-calculator.hm-app__layer-popup--from-bottom-hide {-webkit-animation-name:layer_max-bene_from-bottom-hide;animation-name:layer_max-bene_from-bottom-hide;-webkit-animation-timing-function:cubic-bezier(0.685, 0, 0.255, 1);animation-timing-function:cubic-bezier(0.685, 0, 0.255, 1);-webkit-animation-duration:0.35s;animation-duration:0.35s;} .layer__bottom-calculator .hm-layer-popup {background-color: transparent;} .layer__bottom-calculator .hm-layer-popup .bottom-calculator__header-wrap {height: 49px;background: transparent;} .layer__bottom-calculator .hm-layer-popup .bottom-calculator__header-wrap::before {content: "";display: inline-block;width: 80px;height: 19px;margin: 0px 0px 0px 0px;background: url(../img/bottom_layer_book-mark_bottom.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: relative;top: 2px;left: 50%;transform: translateX(-50%);} .layer__bottom-calculator .hm-layer-popup .bottom-calculator__header {height: 30px;background: #fff;border-radius: 16px 16px 0 0;} .layer__bottom-calculator .bottom-calculator__content {height: calc(100% - 160px); padding-top: 0;padding-left: 22px;padding-right: 22px;padding-bottom: 112px;background-color: #fff;margin-top: -1px;overflow-y: auto;} .layer__bottom-calculator .bottom-calculator__content::-webkit-scrollbar {display: none;} .layer__bottom-calculator .bottom-calculator__content .bottom-calculator__title {font-size: 16px; text-align: left; color: #111; font-weight: 700; margin: 0; line-height: 24px;padding: 6px 0 14px;} .layer__bottom-calculator .bottom-calculator__content .bottom-calculator__title-num {color: #339AF0;} .layer__bottom-calculator .bottom-calculator__content .select-all__btn-wrap {display: flex;justify-content:space-between;align-items: center;position: relative;padding-bottom: 16px;} .layer__bottom-calculator .bottom-calculator__content .select-all__btn-wrap .hm-checkbox__label {position: static;top: initial;width: auto;height: 24px;line-height: 24px;padding-left: 26px;font-size: 12px;font-weight: 400; color: #797B7D;} .layer__bottom-calculator .bottom-calculator__content .select-all__btn-wrap .hm-checkbox__label::before {top: 2px;background-image: url(../img/icon/ico_circle_check_off_gray_20.svg);} .layer__bottom-calculator .bottom-calculator__content .select-all__btn-wrap .hm-checkbox__checkbox:checked + span::after {top: 2px;} .layer__bottom-calculator .bottom-calculator__content .select-all__btn {display: inline-block;position: relative;width: auto;height: 20px;line-height: 20px;padding-left: 26px;font-size: 12px;color: #797B7D;font-weight: 400;} .layer__bottom-calculator .bottom-calculator__content .select-all__btn::before {position: absolute;top: 0;left: 0;width: 20px;height: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;content: '';background-color: transparent;background-image: url(../img/icon/ico_circle_check_off_20.svg);background-repeat: no-repeat;background-position: center center;background-size: 100% auto;border: 0;border-radius: 0;} .layer__bottom-calculator .bottom-calculator__content .select-delete__btn {display: inline-block;width:62px;height: 24px;line-height: 23.5px;font-size: 12px;color: #111111;font-weight: 400;border-radius: 100px;border: 1px solid #E3E3E4;box-sizing: border-box;} .layer__bottom-calculator .bottom-calculator__bottom.no-benefit .hm-grid__cell {padding: 0;} .layer__bottom-calculator .bottom-calculator__bottom.no-benefit .hm-btns .hm-btn {background-color: #000000;color: #ffffff;border-radius: 8px;border: none;} .layer__bottom-calculator .bottom-calculator__bottom.no-benefit .hm-btns .hm-btn--lg {height: 52px;line-height: 52px;font-size: 16px;font-weight: 700;} .layer__bottom-calculator .bottom-calculator__bottom.no-benefit .btn-tooltip {display: none;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .bottom-calculator__content {display: flex;justify-content: center;align-items: center;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .product__no-result {text-align: center;margin: 0;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .product__no-result span {display: inline-block;font-size: 16px;color: #797B7D;font-weight: 400;line-height: 24px;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .product__no-result span + span {margin-top: 10px;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .product__no-result span.text-weight__bold {font-size: 18px;color: #111;font-weight: 700;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .hm-grid__cell {padding: 0;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .hm-btns .hm-btn {background-color: #000000;color: #ffffff;border-radius: 8px;border: none;} .layer__bottom-calculator .hm-layer-popup.prd__no-result .hm-btns .hm-btn--lg {height: 52px;line-height: 52px;font-size: 16px;font-weight: 700;} .layer__bottom-calculator .hm-checkbox__label {position: absolute;top: 6px;right: 8px;width: 20px;height: 20px;padding: 0;} .layer__bottom-calculator .hm-checkbox__label::before {position: absolute;top: 0;left: 0;width: 20px;height: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;content: '';background-color: transparent;background-image: url(../img/icon/ico_circle_check_off_20.svg);background-repeat: no-repeat;background-position: center center;background-size: 100% auto;border: 0;border-radius: 0;} .layer__bottom-calculator .hm-checkbox__checkbox:checked + span::after {position: absolute;top: 0;left: 0;width: 20px;height: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;content: '';background-color: transparent;background-image: url(../img/icon/ico_circle_check_on_20.svg);background-repeat: no-repeat;background-position: center center;background-size: 100% auto;border: 0;border-radius: 0;} @-webkit-keyframes layer_max-bene_from-bottom-show { 0% {-webkit-transform:translate3d(0, calc(100% - 120px), 0);transform:translate3d(0, calc(100% - 120px), 0);} 100% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} } @keyframes layer_max-bene_from-bottom-show { 0% {-webkit-transform:translate3d(0, calc(100% - 120px), 0);transform:translate3d(0, calc(100% - 120px), 0);} 100% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} } @-webkit-keyframes layer_max-bene_from-bottom-hide { 0% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 100% {-webkit-transform:translate3d(0, calc(100% - 120px), 0);transform:translate3d(0, calc(100% - 120px), 0);} } @keyframes layer_max-bene_from-bottom-hide { 0% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 100% {-webkit-transform:translate3d(0, calc(100% - 120px), 0);transform:translate3d(0, calc(100% - 120px), 0);} } .layer__bottom-calculator .hm-max-goods { display: block; width: auto !important; margin-left: -22px; margin-right: -22px; } .layer__bottom-calculator .hm-max-goods .swiper-container {padding:0 22px } .layer__bottom-calculator .hm-max-goods__item { position: relative; width: calc(33.333% - 6px) !important;} .layer__bottom-calculator .hm-max-goods__item .hm-checkbox { display: inline-block; position: absolute !important; right: 0;z-index: 100; width: 44px; height: 44px;} .layer__bottom-calculator .hm-max-goods__item .hm-checkbox .hm-checkbox__checkbox { position: absolute !important; } .layer__bottom-calculator .hm-max-goods__link { display: block;width: 100%;} .layer__bottom-calculator .hm-max-goods__thumbnail-container { display: block; position: relative; padding-bottom: 100%; border-radius: 9px; overflow: hidden;} .layer__bottom-calculator .hm-max-goods__thumbnail-container::before {content: ""; position: absolute; top:0px; left: 0px; right: 0px; bottom: 0px; z-index: 10; background-color:rgba(0,0,0,0.03)} .layer__bottom-calculator .hm-max-goods__thumbnail-container .hm-thumb { position: absolute; left: 0px; top: 0px; max-height: 100%; object-fit: cover;} .layer__bottom-calculator .hm-max-goods__thumbnail-container .product__tagEvent {position: absolute;bottom: 6px;left: 6px;padding: 0px 6px;border-radius: 3px;font-size: 12px;max-width: calc(100% - 25px);height: 20px;line-height: 20px;color: #FFFFFF;z-index: 1;background-color: #5C7CFA;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: nowrap;} .layer__bottom-calculator .hm-max-goods__infomation-container { display: block; margin-top: 9px; } .layer__bottom-calculator .hm-max-goods__brand {display: block;font-size: 12px;font-weight: 700;color: #424242;margin-bottom: 4px;} .layer__bottom-calculator .hm-max-goods__name {display: block; height: 32px; max-height: 32px; font-size: 13px; font-weight: 400;color:#111;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .layer__bottom-calculator .hm-max-goods__information-middle { display: block; padding-top: 5px; } .layer__bottom-calculator .hm-max-goods__price { display: block; line-height: 1.1; } .layer__bottom-calculator .hm-max-goods__price .product__discount-rate {display: inline-block;font-size: 14px;font-weight: 700;line-height: 14px;vertical-align: top;color: #ff1344;padding-bottom: 2px;} .layer__bottom-calculator .hm-max-goods__price-item { display: block; font-size: 13px; font-weight: 400;} .layer__bottom-calculator .hm-max-goods__price-item > b { position:relative;bottom:-1px;font-size: 16px; font-weight: 700;padding-right: 1px;} .layer__bottom-calculator .max-benefit-price {color: #FF1344;} .layer__bottom-calculator .max-benefit-price__text {display: block;font-size: 13px;font-weight: 400;line-height: 16px;padding-top: 3px;} .layer__bottom-calculator .hm-max-goods__benefit-banner {margin-top: 6px;} .layer__bottom-calculator .hm-max-goods__benefit-banner span {display: inline-block;font-size: 12px;color: #339AF0;font-weight: 500;} .layer__bottom-calculator .hm-max-goods__benefit-banner .benefit-point::before {content: "";display: inline-block;width: 12px;height: 12px;margin-right: 4px;margin-top: 2px;vertical-align: top;background-image: url(../img/icon/ico_benefit_point.svg);background-size: 100% auto;} .layer__bottom-calculator .hm-max-goods__benefit-banner .benefit-point-num {display: block;font-size: 12px;font-weight: 500;color: #339AF0;} .layer__bottom-calculator .hm-max-goods__item .btn-wrap {margin-top: 10px} .layer__bottom-calculator .hm-max-goods__item .hm-multi-item__item__delete-btn {display: inline-block;vertical-align: middle;width: 41px;height: 24px;line-height: 24px;font-size: 12px;border-radius: 100px;border: 1px solid #e3e3e4;box-sizing: border-box;} /* .layer__bottom-calculator .hm-max-goods__price-item .hm-multi-item__item__delete-btn.on {border-color: #000; background-color: #000; color: #fff;} */ .layer__bottom-calculator .hm-max-goods__calculator {margin-top: 25px;} .layer__bottom-calculator .calculator-inner {padding: 22px 22px 24px;margin:0 -22px;background-color: #F4F4F4;} .layer__bottom-calculator .calculator-inner p {margin: 0;} .layer__bottom-calculator .calculator-inner em {display:inline-block;margin-left: 1px; font-style: normal;} .layer__bottom-calculator .calculator-inner .total-price-area {padding-bottom: 20px;} .layer__bottom-calculator .calculator-inner .total-price-area .total-price-txt {display: flex;justify-content: space-between;align-items: center;line-height: 21px;margin-bottom: 3px;color: #111;font-size: 15px;font-weight: 700;} .layer__bottom-calculator .calculator-inner .total-price-area .total-price-txt-num {font-size: 19px;display: flex;align-items: center;} .layer__bottom-calculator .calculator-inner .total-price-area .total-price-txt-num em {font-size: 17px;font-weight: 400;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap {background-color: #fff;border-radius: 9px;padding: 20px 16px 20px;margin-bottom: 9px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .benefit-area__title {display: flex;justify-content: space-between;align-items: center;color: #111;font-size: 15px;font-weight: 700;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .benefit-area__title .total-price-txt-num {display: flex;align-items: center;font-size: 19px;font-weight: 700;color: #339AF0;line-height: normal;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .benefit-area__title .total-price-txt-num em {font-size: 17px;font-weight: 400;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-divider {margin-top: 16px;margin-bottom: 16px;background-color: #ECECED;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-divider.color__light {margin-top: 16px;margin-bottom: 4px;background-color: #f4f4f4;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle {padding: 0;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle + .hm-box-toggle {padding-top: 10px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle__content {padding-top: 10px;padding-bottom: 0;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle__content.set-price {padding-top: 8px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap.instant-discount__wrap {margin-bottom: 0px;} .layer__bottom-calculator .calculator-inner #noGoodsBenefit {margin-bottom: 0px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap.instant-discount__wrap .hm-box-toggle__content {padding-top: 0;padding-bottom: 0;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle__content.instant-discount {padding-top: 10px;padding-bottom: 0;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .benefit-area__toggle-title {display: flex;justify-content: space-between;align-items: center;line-height: normal;color: #111;font-size: 15px;font-weight: 700;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .set-price-num {display: flex;align-items: center;font-size: 19px;font-weight: 700;padding-right: 20px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .set-price-num em {font-size: 17px;font-weight: 400;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .discount-price-num {display: flex;align-items: center;font-size: 19px;font-weight: 700;padding-right: 20px;color: #339AF0;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .discount-price-num em {font-size: 17px;font-weight: 400;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle__title::before { content: ''; position: absolute; right: 0; top: 50%; margin-top: -4px; width: 12px; height: 7px; background: url("../img/icon/ico_accordion_arrow_bottom.svg") no-repeat center center; background-size: 100% auto; } .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle__title--active::before { content: ''; position: absolute; right: 0; top: 50%; margin-top: -4px; width: 12px; height: 7px; background: url("../img/icon/ico_accordion_arrow_top.svg") no-repeat center center; background-size: 100% auto; } .layer__bottom-calculator .calculator-inner .benefit-area {} .layer__bottom-calculator .calculator-inner .benefit-area .brand-promotion__date {font-size: 11px;font-weight: 400;color: #797B7D;line-height: 21px;} .layer__bottom-calculator .calculator-inner .brand-title__date {font-size: 12px;line-height: 18px;padding-bottom: 16px;} .layer__bottom-calculator .calculator-inner .brand-title__date .title__date {font-weight: 500;line-height: 18px;color: #111;} .layer__bottom-calculator .calculator-inner .brand-title__date .title__date-text {font-weight: 400;line-height: 18px;color: #797B7D;} .layer__bottom-calculator .calculator-inner .brand-benefit > p {display: flex;justify-content: space-between;align-items: center;line-height: 21px;color: #111;} .layer__bottom-calculator .calculator-inner .brand-benefit-title {margin-bottom: 3px;} .layer__bottom-calculator .calculator-inner .brand-benefit-title .brand-benefit-title-txt {display: flex;width: 50%;font-size: 14px;font-weight: 500;} .layer__bottom-calculator .calculator-inner .brand-benefit-title .brand-benefit-title-txt.tooltip-none {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;width: auto;max-width: 170px;} .layer__bottom-calculator .calculator-inner .brand-benefit-title .prd-title {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;max-width: calc(100% - 26px);height: 21px;line-height: 21px;} .layer__bottom-calculator .calculator-inner .brand-benefit-title-num {font-size: 18px;width: 50%;text-align: right;font-weight: 400;} .layer__bottom-calculator .calculator-inner .brand-benefit-title-num em {font-size: 16px;font-weight: 400;vertical-align: top;} .layer__bottom-calculator .calculator-inner .brand-benefit-info {font-size: 13px;color: #424242;font-weight: 400;padding-top: 3px;} .layer__bottom-calculator .calculator-inner .brand-benefit-info .brand-benefit-info-txt {display: inline-block;padding-left: 4px;color: #424242;} .layer__bottom-calculator .calculator-inner .brand-benefit-info .brand-benefit-info-txt::before {content: "";display: inline-block;width: 6px;height: 6px;margin: 5px 4px 0 0;background: url(../img/icon/ico_benefit_include.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .layer__bottom-calculator .calculator-inner .brand-benefit-benefit-num {font-size: 16px;} .layer__bottom-calculator .calculator-inner .brand-benefit-benefit-num em {font-size: 14px;} .layer__bottom-calculator .calculator-inner .brand-benefit-info-num {font-size: 16px;display: flex;align-items: center;color: #424242;} .layer__bottom-calculator .calculator-inner .brand-benefit + .addition-benefit, .layer__bottom-calculator .calculator-inner .addition-benefit + .addition-benefit {margin-top: 17px;} .layer__bottom-calculator .calculator-inner .addition-benefit__inner + .addition-benefit__inner {margin-top: 13px;} .layer__bottom-calculator .calculator-inner .addition-benefit-info {display: flex;justify-content: space-between;align-items: center;line-height: 21px;color: #111;} .layer__bottom-calculator .calculator-inner .addition-benefit-info + .addition-benefit-info {padding-top: 8px;} .layer__bottom-calculator .calculator-inner .addition-benefit-info .addition-benefit-info-txt {display: flex;width: 55%;font-size: 14px;font-weight: 500;color: #111111;} .layer__bottom-calculator .calculator-inner .addition-benefit-info .addition-benefit-info-txt.tooltip-none {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;width: 55%;max-width: 170px;} .layer__bottom-calculator .calculator-inner .addition-benefit-info .prd-title {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;max-width: calc(100% - 26px);height: 21px;line-height: 21px;} .layer__bottom-calculator .calculator-inner .addition-benefit-info .benefit-title {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;max-width: calc(100% - 26px);height: 21px;line-height: 21px;font-weight: 400;} .layer__bottom-calculator .calculator-inner .addition-benefit-num {font-size: 18px;font-weight: 400;width: 45%;;text-align: right;} .layer__bottom-calculator .calculator-inner .addition-benefit-num em {font-size: 16px;font-weight: 400;vertical-align: top;} .layer__bottom-calculator .calculator-inner .addition-benefit-info__sub {display: inline-block;font-size: 12px;font-weight: 400;color: #797B7D;line-height: 21px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;max-width: 170px;} .layer__bottom-calculator .calculator-inner .hm-tooltip {content: "";display: inline-block;width: 16px;height: 16px;margin: 2px 0px 0 6px;background: url(../img/icon/ico_bang_circle_gray.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: relative;} .layer__bottom-calculator .calculator-inner .hm-tooltip .hm-tooltip-text {visibility: hidden;width: 188px; background-color: #3C3C3C;color: #fff;text-align:start;border-radius: 9px;padding: 12px 16px 12px 12px;position: absolute;z-index: 1;bottom: 26px;left: -19px;margin-left: -69px;border: 0;font-size: 12px;font-weight: 400;word-break: keep-all;line-height: 21px;} .layer__bottom-calculator .calculator-inner .hm-tooltip .hm-tooltip-text::before {content: "";position: absolute;top: 98%;left: 44.5%;margin-left: -8px;border-width: 8px;border-style: solid;border-color: #3C3C3C transparent transparent transparent;pointer-events: none;} .layer__bottom-calculator .calculator-inner .hm-tooltip .hm-tooltip-text .tooltip-close {display: inline-block;width: 8px;height: 8px;margin: 6px 0px 0 8px;background: url(../img/icon/delete_white.png) no-repeat 0 0;background-size: 100% auto;vertical-align: top;font-size: 0;color: transparent;} html.ios .layer__bottom-calculator .calculator-inner .hm-tooltip .hm-tooltip-text .tooltip-close {margin: 7px 0px 0 8px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left {content: "";display: inline-block;width: 16px;height: 16px;min-width: 16px;min-height: 16px;margin: 2px 0px 0 6px;background: url(../img/icon/ico_bang_circle_gray.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: relative;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text {visibility: hidden;width: auto; max-width: 77vw;background-color: #3C3C3C;color: #fff;text-align:start;border-radius: 9px;padding: 12px 6px 12px 12px;position: absolute;z-index: 1;top: initial;bottom: 28px;left: 29px;margin-left: -69px;border: 0;font-size: 12px;font-weight: 400;word-break: keep-all;white-space: nowrap;line-height: normal;box-sizing: border-box;display: flex;justify-content: space-between;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text.card-promotion {width: auto;max-width: 68vw;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text.card-promotion-notice {left: -42px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text::before {content: "";position: absolute;top: 100%;left: 48px;margin-left: -8px;border-width: 8px;border-style: solid;border-color: #3C3C3C transparent transparent transparent;pointer-events: none;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text.card-promotion-notice::before {left: 119px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text .tooltip-close {display: inline-block;width: 8px;height: 8px;margin: 0;background: url(../img/icon/ico_tooltip_close.svg) no-repeat 6px 6px;background-size:auto;vertical-align: top;font-size: 0;color: transparent;position: static;padding: 6px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner {width: calc(100% - 28px);height: auto;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner__prd {display: flex;justify-content: space-between;align-items: center;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner__prd .prd-name {width: auto;height: 20px;max-height: 20px;overflow: hidden;text-overflow: ellipsis;display: block;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: nowrap;font-size: 12px;font-weight: 400;line-height: 20px;margin-right: 16px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner__prd .prd-name.title {font-weight: 700;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner__prd .prd-price {text-align: right;color: #4DABF7;height: 20px;line-height: 20px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner .sub-info__txt {display: block;font-size: 10px;font-weight: 400;color: #A9AAAA;line-height: 12px;width: 100%;max-height: 12px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: nowrap;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .tooltip-inner .sub-info__txt + .tooltip-inner__prd {padding-top: 10px;} .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .promotion-card__list {font-size: 10px;color: #A9AAAA;font-weight: 400;line-height: 20px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: nowrap;} html.ios .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-arrow__left .hm-tooltip-text .tooltip-close {margin: 0;} /* 세트금액대별 */ /* .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .hm-tooltip-text {left: -30px; min-width: 241px;} .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .hm-tooltip-text::before {left: 107px;} .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .tooltip-inner > p + p {padding-top: 4px;} .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .tooltip-inner .sub-info__txt { white-space: wrap; overflow: visible; max-height: none;line-height: 16px; word-break: break-all;} .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .tooltip-inner__prd .prd-name{flex-shrink: 0;} .layer__bottom-calculator .calculator-inner .benefits_for_set .hm-tooltip.tooltip-arrow__left .prd-price {text-align: left; flex-shrink: 0;} */ .layer__bottom-calculator .calculator-inner .hm-tooltip.tooltip-active .hm-tooltip-text {visibility: visible;} .layer__bottom-calculator .benefit-notice {padding-top: 20px;} .layer__bottom-calculator .benefit-notice .benefit-notice-total {display: flex;justify-content: space-between;align-items: center;line-height: 21px;margin-bottom: 3px;font-size: 15px;font-weight: 700;} .layer__bottom-calculator .benefit-notice .benefit-notice-total-num {font-size: 19px;display: flex;align-items: center;font-weight: 700;} .layer__bottom-calculator .benefit-notice .benefit-notice-total-num em {font-size: 17px;font-weight: 400;} .layer__bottom-calculator .benefit-notice .benefit-notice-title {display: flex;justify-content: space-between;align-items: center;line-height: 21px;padding-top: 2px;} .layer__bottom-calculator .benefit-notice .benefit-notice-title .benefit-notice-title-txt {display: flex;width: 60%;font-size: 14px;font-weight: 400;} .layer__bottom-calculator .benefit-notice .benefit-notice-title .benefit-notice-title-txt.tooltip-none {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;width: auto;max-width: 170px;} .layer__bottom-calculator .benefit-notice .benefit-notice-title .prd-title {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;max-width: calc(100% - 26px);height: 21px;line-height: 21px;color: #424242;} .layer__bottom-calculator .benefit-notice .benefit-notice-title-num {font-size: 16px;width: 40%;text-align: right;font-weight: 700;color: #FF1344;} .layer__bottom-calculator .benefit-notice .benefit-notice-title-num em {font-size: 14px;font-weight: 400;vertical-align: top;} .layer__bottom-calculator .calculator-info {padding-top: 22px;} .layer__bottom-calculator .calculator-info .calculator-info__paragraph-wrap {padding-bottom: 12px;} .layer__bottom-calculator .calculator-info .calculator-info__paragraph-wrap .calculator-info__paragraph {display: block;margin: 0;font-size: 12px;color: #111;font-weight: 400;line-height: 20px;padding-left: 19px;position: relative;} .layer__bottom-calculator .calculator-info .calculator-info__paragraph-wrap .calculator-info__paragraph + .calculator-info__paragraph {margin-top: 8px;} .layer__bottom-calculator .calculator-info .calculator-info__paragraph-wrap .calculator-info__paragraph::before {content: '';position: absolute;left: 0;display: inline-block;width: 13.8px;height: 13.8px;background: url("../img/icon/ico_info_mark_black.svg") no-repeat center center;background-size: 100% auto;margin-top: 3px;} .layer__bottom-calculator .calculator-info .hm-box-toggle--border-none {padding: 0;margin-bottom: 24px;} .layer__bottom-calculator .calculator-info .hm-box-toggle__title {text-align: center;} .layer__bottom-calculator .calculator-info .hm-box-toggle__title::before {content: none;} .layer__bottom-calculator .calculator-info .hm-box-toggle__title--active::before {content: none;} .layer__bottom-calculator .calculator-info .hm-box-toggle__title .calculator-info__title::after {content: '';display: inline-block;width: 10px;height: 6px;background: url("../img/icon/ico_arrow_gray_bottom_9.svg") no-repeat center center;background-size: 100% auto;margin-left: 4px;margin-bottom: 1px;} .layer__bottom-calculator .calculator-info .hm-box-toggle__title--active .calculator-info__title::after {background: url("../img/icon/ico_arrow_gray_top_9.svg") no-repeat center center;background-size: 100% auto;} .layer__bottom-calculator .calculator-info .hm-box-toggle--border-none .hm-box-toggle__content {padding-top: 12px;font-size: 12px;font-weight: 400;color: #797B7D;} .layer__bottom-calculator .calculator-info .calculator-info__title {text-align: center;font-size: 12px;color: #797b7d;} .layer__bottom-calculator .calculator-info .hm-list {font-size: 12px;font-weight: 400;color: #797b7d;} .layer__bottom-calculator .calculator-info .hm-list--ul-disc > .hm-list__item {padding: 0 0 0 19px;margin-bottom: 6px;} .layer__bottom-calculator .calculator-info .hm-list--ul-disc > .hm-list__item:last-child {margin-bottom: 0px;} .layer__bottom-calculator .calculator-info .hm-list--ul-disc > .hm-list__item::before {display: inline-block;position: absolute;top: 8px;left: 6px;width: 2px;height: 2px;-webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #797b7d;border-radius: 50%;content: '';} .layer__bottom-calculator .bottom-calculator__bottom {position: fixed; left:0; right:0; bottom:0; height: 102px; padding-left: 22px; padding-right: 22px; background: rgb(255,255,255);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%);z-index: 2;} .layer__bottom-calculator .bottom-calculator__bottom .btn-bottom-calculator {margin-top: 16px;} .layer__bottom-calculator .bottom-calculator__bottom .btn-bottom-calculator .hm-grid {margin: 0;} .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--4, .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--8 {padding: 0;} .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--4 + .hm-grid__cell--8 {padding-left: 9px;} .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--4 .hm-btn {border: var(--hi-border-21);background-color: var(--hi-bg-white);border-radius: 8px;height: 52px;display: flex;justify-content: center;align-items: center;font-size: var(--hi-fs-body3);font-weight: var(--hi-font-w700);color: var(--hi-text-gray7);line-height: 16px;} .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--8 .hm-btn {background-color: #000; color: #fff;border-radius: 8px;border: 0;font-size: 16px;font-weight: 700;height: 52px;line-height: 52px;} .layer__bottom-calculator .bottom-calculator__bottom .btn-tooltip {position: absolute;top: -16px;right: calc(33.3333% - 60px);background-color: #3C3C3C;display: inline-block;border-radius: 8px;padding: 4px 12px;width: auto; pointer-events: none;} .layer__bottom-calculator .bottom-calculator__bottom .btn-tooltip::before {content: "";position: absolute;top: 98%;right: 57px;margin-left: -8px;border-width: 8px;border-style: solid;border-color: #3C3C3C transparent transparent transparent;pointer-events: none;} .layer__bottom-calculator .bottom-calculator__bottom .btn-tooltip__txt {display: inline-block;height: 20px;line-height: 20px;font-size: 12px;font-weight: 400;color: #fff;} .layer__bottom-calculator .bottom-calculator__bottom .btn-tooltip__txt em {display: inline-block;height: 20px;line-height: 20px;font-weight: 700;color: #4DABF7;font-style: normal;} .layer__bottom-calculator .bottom-calculator__bottom.purchase-btn__disable .hm-grid__cell--8 .hm-btn {background-color: #F4F4F4;color: rgba(0, 0, 0, .40);} .layer__bottom-calculator .bottom-calculator__bottom.purchase-btn__disable .btn-tooltip {display: none;} @media screen and (max-width: 300px){ .layer__bottom-calculator .calculator-inner .total-price-area .total-price-txt {font-size: 14px;} .layer__bottom-calculator .calculator-inner .total-price-area .total-price-txt-num {font-size: 17px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .benefit-area__title {font-size: 13px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .benefit-area__title .total-price-txt-num {font-size: 16px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .benefit-area__toggle-title {font-size: 13px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .set-price-num {font-size: 16px;} .layer__bottom-calculator .calculator-inner .brand-benefit-title .brand-benefit-title-txt {font-size: 13px;} .layer__bottom-calculator .calculator-inner .brand-benefit-title-num {font-size: 16px;} .layer__bottom-calculator .calculator-inner .brand-benefit-info {font-size: 12px;} .layer__bottom-calculator .calculator-inner .brand-benefit-info-num {font-size: 15px;} .layer__bottom-calculator .calculator-inner .addition-benefit-info .addition-benefit-info-txt {font-size: 13px;} .layer__bottom-calculator .calculator-inner .addition-benefit-num {font-size: 16px;} .layer__bottom-calculator .calculator-inner .benefit-area__wrap .hm-box-toggle .discount-price-num {font-size: 16px;} .layer__bottom-calculator .bottom-calculator__bottom .hm-grid__cell--4 .hm-btn {font-size: 14px;} } /* 검색 레이어 */ .hm-multi-item .hm-multi-item__ly-popup .hm-multi-item__ly-popup__header {position: fixed;z-index: 10;width: calc(100% - 16px);top: -1px;display: flex;background-color: #FFFFFF;padding: 6px 8px;height: 44px;} .hm-multi-item .hm-multi-item__ly-popup .back-btn {display: block;width: 40px;height: 40px;margin: 2px 0;background: url(../img/icon/ico_arrow_left_28.svg) no-repeat 50% 50%;background-size: 28px 28px;-webkit-tap-highlight-color: transparent !important;} .hm-multi-item .hm-multi-item__ly-popup .search-box {position: relative;flex: 1;margin-right: 8px;} .hm-multi-item .hm-multi-item__ly-popup .search__window--round-box {height: 44px;padding: 10px 84px 10px 23px;border-radius: 100px;background-color: #F4F4F4;box-sizing: border-box;} .hm-multi-item .hm-multi-item__ly-popup .search__input {width: 100%;font-size: 14px;line-height: 24px;vertical-align: top;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .hm-multi-item .hm-multi-item__ly-popup .search__btn-clear {display: none;position: absolute;top: 0;right: 41px;padding: 10px 4px;} .hm-multi-item .hm-multi-item__ly-popup .search__btn-clear.show {display: block;} .hm-multi-item .hm-multi-item__ly-popup .search__btn-clear::after {content: "";display: block;width: 24px;height: 24px;background: url(../img/icon/ico_circle_close.svg) no-repeat 0 0;background-size: 100% auto;} .hm-multi-item .hm-multi-item__ly-popup .search__btn {position: absolute;top: 0;right: 12px;padding: 10px 4px;} .hm-multi-item .hm-multi-item__ly-popup .search__btn::after {content: "";display: block;width: 24px;height: 24px;background: url(../img/icon/ico_search.svg) no-repeat 0 0;background-size: 100% auto;} .hm-multi-item .hm-multi-item__ly-popup .hm-layer-popup__scroll--top-fit {padding: 56px 22px 30px 22px;overflow-y: auto;} .hm-multi-item .hm-multi-item__ly-popup .result_box {padding-top: 26px;} .hm-multi-item .hm-multi-item__ly-popup .result__top {display: flex;justify-content: space-between;margin-bottom: 6px;} .hm-multi-item .hm-multi-item__ly-popup .ly-popup__search-title {font-size: 16px;font-weight: 700;line-height: 16px;color: #121F26;margin: 0;} .hm-multi-item .hm-multi-item__ly-popup .result__no-history {padding-top: 16px;} .hm-multi-item .hm-multi-item__ly-popup .result__no-history p {font-size: 14px;font-weight: 400;line-height: 14px;color: #A9AAAA;margin: 0;} .hm-multi-item .hm-multi-item__ly-popup .result__no-result {padding-top: 34px;} .hm-multi-item .hm-multi-item__ly-popup .result__no-result p {font-size: 14px;font-weight: 400;line-height: 21px;color: #A9AAAA;margin: 0;text-align: center;} .hm-multi-item .hm-multi-item__ly-popup .result__no-result .user__search-txt {color: #111;} .hm-multi-item .hm-multi-item__ly-popup .result__btn-clear {font-size: 12px;line-height: 16px;color: #6F7882;} .hm-multi-item .hm-multi-item__ly-popup .result__chip {margin: 0 -22px;} .hm-multi-item .hm-multi-item__ly-popup .result__chips-list {padding: 0 22px;min-height: 52px;} .hm-multi-item .hm-multi-item__ly-popup .result__chips-item {width: auto;height: auto;margin-top: 16px;} .hm-multi-item .hm-multi-item__ly-popup .chips {display: inline-block;line-height: 16px;text-align: center;padding: 9px 15px;border-radius: 61px;background-color: #FFFFFF;border: 1px solid #E3E3E4;} .hm-multi-item .hm-multi-item__ly-popup .chips > a{display: inline-block;vertical-align: top;} .hm-multi-item .hm-multi-item__ly-popup .chips > a > span{font-size: 14px;color: #797B7D;} .hm-multi-item .hm-multi-item__ly-popup .chips__btn-delete {width: 12px;height: 16px;margin-left: 2px;box-sizing: border-box;background: url(../img/icon/ico_close_12.svg) no-repeat 50% 50%;background-size: 100% auto;vertical-align: top;} .hm-multi-item .hm-multi-item__ly-popup .benefit-event_box {padding: 60px 0;} .hm-multi-item .hm-multi-item__ly-popup .benefit-event {margin-top: 22px;padding: 12px 16px;background-color: #F8F9FA;border-radius: 9px;} .hm-multi-item .hm-multi-item__ly-popup .benefit-event + .benefit-event {margin-top: 12px;} .hm-multi-item .hm-multi-item__ly-popup .benefit-event .benefit-event-title {margin: 0;line-height: 21px;color: #111;font-size: 14px;} .hm-multi-item .hm-multi-item__ly-popup .benefit-event .benefit-event-info {margin: 0;line-height: 20px;color: #797B7D;font-size: 12px;padding-top: 2px;} /* 검색 결과 페이지 */ .hm-multi-item .hm-multi-item__header {position: fixed;top: -1px;width: calc(100% - 16px);display: flex;background-color: #fff;padding:6px 8px;height: 44px;z-index: 101;} .hm-multi-item .hm-multi-item__header .back-btn {display: block;width: 40px;height: 40px;margin: 2px 0;background: url(../img/icon/ico_arrow_left_28.svg) no-repeat 50% 50%;background-size: 28px 28px;-webkit-tap-highlight-color: transparent !important;} .hm-multi-item .hm-multi-item__header .search-box {position: relative;flex: 1;margin-right: 8px;} .hm-multi-item .hm-multi-item__header .search__window--round-box {height: 44px;padding: 10px 84px 10px 23px;border-radius: 100px;background-color: #F4F4F4;box-sizing: border-box;} .hm-multi-item .hm-multi-item__header .search__input {width: 100%;font-size: 14px;line-height: 24px;vertical-align: top;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .hm-multi-item .hm-multi-item__header .search__btn-clear {display: none;position: absolute;top: 0;right: 41px;padding: 10px 4px;} .hm-multi-item .hm-multi-item__header .search__btn-clear.show {display: block;} .hm-multi-item .hm-multi-item__header .search__btn-clear::after {content: "";display: block;width: 24px;height: 24px;background: url(../img/icon/ico_circle_close.svg) no-repeat 0 0;background-size: 100% auto;} .hm-multi-item .hm-multi-item__header .search__btn {position: absolute;top: 0;right: 12px;padding: 10px 4px;} .hm-multi-item .hm-multi-item__header .search__btn::after {content: "";display: block;width: 24px;height: 24px;background: url(../img/icon/ico_search.svg) no-repeat 0 0;background-size: 100% auto;} .multiple-item-category .hm-content-area {padding-bottom: 0;} .multiple-item-category.category-result .category-product-box .hm-multi-item-prod__list {padding: 20px 22px 140px;} .multiple-item-category.scrollDown .category-filter-box, .multiple-item-category.scrollDown .product-alignment-box {transition: all 0.3s ease-out;} .multiple-item-category.scrollDown .category-filter-box {top: -55px;} .multiple-item-category.scrollDown .product-alignment-box {top: -114px;} .multiple-item-category.scrollUp .category-filter-box, .multiple-item-category.scrollUp .product-alignment-box {position: fixed;z-index: 100;transition: all 0.3s ease-out;} .multiple-item-category.scrollUp .category-filter-box {top: 55px;} .multiple-item-category.scrollUp .product-alignment-box {top: 114px;} .multiple-item-category.scrollUp .product-alignment-box::after {content: "";position: absolute;top: 2px;left: 0;right: 0;height: 52px;box-shadow: 0px 2px 3px rgba(22, 37, 66, 0.1);z-index: -1;} .middle-category-box .hm-inner {position: relative;} .middle-category-box .middle-category__content {position: relative;height: 52px;background-color: #F8F9FA;overflow: hidden;} .middle-category-box .middle-category__content .middle-category__swiper {padding: 8px 76px 8px 22px;} .middle-category-box .middle-category__item {display: inline-block;width: auto;height: auto;} .middle-category-box .middle-category__item .chips{display: inline-block;padding: 9px 15px;border-radius: 61px;background-color: #FFFFFF;border: 1px solid #E3E3E4;color: #797B7D;font-size: 14px;line-height: 16px;text-align: center;} .middle-category-box .middle-category__item.middle-category__item--active .chips{font-weight: 700;background-color: #101828;color: #FFFFFF;border-color: #fff;} .middle-category-box .middle-category__btn {position: absolute;top: 8px;right: 0;width: 76px;text-align: center;z-index: 10;} .middle-category-box .middle-category__btn::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-transform: rotate(-180deg);transform: rotate(-180deg);background: linear-gradient(90deg, #F8F9FA 68.38%, rgba(248, 249, 250, 0) 94.85%);z-index: -1;} .middle-category-box .middle-category__btn button {padding: 5px;border-radius: 100px;background-color: #FFFFFF;border: 1px solid #E3E3E4;width: 36px;height: 36px;} .middle-category-box .middle-category__btn button::before {content: "";display: block;width: 12px;height: 12px;margin: 0 auto;background: url(../img/icon/ico_arrow_down_28.svg) no-repeat 0 0;background-size: 100% auto;transition: all 0.3s;} .middle-category-box .middle-category__content--active {height: auto;} .middle-category-box .middle-category__content--active .middle-category__swiper {padding: 0 76px 8px 22px;} .middle-category-box .middle-category__content--active .swiper-wrapper {flex-wrap: wrap; -webkit-transform: translate3d(0, 0, 0) !important;transform: translate3d(0, 0, 0) !important;} .middle-category-box .middle-category__content--active .middle-category__item {margin-top: 8px;} .middle-category-box .middle-category__content--active + .middle-category__btn button::before {-webkit-transform: rotate(180deg);transition: all 0.3s;transform: rotate(180deg);transition: all 0.3s;} .category-filter-box {position: absolute;top:55px;z-index: 10;width: 100%;} .category-filter-box .hm-inner {background-color: #fff;} .category-filter-box .filter__btn {position: absolute;top: 12px;left: 22px;} .category-filter-box .filter__btn::after {content: "";position: absolute;top: -6px;right: -6px;width: 15px;height: 15px;background: url(../img/icon/ico_checkbox.svg) no-repeat 0 0;background-size: 100% auto;opacity: 0;transition: all 0.3s;} .category-filter-box .filter__btn.btn-active::after {opacity: 1;} .category-filter-box .filter__btn button {padding: 5px;border-radius: 6px;background-color: #FFFFFF;border: 1px solid #E3E3E4;width: 36px;height: 36px;} .category-filter-box .filter__btn button::before {content:"";display: block;width: 24px;height: 24px;margin: 0 auto;background: url(../img/icon/ico_3lines_filter.svg) no-repeat 0 0;background-size: 100% auto;} .category-filter-box .filter__content {padding-left: 67px;} .category-filter-box .filter__swiper {padding: 12px 22px 12px 0;} .category-filter-box .filter__item {width: auto;height: auto;} .category-filter-box .filter__item .chips {padding: 9px 11px;position: relative; transition: width 0.3s ease-out;border-radius: 6px;background-color: #fff;border: 1px solid #E3E3E4;color: #797B7D;font-size: 14px;display: flex;line-height: 16px;text-align: center;} .category-filter-box .filter__item .chips span {max-width: 122px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .category-filter-box .filter__item .chips--icon-check::before {content: "";display: none;width: 16px;height: 16px;margin-right: 4px;background: url(../img/icon/ico_check_16_white.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;opacity: 0;} .category-filter-box .filter__item .chips--icon-arrow-down::after {content: "";display: inline-block;width: 12px;height: 12px;margin: 2px 0 0 4px;background: url(../img/icon/ico_arrow_down_12.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .category-filter-box .filter__item .chips__floating-txt {display: none;position: absolute;top: -4px;left: 8px;padding: 0 3px;font-size: 10px;font-weight: 400;line-height: 10px;color: #797B7D;background-color: #FFFFFF;max-width: 70% !important;} .category-filter-box .filter__item .chips__filter-txt {display: none;} .category-filter-box .filter__item.filter__item--active .chips {border-color: #000;} .category-filter-box .filter__item.filter__item--active .chips__title-txt {display: none;} .category-filter-box .filter__item.filter__item--active .chips__floating-txt {display: block;} .category-filter-box .filter__item.filter__item--active .chips__filter-txt {display: inline;color: #111;font-weight: 700;} .category-filter-box .filter__item.filter__item--active .chips--icon-arrow-down::after {display: none;} .category-filter-box .filter__item--event .chips {padding: 11px 12px;} .category-filter-box .filter__item--event .chips::after {content: "";display: inline-block;width: 12px;height: 12px;margin: 2px 0 0 4px;background: url(../img/icon/ico_arrow_down_12_sky.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .category-filter-box .filter__item--event .chips--benefit {padding: 9px 12px; background-color: #fff;border-color: #339AF0; font-weight: 700;} .category-filter-box .filter__item--event .chips--benefit span {color: #339AF0;} .category-filter-box .filter__item--event .chips--off {display: block;} .category-filter-box .filter__item--event .chips--on {display: none;} .category-filter-box .filter__item--event.filter__item--active .chips::after {content: none;} .category-filter-box .filter__item--event.filter__item--active .chips--benefit {background-color: #339AF0;border-color: #339AF0;} .category-filter-box .filter__item--event.filter__item--active .chips--benefit span {color: #fff;} .category-filter-box .filter__item--event.filter__item--active .chips--icon-check::before {display: inline-block;opacity: 1;} .category-filter-box .filter__item--event.filter__item--active .chips--off {display: none;} .category-filter-box .filter__item--event.filter__item--active .chips--on {display: block;} .category-filter-box .filter__item--shipping.filter__item--active .chips {border-color: #FF1344;color: #FF1344;} .category-filter-box .filter__item--shipping.filter__item--active .chips--icon-check::before {display: inline-block;opacity: 1;background: url(../img/icon/ico_check_16_red.svg) no-repeat 0 0;background-size: 100% auto;margin-right:0;} /* 바텀 레이어 공통 */ .hm-multi-item .hm-app__dimm {background-color: rgba(0, 0, 0,.6) !important;} .multiple-item__layer-popup .hm-layer-popup {top: initial;left: 0;right: 0;bottom: 0;box-sizing: border-box;display: inline-flex;flex-direction: column;flex-wrap: nowrap;width: 100%;height: calc(100% - 16.5333vw);max-width: 100%;background-color: #FFFFFF;min-height: 240px;max-height: calc(100% - 16.5333vw);border-radius: 16px 16px 0px 0px;box-shadow: 0px 0px 8px 4px rgba(22, 37, 66, 0.06);} .multiple-item__layer-popup .bottom-sheet-header {box-sizing: border-box;flex-shrink: 0;flex-grow: 0;display: inline-flex;align-items: center;justify-content: center;} .multiple-item__layer-popup .bottom-sheet-header-bar {width: 12.8vw;height: 3px;margin: 7px auto 14px;background-color: #D4D5D6;border-radius:100px;} .multiple-item__layer-popup .bottom-sheet-body::-webkit-scrollbar {display: none;} .multiple-item__layer-popup .bottom-sheet-body {box-sizing: border-box;overflow: hidden;overflow-y: auto;} .multiple-item__layer-popup .bottom-sheet-body > .hm-inner {padding: 10px 22px 0;} /* 바텀 필터 레이어 */ .bottom-filter__layer-popup .bottom-sheet-header {width: 100%;height: auto;box-sizing: initial;flex-shrink: initial;flex-grow: initial;display: initial;align-items: initial;padding: 20px 0 8px 22px;} .bottom-filter__layer-popup .bottom-sheet__title {font-size: 16px;font-weight: 700;line-height: 24px;color: #111111;margin: 0;} .bottom-filter__layer-popup.hm-app__layer-popup:not(.hm-app__layer-popup--dimm):not(.hm-app__layer-popup--tooltip) .hm-layer-popup__close {top: 20px;right: 22px;width: 24px;height: 24px;padding: 0;background-image: url(../img/common/icon_header_close.png);background-size: 100%;} .bottom-filter__layer-popup .bottom-sheet__content {margin-top: 4px;} .bottom-filter__layer-popup .sheet-filter-box .filter__title {width: auto;height: 22px;background-color: #FFFFFF;position: -webkit-sticky;position: sticky;top: -1px;z-index: 100;padding-left: 22px;margin-right: -22px;margin-left: -22px;margin-bottom: 14px;} .bottom-filter__layer-popup .sheet-filter-box .filter__title-text {font-size: 14px;font-weight: 700;line-height: 22px;color: #A9AAAA;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list {margin: 0 -4px;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-item {display: inline-block;margin: 6px 4px;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-item .chips {padding: 9px 15px;border-radius: 61px;background-color: #FFFFFF;border: 1px solid #E3E3E4;color: #797B7D;font-size: 14px;display: inline-block;line-height: 16px;text-align: center;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-item .chips--icon-check::before {content: "";display: inline-block;width: 16px;height: 16px;margin-right: 4px;background: url(../img/icon/ico_check_16_gray.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-item--active .chips {background-color: #101828;color: #fff;border-color: #fff;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-item--active .chips span {font-weight: 700;} .bottom-filter__layer-popup .sheet-filter-box .filter__item::after {content: "";display: inline-block;width: 100%;height: 32px;margin-top: 32px;border-top: 1px solid #ECECED;} .bottom-filter__layer-popup .sheet-filter-box .filter__item:last-child::after {border-top: none;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort {display: flex;flex-wrap: wrap;margin: -13px 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item {width: 50%;margin: 20px 0 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__input {width: 1px; height: 1px;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__label {display: inline-block;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__label::before {content: "";display: inline-block;width: 22px;height: 22px;margin-right: 8px;border: 1px solid #C0C3C3;border-radius: 50%;box-shadow: inset 0 0 0 5px #FFFFFF;box-sizing: border-box;background-color: #E3E3E4;vertical-align: top;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__txt {display: inline-block;font-size: 14px;line-height: 22px;color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__input:checked + .radio__label::before {border-color: #111111;background-color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--sort .filter__chips-item .radio__input:checked + .radio__label .radio__txt {font-weight: 700;} .bottom-filter__layer-popup .sheet-filter-box .filter__item .hm-inner {margin: 0 -16px;} .bottom-filter__layer-popup .sheet-filter-box .filter__swiper {padding: 0 16px;} .bottom-filter__layer-popup .sheet-filter-box .filter__swiper .filter__chips-list {display: flex;flex-wrap: wrap;} .bottom-filter__layer-popup .sheet-filter-box .filter__swiper .swiper-pagination {color: #A9AAAA;position: initial;padding-top: 44px;} .bottom-filter__layer-popup .sheet-filter-box .filter__swiper .swiper-pagination-current {color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price {margin: -5px 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .filter__chips-item {position: relative;display: block;margin: 26px 0 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .radio__input {width: 1px;height: 1px;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .radio__label {display: inline-block;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .filter__chips-item .radio__label::before {content: "";display: inline-block;width: 22px;height: 22px;margin-right: 8px;border: 1px solid #C0C3C3;border-radius: 50%;box-shadow: inset 0 0 0 5px #FFFFFF;box-sizing: border-box;background-color: #E3E3E4;vertical-align: top;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .filter__chips-item .radio__txt {display: inline-block;font-size: 14px;line-height: 22px;color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .filter__chips-item .radio__input:checked + .radio__label::before {border-color: #111111;background-color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--price .filter__chips-item .radio__input:checked + .radio__label .radio__txt {font-weight: 700;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate {display: flex;flex-wrap: wrap;margin: -5px 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item {width: 50%;margin: 26px 0 0 0;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__input {width: 1px; height: 1px;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__label {display: inline-block;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__label::before {content: "";display: inline-block;width: 22px;height: 22px;margin-right: 8px;border: 1px solid #C0C3C3;border-radius: 50%;box-shadow: inset 0 0 0 5px #FFFFFF;box-sizing: border-box;background-color: #E3E3E4;vertical-align: top;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__txt {display: inline-block;font-size: 14px;line-height: 22px;color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__input:checked + .radio__label::before {border-color: #111111;background-color: #111111;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__input:checked + .radio__label .radio__txt {font-weight: 700;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item .radio__txt::before {content: "";display: inline-block;height: 14px;margin: 4px 5px 0 0;vertical-align: top;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item:nth-of-type(2) .radio__txt::before {width: 56px;background: url(../img/icon/ico_star_rate4.svg) no-repeat 0 0;background-size: 100% auto;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item:nth-of-type(3) .radio__txt::before {width: 42px;background: url(../img/icon/ico_star_rate3.svg) no-repeat 0 0;background-size: 100% auto;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item:nth-of-type(4) .radio__txt::before {width: 28px;background: url(../img/icon/ico_star_rate2.svg) no-repeat 0 0;background-size: 100% auto;} .bottom-filter__layer-popup .sheet-filter-box .filter__chips-list--rate .filter__chips-item:nth-of-type(5) .radio__txt::before {width: 12px;background: url(../img/icon/ico_star.svg) no-repeat 0 0;background-size: 100% auto;} .bottom-filter__layer-popup .sheet-select-filter-box {display: none;position: -webkit-sticky;position: sticky;bottom: 84px;z-index: 100;} html.ios .bottom-filter__layer-popup .sheet-select-filter-box {bottom: 102px;} html.android .bottom-filter__layer-popup .sheet-select-filter-box {bottom: 96px;} .bottom-filter__layer-popup .sheet-select-filter-box.btn-active {display: block;} .bottom-filter__layer-popup .sheet-select-filter-box .hm-inner {margin: 0 -22px;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__list {padding: 9px 22px;background-color: #F8F9FA;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__item {display: inline-block;width: auto;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__btn--delete {display: inline-block;border: 0;background: none;background-color: transparent;outline: 0;appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-radius: 0;cursor: pointer;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__txt {font-size: 14px;line-height: 22px;color: #5A5A5A;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__btn--delete::after {content: "";display: inline-block;width: 10px;height: 10px;margin: 6px 0 0 5px;background: url(../img/icon/ico_close_10_gray.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .bottom-filter__layer-popup .sheet-select-filter-box .select-filter__item--rate .select-filter__btn--delete::before {content: "";display: inline-block;width: 12px;height: 14px;margin: 5px 5px 0 0;background: url(../img/icon/ico_star.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .bottom-filter__layer-popup .sheet-button-box {position: -webkit-sticky;position: sticky;bottom: 0;display: flex;margin: 0 -22px;padding: 16px 22px 16px;background-color: #FFFFFF;z-index: 100;} html.ios .bottom-filter__layer-popup .sheet-button-box {padding: 16px 22px 34px;} html.android .bottom-filter__layer-popup .sheet-button-box {padding: 16px 22px 28px;} .bottom-filter__layer-popup .sheet-button-box .button--secondary {flex: 1;display: block;height: 52px;border: 1px solid #212121;border-radius: 8px;background-color: #FFFFFF;} .bottom-filter__layer-popup .sheet-button-box .button--secondary .button__txt {font-size: 16px;font-weight: 700;color: #111111;} .bottom-filter__layer-popup .sheet-button-box .button--secondary:disabled {opacity: 0.16;pointer-events: none;} .bottom-filter__layer-popup .sheet-button-box .button--primary {flex: 2;margin-left: 9px;width: 100%;display: block;height: 52px;border-radius: 8px;background-color: #000000;border: none;} .bottom-filter__layer-popup .sheet-button-box .button--primary .button__txt {display: inline;font-size: 16px;font-weight: 700;color: #FFFFFF;} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot {display: none;} .bottom-filter__layer-popup .sheet-button-box.btn-active .button--primary .button__txt {display: none;} .bottom-filter__layer-popup .sheet-button-box.btn-active .button--primary .hm-loading--dot {display: block;} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot .dot {display: inline-block;width: 6px;height: 6px;border-radius: 100%;background-color: rgba(255, 255, 255, 0.3);} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot .dot + .dot {margin-left: 6px;} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot .dot:nth-of-type(1) {-webkit-animation: loadingDot 0.6s 0.3s linear infinite;animation: loadingDot 0.6s 0.3s linear infinite;} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot .dot:nth-of-type(2) {-webkit-animation: loadingDot 0.6s 0.2s linear infinite;animation: loadingDot 0.6s 0.2s linear infinite;} .bottom-filter__layer-popup .sheet-button-box .button--primary .hm-loading--dot .dot:nth-of-type(3) {-webkit-animation: loadingDot 0.6s 0.1s linear infinite;animation: loadingDot 0.6s 0.1s linear infinite;} @keyframes loadingDot { 0% { width: 6px; } 50% { width: 8px;height: 8px;background-color: #fff; } 100% { width: 6px;height: 6px;background-color: rgba(255,255,255,0.3); } } /* 홈 > 튜토리얼 바텀 레이어 */ .tutorial-banner__layer .bottom-sheet-header {width: 100%;height: 52px;box-sizing: initial;flex-shrink: initial;flex-grow: initial;display: initial;align-items: initial;justify-content: initial;} .tutorial-banner__layer .bottom-sheet-header_wrap {box-sizing: border-box;flex-shrink: 0;flex-grow: 0;display: inline-flex;align-items: center;justify-content: center;} .tutorial-banner__layer .bottom-sheet-header-title {width: 100%;height: auto;padding: 20px 0 8px 22px;} .tutorial-banner__layer .bottom-sheet-header-title h1 {text-align: left;font-size: 16px;font-weight: 700;color: #111;line-height: 24px;margin: 0;} .tutorial-banner__layer .bottom-sheet-header-title .title_date {display: inline-block;text-align: left;font-size: 14px;font-weight: 400;color: #111;line-height: 21px;} .tutorial-banner__layer.hm-app__layer-popup:not(.hm-app__layer-popup--dimm):not(.hm-app__layer-popup--tooltip) .hm-layer-popup__close {top: 20px;right: 22px;width: 24px;height: 24px;padding: 0;background-image: url(../img/common/icon_header_close.png);background-size: 100%;} .tutorial-banner__layer .bottom-sheet-body {height: calc(100% - 52px);} .tutorial-banner__layer .bottom-sheet-body > .hm-inner {padding: 24px 22px 0;} .tutorial-banner__layer .bottom-sheet-body .hm-tutorial__slide {margin: 0 -22px;padding-bottom: 16px;} .tutorial-banner__layer .bottom-sheet-body .hm-tutorial__slide .swiper-wrapper {margin-bottom: 16px;} .tutorial-banner__layer .bottom-sheet-body .hm-tutorial__slide .swiper-slide img {width: 100%;height: 100%;} .tutorial-banner__layer .bottom-sheet-body .swiper-pagination {font-size: 0; line-height: 0;bottom: 0;} .tutorial-banner__layer .bottom-sheet-body .swiper-pagination-bullet {width: 6px; height: 6px; background: var(--hi-gray2); opacity: 1;} .tutorial-banner__layer .bottom-sheet-body .swiper-pagination-bullet-active {background: var(--hi-primary-black);} .tutorial-banner__layer .bottom-sheet-body .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px;} /* 홈 > 탭 > 배너 바텀 레이어 */ .benefit-banner__layer .bottom-sheet-header {width: 100%;height: auto;box-sizing: initial;flex-shrink: initial;flex-grow: initial;display: initial;align-items: initial;justify-content: initial;} .benefit-banner__layer .bottom-sheet-header_wrap {box-sizing: border-box;flex-shrink: 0;flex-grow: 0;display: inline-flex;align-items: center;justify-content: center;} .benefit-banner__layer .bottom-sheet-header-title {width: 100%;height: auto;padding: 20px 0 8px 22px;} .benefit-banner__layer .bottom-sheet-header-title h1 {text-align: left;font-size: 16px;font-weight: 700;color: #111;line-height: 24px;margin: 0;padding-bottom: 4px;} .benefit-banner__layer .bottom-sheet-header-title .title_date {display: inline-block;text-align: left;font-size: 14px;font-weight: 400;color: #111;line-height: 21px;} .benefit-banner__layer.hm-app__layer-popup:not(.hm-app__layer-popup--dimm):not(.hm-app__layer-popup--tooltip) .hm-layer-popup__close {top: 20px;right: 22px;width: 24px;height: 24px;padding: 0;background-image: url(../img/common/icon_header_close.png);background-size: 100%;} .benefit-banner__layer .bottom-sheet-body .hm-inner-img__wrap {margin: 0 -22px;} .benefit-banner__layer .bottom-sheet-body .hm-inner-img__wrap img {width: 100%;height: 100%;} /* 상품 옵션 선택 레이어 */ .prd-option__layer .hm-layer-popup {height: auto;} .prd-option__layer .bottom-sheet-header {width: 100%;height: auto;box-sizing: initial;flex-shrink: initial;flex-grow: initial;display: initial;align-items: initial;justify-content: initial;} .prd-option__layer .bottom-sheet-header_wrap {box-sizing: border-box;flex-shrink: 0;flex-grow: 0;display: inline-flex;align-items: center;justify-content: center;} .prd-option__layer .bottom-sheet-header-title {width: 100%;height: auto;padding: 20px 0 8px 22px;} .prd-option__layer .bottom-sheet-header-title h1 {text-align: left;font-size: 16px;font-weight: 700;color: #111;line-height: 24px;margin: 0;} .prd-option__layer .bottom-sheet-header-title .title_date {display: inline-block;text-align: left;font-size: 14px;font-weight: 400;color: #111;line-height: 21px;} .prd-option__layer.hm-app__layer-popup:not(.hm-app__layer-popup--dimm):not(.hm-app__layer-popup--tooltip) .hm-layer-popup__close {top: 20px;right: 22px;width: 24px;height: 24px;padding: 0;background-image: url(../img/common/icon_header_close.png);background-size: 100%;} .prd-option__layer .bottom-sheet-body .hm-prd-name__wrap {margin-bottom: 23px;} .prd-option__layer .bottom-sheet-body .hm-prd-name__wrap .hm-prd-name {display: block;font-size: 16px;font-weight: 400;line-height: 16px;height: 16px;color: #111;max-width: 90%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} .prd-option__layer .bottom-sheet-body .hm-select__wrap {padding: 0;} .prd-option__layer .bottom-sheet-body .hm-select-toggle { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #E9ECEF; border-radius: 8px; } .prd-option__layer .bottom-sheet-body .hm-select-toggle + .hm-select-toggle {margin-top: 12px;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__title { position: relative; font-size: 14px;color: #111; font-weight: 400;display: block; padding: 17px 32px 16px 16px; cursor: pointer; } .prd-option__layer .bottom-sheet-body .hm-select-toggle__title::before { content: ''; position: absolute; right: 18px; top: 50%; margin-top: -3px; width: 12px; height: 7px; background: url("../img/icon/accordion-arrow_bottom_10.png") no-repeat center center; background-size: 100% auto; } .prd-option__layer .bottom-sheet-body .hm-select-toggle__title--active::before { content: ''; position: absolute; right: 18px; top: 50%; margin-top: -3px; width: 12px; height: 7px; background: url("../img/icon/accordion-arrow_top_black.png") no-repeat center center; background-size: 100% auto; } .prd-option__layer .bottom-sheet-body .hm-select-toggle__content { display: none; overflow: hidden; position: relative; height: auto; max-height: 192px; border-top: none; } .prd-option__layer .bottom-sheet-body .hm-select-toggle__list { list-style: none; margin: 0; padding: 0; } .prd-option__layer .bottom-sheet-body .hm-select-toggle__item { -webkit-box-sizing: border-box; box-sizing: border-box; border-top: none;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item:first-child { border-top: 1px solid #ECECED; padding-top: 16px;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item a { display: table; width:100%; padding: 0 16px 20px; font-size: 14px; color: #111; box-sizing:border-box;font-weight: 400;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item a > div {display:table-cell;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item a .hm-goods-select__name {display: flex;justify-content: space-between;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item a .hm-goods-select__price {font-weight: 700;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item a .hm-goods-select__price em {font-style: normal;font-weight: 400;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__item:last-child a { padding: 0 16px 34px;} .prd-option__layer .bottom-sheet-body .hm-select-toggle__wrapper--active { border-color: #000; } .prd-option__layer .bottom-sheet-body .hm-prd-selected {display: flex;justify-content: space-between;-webkit-box-sizing: border-box;box-sizing: border-box;background-color: #F8F9FA;border-radius: 8px;position: relative;padding: 17px 32px 17px 16px;cursor: pointer;margin-top: 12px;} .prd-option__layer .bottom-sheet-body .hm-prd-selected .hm-prd-name {display: block;font-size: 14px;color: #111;font-weight: 400;max-width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} .prd-option__layer .bottom-sheet-body .hm-prd-selected > button { content: ''; position: absolute; right: 18px; top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 12px; height: 12px; background: url("../img/icon/btn_del.png") no-repeat center center; background-size: 100% auto; } .prd-option__layer .bottom-sheet-body .hm-divider {background-color: #ECECED;margin-top: 24px;margin-bottom: 21px;} .prd-option__layer .bottom-sheet-body .hm-goods-total__price-wrap {display: flex;justify-content: space-between;font-size: 14px;font-weight: 700;margin-bottom: 36px;} .prd-option__layer .bottom-sheet-body .hm-goods-total__price-wrap .hm-goods-select__price {font-size: 18px;} .prd-option__layer .bottom-sheet-body .hm-goods-total__price-wrap .hm-goods-select__price em {font-style: normal;font-weight: 400;font-size: 14px;} .prd-option__layer .bottom-sheet-body .bottom-sheet__bottom {height: auto;background-color: #fff;} .prd-option__layer .bottom-sheet-body .bottom-sheet__bottom .btn-bottom-sheet {margin-top: 0;padding: 0px 0 25px;} .prd-option__layer .bottom-sheet-body .bottom-sheet__bottom .hm-grid {margin: 0;} .prd-option__layer .bottom-sheet-body .bottom-sheet__bottom .hm-grid__cell--12 {padding: 0;} .prd-option__layer .bottom-sheet-body .bottom-sheet__bottom .hm-btn {background-color: #000; color: #fff;border-radius: 8px;border: 0;font-size: 16px;font-weight: 700;height: 52px;line-height: 52px;} /* 검색 결과 페이지 > 상품 정렬 레이어 */ .prd-sort__layer .hm-layer-popup {height: auto;} .prd-sort__layer .bottom-sheet-header {width: 100%;height: auto;box-sizing: initial;flex-shrink: initial;flex-grow: initial;display: initial;align-items: initial;justify-content: initial;} .prd-sort__layer .bottom-sheet-header_wrap {box-sizing: border-box;flex-shrink: 0;flex-grow: 0;display: inline-flex;align-items: center;justify-content: center;} .prd-sort__layer .bottom-sheet-header-title {width: 100%;height: auto;padding: 20px 0 24px 22px;} .prd-sort__layer .bottom-sheet-header-title h1 {text-align: left;font-size: 16px;font-weight: 700;color: #111;line-height: 24px;margin: 0;} .prd-sort__layer.hm-app__layer-popup:not(.hm-app__layer-popup--dimm):not(.hm-app__layer-popup--tooltip) .hm-layer-popup__close {top: 20px;right: 22px;width: 24px;height: 24px;padding: 0;background-image: url(../img/common/icon_header_close.png);background-size: 100%;} .prd-sort__layer .bottom-sheet-body .hm-inner {padding: 0px 22px;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort {margin: -5px 0 32px;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item {position: relative;display: block;margin: 26px 0 0 0;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item:first-child {margin: 8px 0 0 0;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .radio__input {width: 1px;height: 1px;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .radio__label {display: inline-block;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item .radio__label::before {content: "";display: inline-block;width: 22px;height: 22px;margin-right: 8px;border: 1px solid #C0C3C3;border-radius: 50%;box-shadow: inset 0 0 0 5px #FFFFFF;box-sizing: border-box;background-color: #E3E3E4;vertical-align: top;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item .radio__txt {display: inline-block;font-size: 14px;line-height: 22px;color: #111111;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item .radio__input:checked + .radio__label::before {border-color: #111111;background-color: #111111;} .prd-sort__layer .bottom-sheet-body .filter__chips-list--prd-sort .filter__chips-item .radio__input:checked + .radio__label .radio__txt {font-weight: 700;} .prd-sort__layer .bottom-sheet-body .bottom-sheet__bottom {height: auto;background-color: #fff;} .prd-sort__layer .bottom-sheet-body .bottom-sheet__bottom .btn-bottom-sheet {margin-top: 0;padding: 0px 0 25px;} .prd-sort__layer .bottom-sheet-body .bottom-sheet__bottom .hm-grid {margin: 0;} .prd-sort__layer .bottom-sheet-body .bottom-sheet__bottom .hm-grid__cell--12 {padding: 0;} .prd-sort__layer .bottom-sheet-body .bottom-sheet__bottom .hm-btn {background-color: #000; color: #fff;border-radius: 8px;border: 0;font-size: 16px;font-weight: 700;height: 52px;line-height: 52px;} .product-alignment-box {position: absolute;top:114px;z-index: 10;display: flex;justify-content: space-between;padding: 16px 22px;background-color: #fff;width: calc(100% - 44px);} .product-alignment-box::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 1px;background-color: #ECECED;} .product-alignment-box .product-alignment__number span {display: inline-block;font-size: 14px;line-height: 22px;color: #797B7D;} .product-alignment-box .product-alignment__number span em {font-weight: 700;font-style: normal;} .product-alignment-box .product-alignment__filter--selected span {display: inline-block;font-size: 14px;line-height: 22px;color: #111111;} .product-alignment-box .product-alignment__filter--selected span::after {content: "";display: inline-block;width: 12px;height: 12px;margin: 5px 0 0 4px;background: url(../img/icon/ico_arrow_down_16_gray4.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;} .category-banner-box {padding: 172px 22px 0;} .category-banner-box .category-banner__content {display: block;position: relative;padding: 25px 22px;background-color: #F0F5F9;border-radius: 15px;} .category-banner-box .category-banner__content::after {content: "";display: inline-block;width: 16px;height: 16px;background: url(../img/icon/ico_arrow_right_24_gray2.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: absolute;right: 22px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);} .category-banner-box .category-banner__content > span {display: block;color: #000;font-weight: 400;} .category-banner-box .category-banner__content .category-banner__title {font-size: 14px;font-weight: 700;} .category-banner-box .category-banner__content .category-banner__sub {font-size: 12px;margin-top: 6px;color: rgba(0,0,0,.7);} .category-product-box.search-page {padding-top: 96px;z-index: 9;} .product-result-box {display: flex;justify-content: center;align-items: center;height: calc(100vh - 170px);} .product-result-box p {margin: 0;text-align: center;font-size: 14px;font-weight: 400;color: #A9AAAA;line-height: 21px;} /* 테마 컨텐츠 */ html body:has(.theme-area) {overflow: hidden;width: 100%;height: 100%;} html .hm-multi-item:has(.theme-area) {height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;overscroll-behavior: none;} html .body-freezing .hm-multi-item:has(.theme-area) {overflow-y: hidden;} .hm-multi-item .theme-area .theme__main-banner {position: -webkit-sticky;position: sticky;top: 56px;z-index: 10;} .hm-multi-item .theme-area .main-banner__img-area {position: relative;font-size: 0;max-width: 100%;overflow: hidden;} .hm-multi-item .theme-area .main-banner__img-area::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 10;background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48) 100%);} .hm-multi-item .theme-area .main-banner__img-area .logo-img {position:absolute;top: 20px;left: 0;z-index: 15;width: 100%;min-width: 100%;height: auto;} .hm-multi-item .theme-area .main-banner__img-area .banner-img {max-height: calc(100vh - 56px);object-fit: cover;-webkit-transform: scale(1);transform: scale(1);transition: transform 500ms;} .hm-multi-item .theme-area .main-banner__img-area.zoom .banner-img {-webkit-transform: scale(1.15);transform: scale(1.15);transition: transform 500ms;} .hm-multi-item .theme-area .main-banner__text-area {position: absolute;bottom: 46px;left: 22px;z-index: 15;} .hm-multi-item .theme-area .main-banner__text-area .text-tag {display: inline-block;line-height: 12px;border-radius: 100px;color: #fff;font-size: 12px;font-weight: 700;background-color: rgba(0,0,0,.6);padding: 6px 8px;} .hm-multi-item .theme-area .main-banner__text-area .text-title {display: block;font-size: 32px;font-weight: 700;color: #fff;padding-top: 14px;} .hm-multi-item .theme-area .main-banner__text-area .text-duration {display: block;font-size: 14px;color: #fff;font-weight: 700;padding-top: 12px;} .hm-multi-item .theme-area .theme__main-content {position: relative;padding: 0px 23px 60px;background-color: #fff;z-index: 20;} .hm-multi-item .theme-area p {margin: 0;} .hm-multi-item .theme-area .theme__main-text {padding: 80px 0 30px;} .hm-multi-item .theme-area .theme__main-text + .theme__main-text {padding: 30px 0 30px;} .hm-multi-item .theme-area .theme__main-text:nth-of-type(1) {padding: 30px 0 30px;} .hm-multi-item .theme-area .theme__top {font-size: 16px;font-weight: 400;color: #3C3C3C;line-height: 28px;} .hm-multi-item .theme-area .theme__sub-title {font-size: 18px;font-weight: 300;color: #8A8A8A;font-family: var(--hi-ff-hama);} .hm-multi-item .theme-area .theme__prd-title{font-size: 23px;font-weight: 500;color: #424242;padding-top: 6px;font-family: var(--hi-ff-hama);} .hm-multi-item .theme-area .theme__authorship {font-size: 13px;font-weight: 300;color: #B8B8B8;line-height: 28px;padding: 20px 0 9px;} .hm-multi-item .theme-area .theme__prd-collection {margin-left: -23px;margin-right: -23px;} .hm-multi-item .theme-area .theme__prd-collection .prd-collection-list {display: flex;flex-wrap: wrap;} .hm-multi-item .theme-area .theme__prd-collection .prd-collection-list__item {width: 100%;} .hm-multi-item .theme-area .theme__prd-collection .prd-collection-list__item a {display: block;width: 100%;height: 100%;} .hm-multi-item .theme-area .theme__prd-collection .prd-collection-list__item a img{width: 100%;height: 100%;object-fit: cover;} .hm-multi-item .theme-area .theme__slide-content__title {padding-top: 68px;} .hm-multi-item .theme-area .theme__slide-content {} .hm-multi-item .theme-area .theme__slide-content > .theme__slide-content {padding-top: 0px !important;} .hm-multi-item .theme-area .theme__slide-content + .theme__slide-content {padding-top: 40px} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap {margin: 0 -23px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .swiper-container {padding: 0 22px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .slide__img-box {position: relative;font-size: 0;overflow: hidden;border-radius: 15px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btn {position: absolute;width: 30px;height: 30px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btn::after {content: "";position: absolute;top: 50%;left: 50%;width: 12px;height: 12px;background-color: #fff;border-radius: 100px;transform: translate(-50%, -50%);box-shadow: 0px 4px 4px 0 rgba(0 0 0 / 25%); -webkit-box-shadow: 0px 4px 4px 0 rgb(0 0 0 / 25%);} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item {position: absolute;top: 0;left: 0;width: 74%;border-radius: 9px;overflow: hidden;background-color: rgba(255, 255, 255, 0.5);padding: 6px 20px 6px 6px;-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__item-link {display: flex;align-items: center;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__img-box {margin-right: 9px;background: #fff;border-radius: 7px;width: 48px;height: 48px;min-width: 48px;overflow: hidden;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__img-box img {display: block;width: 100%;height: 100%;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__cont-box {padding: 3px 0px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__item-model {width: auto;max-height: 18px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 12px;font-weight: 500;color: #121F26;line-height: 18px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .point-btns__item .point-btns__item-price {font-size: 14px;font-weight: 700;color: #000;line-height: 22px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .slide__content-box {padding: 30px 20px 20px 0;font-size: 16px;color: #3C3C3C;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .slide__content-title {font-weight: 700;line-height: 28px;} .hm-multi-item .theme-area .theme__slide-content .theme__slide-wrap .slide__content-text {font-weight: 400;line-height: 28px;} .hm-multi-item .theme-area .product-detail {padding-top: 40px;} .hm-multi-item .theme-area .product-detail__img {font-size: 0;} .hm-multi-item .theme-area .product-detail__text {padding: 30px 9px 0px 0;} .hm-multi-item .theme-area .product-detail__text span {font-size: 16px;font-weight: 400;line-height: 28px;color: #3C3C3C;} .hm-multi-item .theme-area .theme__product-item__title {padding-top: 88px;} .hm-multi-item .theme-area .theme__product-item .prd-list__inner {padding:0;} .hm-multi-item .theme-area .theme__product-item .prd-list__inner:after {content: ""; display: table; clear: both;} .hm-multi-item .theme-area .theme__product-item .prd-list__item {position: relative; padding: 0 0 17px; border-bottom:1px solid #ECECED} .hm-multi-item .theme-area .theme__product-item .prd-list__item:nth-child(n+2) {padding: 17px 0 17px;} .hm-multi-item .theme-area .theme__product-item .prd-list__link {display: flex;align-items: center;} .hm-multi-item .theme-area .theme__product-item .prd-list__thumbnail-container {display: block;width: 23.19%;border-radius:5px;overflow:hidden;} .hm-multi-item .theme-area .theme__product-item .prd-list__infomation-container {display: block;width: calc(76.81% - 12px); margin-left: 12px;} .hm-multi-item .theme-area .theme__product-item .prd-list__brand {display: block;font-size: 13px;font-weight: 700;line-height: 13px;color: #424242;margin-bottom: 4px;} .hm-multi-item .theme-area .theme__product-item .prd-list__name {display: block;font-size: 14px;line-height: 18px;font-weight: 400;color: #111111;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;margin-bottom: 8px;} .hm-multi-item .theme-area .theme__product-item .prd-list__information-middle { display: block; margin-top: 7px; } .hm-multi-item .theme-area .theme__product-item .prd-list__price {display: block;font-size: 0;} .hm-multi-item .theme-area .theme__product-item .prd-list__discount-rate {display: inline-block;font-size: 18px;font-weight: 700;line-height: 18px;vertical-align: top;color: #ff1344;margin: 1px 4px 0 0;} .hm-multi-item .theme-area .theme__product-item .prd-list__discount-rate .product__unit {display: inline-block;font-size: 18px;font-weight: 700;line-height: 18px;vertical-align: top;} .hm-multi-item .theme-area .theme__product-item .prd-list__price-item {display: inline-block;line-height: 18px;font-size:18px;font-weight: 700;} .hm-multi-item .theme-area .theme__product-item .prd-list__price-item b {position: relative;bottom: -1px;} .hm-multi-item .theme-area .theme__product-item .prd-list__price-item .price-won {font-size: 13px;font-weight: 400;} .hm-multi-item .theme-area .theme__product-item .prd-list__max-price {display: block;font-size: 18px;font-weight: 700;color: #FF1344;} .hm-multi-item .theme-area .theme__product-item .prd-list__max-price b {position: relative;bottom: -1px;} .hm-multi-item .theme-area .theme__product-item .prd-list__max-price .max-price__text {font-size: 13px;font-weight: 400;color: #FF1344;} .hm-multi-item .theme-area .theme__product-btn__wrap {width: 100%;height: 52px;background-color: #000;border-radius: 8px;margin-top: 40px;} .hm-multi-item .theme-area .theme__product-btn {display: block;width: 100%;height: auto;font-size: 16px;font-weight: 700;color: #fff;text-align: center;line-height: 52px;} .hm-multi-item .theme-area .theme__event-banner__wrap {padding-top: 85px;} .hm-multi-item .theme-area .theme__event-banner__wrap .theme__prd-title {font-size: 22px;padding-bottom: 24px;} .hm-multi-item .theme-area .theme__event-banner__wrap .event-banner__link {display: block;width: 100%;height: auto;} .hm-multi-item .theme-area .event-banner-btn__wrap {text-align: center;padding-top: 24px;} .hm-multi-item .theme-area .event-banner-btn {position: relative;display: inline-block;padding: 0px 36px 0px 20px;border-radius: 100px;border: 1px solid #E3E3E4;font-size: 16px;font-weight: 400;color: #111;height: 44px;line-height: 43px;box-sizing: border-box;} .hm-multi-item .theme-area .event-banner-btn::after {content: "";display: inline-block;width: 16px;height: 16px;background: url(../img/icon/ico_arrow_right_24_gray1.svg) no-repeat 0 0;background-size: 100% auto;vertical-align: top;position: absolute;right: 16px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}