@charset "UTF-8"; body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #030507; letter-spacing: -0.02em; font-size: 14px; } canvas, img, picture, svg, video { display: block; max-width: 100%; } *, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } dt { font-weight: bold; } dd { margin-left: 0; } hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit; } pre { font-family: monospace, monospace; font-size: inherit; } address { font-style: inherit; } a { background-color: transparent; text-decoration: none; color: inherit; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: inherit; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } svg, img, embed, object, iframe { vertical-align: bottom; } button, input, optgroup, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; } button, [type=button], [type=reset], [type=submit] { cursor: pointer; } button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled { cursor: default; } :-moz-focusring { outline: auto; } select:disabled { opacity: inherit; } option { padding: 0; } fieldset { margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } [type=number] { -moz-appearance: textfield; } label[for] { cursor: pointer; } details { display: block; } summary { display: list-item; } [contenteditable]:focus { outline: auto; } table { border-color: inherit; border-collapse: collapse; } caption { text-align: left; } td, th { vertical-align: top; padding: 0; } th { text-align: left; font-weight: bold; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Thin"), url(../fonts/NotoSansKR-Thin.otf) format("opentype"); font-weight: 100; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Light"), url(../fonts/NotoSansKR-Light.otf) format("opentype"); font-weight: 300; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Regular"), url(../fonts/NotoSansKR-Regular.otf) format("opentype"); font-weight: 400; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Medium"), url(../fonts/NotoSansKR-Medium.otf) format("opentype"); font-weight: 500; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Bold"), url(../fonts/NotoSansKR-Bold.otf) format("opentype"); font-weight: 700; } @font-face { font-family: "Noto Sans KR"; src: local("Noto Sans KR Black"), url(../fonts/NotoSansKR-Black.otf) format("opentype"); font-weight: 900; } .clearfix::after { clear: both; content: ""; display: table; } .hide-text { overflow: hidden; padding: 0; text-indent: 101%; white-space: nowrap; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } caption { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .w-full { width: 100% !important; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 18px; height: 40px; border-radius: 5px; font-size: 15px; text-align: center; border: 1px solid transparent; background-color: #f2f4f6; color: #3a3a37; letter-spacing: inherit; line-height: 1.2; } .btn.outline { background-color: #ffffff !important; border-color: #ced4da; color: #343a40; } .btn.outline:active { background-color: #fafafa !important; } .btn.dark { background-color: #343a40; color: #ffffff; } .btn.dark:active { background-color: #2b3035; } .btn.gray { background-color: #e0e4e5; color: #50514f; } .btn.gray:active { background-color: #d8ddde; } .btn.gray2 { background-color: #7e8282; color: #ffffff; } .btn.gray2:active { background-color: #767a7a; } .btn.small { height: 32px; } .btn.xsm { height: 28px; font-size: 13px; min-width: 56px; padding: 0 12px; } .btn.sm { height: 36px; font-size: 14px; min-width: 72px; padding: 0 16px; } .btn.md { height: 46px; font-size: 16px; min-width: 92px; padding: 0 24px; font-weight: 500; } .btn.large, .btn.lg { min-width: 152px; height: 54px; padding: 0 42px; font-size: 17px; font-weight: 700; } .btn.xl { min-width: 220px; height: 60px; padding: 0 42px; font-size: 18px; font-weight: 500; } .btn.block { display: block; } .btn.full { width: 100%; } .btn:disabled { background-color: #dee2e6 !important; color: #495057 !important; pointer-events: none; } .btn.disabled { background-color: #dee2e6 !important; color: #495057 !important; pointer-events: none; } .bottomBtnControls { display: flex; align-items: center; gap: 6px; margin-top: 40px; } .bottomBtnControls .btn { flex: 1; } .bottomBtnControls .btn.lg { height: 54px; } .bottomBtnControls--vertical { display: block; } .bottomBtnControls--vertical .btn + .btn { margin-top: 10px; } .textBtns { display: flex; align-items: center; gap: 4px; } .textBtns__btn { position: relative; font-size: 13px; color: #666968; padding: 4px 8px; } .textBtns__btn + .textBtns__btn::before { position: absolute; content: "|"; left: -3px; top: 3px; color: #ced4da; } .textBtns__btn:active { color: #3a3a37; } .gift-btn { width: 52px; height: 52px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid #ced4da; border-radius: 5px; color: #979b9d; font-weight: 500; line-height: 1.2; flex-shrink: 0; } .gift-btn::before { content: ""; display: block; width: 24px; height: 24px; background-image: url("../images/icon_gift.png"); background-repeat: no-repeat; background-size: cover; } .gift-btn:hover { background-color: #fafafa; } .icon { font-style: normal; display: inline-block; background-repeat: no-repeat; background-size: cover; pointer-events: none; } .icon_textInfo--sm { width: 16px; height: 16px; background-image: url(../images/icon_textInfo--sm.png); } .icon_kakaoLogin { width: 20px; height: 20px; background-image: url(../images/icon_kakaoLogin.png); } .icon_naverLogin { width: 20px; height: 20px; background-image: url(../images/icon_naverLogin.png); } .icon_myLogout { width: 20px; height: 20px; background-image: url(../images/icon_myLogout.png); } .icon_new-post { width: 16px; height: 16px; background-image: url(../images/icon_new-post.png); } .icon_hot-post { width: 16px; height: 16px; background-image: url(../images/icon_hot-post.png); } .icon_image-badge { width: 16px; height: 16px; background-image: url(../images/icon_image-badge.png); } .icon_manual-download { width: 24px; height: 24px; background-image: url(../images/icon_manual-download.png); } .icon_question { background-image: url(../images/icon_question.png); width: 14px; height: 14px; } .icon_info { background-image: url(../images/icon_info.png); width: 15px; height: 15px; } .icon_gcpay { width: 85px; height: 23px; background-image: url(../images/logo_gcpay.png); } .icon_wish { background-image: url(../images/icon_wish.png); width: 20px; height: 20px; background-position: 0 0; } .icon_wish.active { background-position: -20px 0; } .icon_share { background-image: url(../images/icon_share.png); width: 20px; height: 20px; } .icon_download { background-image: url(../images/icon_download.png); width: 24px; height: 24px; } .icon_sns-kakao { background-image: url(../images/icon_sns.png); width: 40px; height: 40px; background-position: 0 0; } .icon_sns-band { background-image: url(../images/icon_sns.png); width: 40px; height: 40px; background-position: -40px 0; } .icon_sns-instagram { background-image: url(../images/icon_sns.png); width: 40px; height: 40px; background-position: -80px 0; } .icon_lock { width: 15px; height: 15px; background-image: url(../images/icon_lock.png); } .icon_phone { width: 16px; height: 16px; background-image: url(../images/icon_phone.png); } .icon_comment-user { width: 14px; height: 14px; background-image: url(../images/icon_comment-user.png); } .icon_reply { width: 12px; height: 12px; background-image: url(../images/icon_reply.png); } .icon_top-banner-close { width: 16px; height: 16px; background-image: url(../images/icon_top-banner-close.png); } .icon_search-trend { width: 18px; height: 18px; background-image: url(../images/icon_search-trend.png); } .product-list-type-2cols { padding: 0 14px; } .product-list-type-2cols__list { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 12px; column-gap: 12px; row-gap: 34px; } .product-list-type-1col__list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; } .product-list-type-1col .product-unit { padding: 0 14px; position: relative; display: flex; align-items: flex-start; gap: 10px; } .product-list-type-1col .product-unit::before { position: absolute; content: ""; top: -12px; width: calc(100% + 28px); left: -14px; height: 1px; background-color: #f1f3f5; } .product-list-type-1col .product-unit-image { width: clamp(148px, 36%, 200px); aspect-ratio: 1/1; flex-shrink: 0; } .product-list-type-1col .product-unit-info { margin-top: 4px; } .product-list-singleItem { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); padding: 0 14px; padding-bottom: 12px; -moz-column-gap: 12px; column-gap: 12px; row-gap: 48px; } .product-list-singleItem .product-unit-image { aspect-ratio: 3/2; border-radius: 6px; overflow: hidden; } .product-list-singleItem .product-unit-image a { width: 100%; background-color: rgba(15, 17, 17, 0.03); } .product-list-singleItem .product-unit-image img { -o-object-fit: contain; object-fit: contain; } .product-list-singleItem .time-sale__top .time { font-size: 16px; } .product-list-singleItem .time-sale__top .left { font-size: 15px; } .product-list-singleItem .product-unit:after { position: absolute; content: ""; bottom: -33px; width: calc(100% + 28px); left: -14px; height: 10px; background-color: #f4f6f8; } .product-list-singleItem .product-unit:last-of-type:after { display: none; } .product-unit { position: relative; } .product-unit-image { display: flex; overflow: hidden; position: relative; border-radius: 6px; } .product-unit-image img { transition: all 0.25s; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-unit-image .sold-out { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 2; background-color: rgba(0, 0, 0, 0.3); pointer-events: none; } .product-unit-image .sold-out > span { font-size: clamp(22px, 5vw, 28px); font-weight: 700; color: #ffffff; letter-spacing: -0.035em; } .product-unit-image .sold-out ~ .product-unit-addToCart, .product-unit-image .sold-out ~ .icon { pointer-events: none; } .product-unit-info { margin-top: 10px; } .product-unit-info__inner { padding-top: 4px; } .product-badge-container { display: flex; flex-wrap: wrap; min-height: 18px; -moz-column-gap: 3px; column-gap: 3px; row-gap: 4px; } .product-badge { display: inline-flex; align-items: center; font-size: 10px; height: 18px; padding: 0 8px; border-radius: 40px; background-color: #b1b6b9; font-weight: 500; } .product-badge.new { color: #40c057; background-color: #f8fef9; border: 1px solid #40c057; } .product-badge.best { color: #fab005; background-color: #fffdf5; border: 1px solid #fab005; } .product-badge.hot { color: #ff6b6b; background-color: snow; border: 1px solid #ff6b6b; } .product-badge.md-pick { color: #5c7cfa; background-color: #fcfdff; border: 1px solid #5c7cfa; } .product-badge.four-row { color: #f06595; background-color: #fffafc; border: 1px solid #f06595; } .product-unit-title { font-size: 14px; font-weight: 400; letter-spacing: -0.035em; color: #16191d; line-height: 19px; } .product-unit-title > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } .product-unit-price { display: flex; align-items: flex-end; margin-top: 3px; flex-wrap: wrap; } .product-unit-price__sale { display: flex; flex-direction: column; color: #e55454; text-align: center; } .product-unit-price__sale > .percent { font-weight: 700; font-size: 14px; } .product-unit-price__price { display: flex; align-items: center; } .product-unit-price__price > * + * { margin-left: 5px; } .product-unit-price__original { font-size: 11px; color: #343a40; text-decoration: line-through; color: #adb5bd; line-height: 16px; } .product-unit-price__current { font-size: 15px; font-weight: 700; color: #16191d; } .product-unit-price__monthly-payment { font-size: 11px; color: #495057; } .product-unit-price > * + * { margin-left: 5px; } .product-unit-price > .product-unit-price__sale + .product-unit-price__price { margin-left: 5px; } .product-unit-rating { display: flex; align-items: center; font-size: 12px; margin-top: 4px; } .product-unit-rating__score { margin-left: 4px; color: #343a40; } .product-unit-rating__count { margin-left: 2px; } .product-unit-addToCart { font-size: 0; position: absolute; bottom: 8px; right: 8px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08)); } .productOption { padding-bottom: 150px; } .productOption__title { font-size: 16px; font-weight: 500; color: #16191d; margin-bottom: 6px; } .productOption__bottom { position: fixed; bottom: 0; left: 0; right: 0; background-color: #ffffff; padding: 16px; box-shadow: 0px -1px 9px 0px rgba(0, 0, 0, 0.1); } .product-option { border: 1px solid #e9ecef; border-radius: 4px; margin-bottom: 16px; } .product-option__description { font-size: 16px; font-weight: 500; margin-bottom: 4px; } .product-option__item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 12px; min-height: 64px; cursor: pointer; } .product-option__item + .product-option__item { border-top: 1px solid #e9ecef; } .product-option__item .control-label { line-height: 1.4; } .product-option__item .custom-radio input { cursor: pointer; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .product-option__right { display: flex; flex-shrink: 0; text-align: center; align-items: flex-end; justify-content: center; flex-direction: column; line-height: 1.3; margin-left: 12px; } .product-option__price { font-size: 18px; font-weight: 700; color: #030507; } .product-option__monthly-payment { font-size: 11px; color: #495057; } .product-option__gift { font-size: 12px; color: #e03131; } .product-count { background-color: #f9f9f9; padding: 12px 20px; margin-bottom: 8px; border-radius: 4px; } .product-count__amount-top { position: relative; margin-bottom: 20px; padding-right: 24px; } .product-count__amount-title { font-size: 16px; font-weight: 500; color: #16191d; word-break: keep-all; } .product-count__amount-delete { position: absolute; width: 18px; height: 18px; background-image: url(" ../images/icon_modal-close.png"); opacity: 0.75; background-repeat: no-repeat; background-size: cover; top: 4px; right: 2px; } .product-count__amount-bottom { display: flex; justify-content: space-between; } .product-count__amount-counter { display: flex; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #e9ecef; min-width: 92px; height: 32px; border-radius: 100px; padding: 0 8px; } .product-count__amount-counter > * + * { margin-left: 4px; } .product-count__amount-number { font-weight: 500; text-align: center; min-width: 20px; } .product-count__amount-btn { width: 24px; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; } .product-count__amount-btn.plus { background-image: url('data:image/svg+xml;utf-8,'); } .product-count__amount-btn.minus { background-image: url('data:image/svg+xml;utf-8,'); } .product-count__amount-price-box > * + * { margin-left: 4px; } .product-count__amount-monthly-price { font-size: 12px; color: #495057; } .product-count__amount-price { font-size: 18px; font-weight: 700; color: #030507; } .product-total__container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .product-total__text { font-size: 14px; color: #666968; font-weight: 500; letter-spacing: -0.04em; } .product-total__price { font-size: 28px; font-weight: 900; } .product-total__price > .won { position: relative; bottom: 0.1em; font-size: 16px; font-weight: 700; margin-left: 2px; } .product-btn-container { display: flex; align-items: center; gap: 8px; } .product-btn-container .btn { flex: 1; height: 52px; font-size: 16px; font-weight: 500; } @media (min-width: 720px) { .product-list-singleItem { row-gap: 34px; } .product-list-singleItem .product-unit:after { display: none; } } .number-badge { position: absolute; top: 4px; right: 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 15px; padding: 0 4px; height: 15px; border-radius: 100px; background-color: #f03e3e; color: #ffffff; font-family: Arial; font-weight: 700; font-size: 11px; letter-spacing: -0.04em; } .infoSection { background-color: #ffffff; padding: 16px; margin-bottom: 10px; } .infoSection:last-child { margin-bottom: 0; } .infoSection__title { font-size: 16px; line-height: 20px; font-weight: 700; color: #212529; margin-bottom: 12px; } .infoSection__paragraph { font-size: 14px; color: #50514f; margin-bottom: 12px; } .infoSection__list { margin-bottom: 16px; } .infoSection__list li { position: relative; font-size: 13px; color: #50514f; margin-bottom: 6px; padding-left: 10px; } .infoSection__list li::before { position: absolute; content: ""; display: inline-block; width: 3px; height: 3px; background-color: #b1b6b9; border-radius: 50%; top: 9px; left: 2px; } .infoSection__list li:last-child { margin-bottom: 0; } .infoSection .bottomBtnControls { margin-top: 20px; } .infoSection > *:last-child { margin-bottom: 0; } .infoList li { position: relative; padding-left: 8px; color: #666968; font-size: 13px; margin-bottom: 6px; } .infoList li::before { position: absolute; content: "·"; display: inline-block; top: 0; left: 0; } .reviewRating { max-width: 360px; background-color: #fff; width: 100%; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; margin-inline: auto; } .reviewRating__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .reviewRating__inner { display: flex; width: 100%; justify-content: center; overflow: hidden; flex-direction: row-reverse; position: relative; } .reviewRating__inner .rating-0 { filter: grayscale(100%); } .reviewRating__inner > input { display: none; } .reviewRating__inner > label { cursor: pointer; width: 44px; height: 44px; margin-top: auto; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 76%; } .reviewRating__inner > input:checked ~ label, .reviewRating__inner > input:checked ~ label ~ label { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e"); } .reviewRating__inner > input:not(:checked) ~ label:active, .reviewRating__inner > input:not(:checked) ~ label:active ~ label { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23f0cd2f' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e"); } .reviewRadio { margin-bottom: 40px; } .reviewRadio__item { display: flex; justify-content: center; align-items: flex-start; padding: 20px 4px 28px; border-top: 1px dashed #dee2e6; gap: 8px; } .reviewRadio__item:last-child { border-bottom: 1px dashed #dee2e6; } .reviewRadio__item .custom-radio-container { flex-direction: column; flex-grow: 1; -moz-column-gap: 18px; column-gap: 18px; row-gap: 24px; justify-content: center; flex-wrap: wrap; align-items: flex-start; } .reviewRadio__item .custom-radio-container .custom-radio { font-weight: 500; color: #7e8282; width: 100%; } .reviewRadio__item .custom-radio-container .custom-radio input:checked + label { color: #212529; } .reviewRadio__item .custom-radio-container .custom-radio label { width: 100%; } .reviewRadio__item .b-checkbox-container { flex-grow: 1; display: flex; flex-direction: column; flex-wrap: wrap; -moz-column-gap: 8px; column-gap: 8px; row-gap: 24px; } .reviewRadio__item .b-checkbox.checkbox { font-weight: 500; color: #7e8282; font-size: 16px; margin-right: 0; } .reviewRadio__item .b-checkbox.checkbox input:checked ~ .control-label { color: #212529; } .reviewRadio__item .b-checkbox.checkbox .control-label { word-break: break-all; } .reviewRadio__item .select-box { width: 100%; } .reviewRadio__title { flex-shrink: 0; font-size: 16px; font-weight: 500; color: #16191d; margin-bottom: 20px; width: 92px; } .reviewRadio__inputRow { width: 100%; flex-grow: 1; } .reviewRadio__inputRow .input-text { margin-bottom: 12px; } .reviewRadio__inputRow .input-text:last-of-type { margin-bottom: 0; } .quick-menu__to-top { position: fixed; display: inline-block; bottom: 70px; right: 20px; z-index: 10; padding-bottom: 10px; } .quick-menu__to-top button { display: inline-flex; align-items: center; justify-content: center; } .quick-menu__to-top button:active { filter: brightness(95%); } .userText { margin-bottom: 32px; } .userText__title { font-size: 16px; margin-bottom: 10px; font-weight: 700; color: #16191d; } .userText__item { margin-bottom: 24px; } .userText__item .select-box { height: 50px; } .userText__item .nice-select { height: 50px; line-height: 48px; } .userText__itemTitle { display: block; color: #212529; font-size: 15px; font-weight: 500; margin-bottom: 6px; } .fileUplaod { margin-bottom: 32px; } .fileUplaod__title { display: block; color: #212529; font-size: 15px; font-weight: 500; margin-bottom: 4px; } .dropzone-wrapper { width: 100%; padding: 8px 0; margin-bottom: 8px; } .dropzone-wrapper .dropzone { padding: 8px; } .dropzone-wrapper #image-dropzone { display: inline-flex; align-items: center; border: 2px dashed #dee2e6; border-radius: 6px; min-width: 116px; gap: 12px; flex-wrap: wrap; } .dropzone-wrapper #image-dropzone .dz-message { margin: 0; width: 100%; font-size: 15px; font-weight: 500; color: #979b9d; } .dropzone-wrapper #image-dropzone .dz-message::before { content: ""; display: block; margin: 16px auto 0; width: 52px; height: 94px; background-image: url(../images/icon_dropzone-add.png); background-size: cover; } .dropzone-wrapper #image-dropzone .dz-preview { margin: 8px; } .dropzone-wrapper #image-dropzone .dz-preview .dz-image { width: 80px; height: 80px; border-radius: 0; } .dropzone-wrapper #image-dropzone .dz-preview .dz-remove { position: absolute; top: -5px; right: -5px; font-size: 0; width: 22px; height: 22px; background-size: cover; background-repeat: no-repeat; background-image: url(../images/icon_dropzone-remove.png); z-index: 21; } .dropzone-wrapper #image-dropzone .dz-preview .dz-remove:active { opacity: 0.9; } .dropzone-wrapper #image-dropzone .dz-preview .dz-progress { margin-top: 13px; } .dropzone-wrapper #image-dropzone .dz-default { order: 1; width: 100px; display: block; } .reviewStars { position: relative; width: 116px; height: 24px; background-color: #e3e3e3; } .reviewStars__wrapper { display: flex; align-items: center; margin-bottom: 8px; } .reviewStars__num { font-size: 18px; font-weight: 700; color: #343a40; margin-left: 8px; line-height: 24px; } .reviewStars::before { content: ""; position: absolute; display: block; top: 0; left: 0; width: 0; height: 100%; background-color: #FFD43B; } .reviewStars.star-1::before { width: 20%; } .reviewStars.star-2::before { width: 40%; } .reviewStars.star-3::before { width: 60%; } .reviewStars.star-4::before { width: 80%; } .reviewStars.star-5::before { width: 100%; } .reviewStars::after { content: ""; position: relative; display: block; width: 100%; height: 100%; background-image: url(../images/icon_reviewStars.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .reviewStars__wrapper--sm { display: flex; align-items: center; margin-bottom: 4px; } .reviewStars__wrapper--sm .reviewStars { position: relative; width: 104px; height: 20px; background-color: #e3e3e3; } .reviewStars__wrapper--sm .reviewStars.star-1::before { width: 20%; } .reviewStars__wrapper--sm .reviewStars.star-2::before { width: 40%; } .reviewStars__wrapper--sm .reviewStars.star-3::before { width: 60%; } .reviewStars__wrapper--sm .reviewStars.star-4::before { width: 80%; } .reviewStars__wrapper--sm .reviewStars.star-5::before { width: 100%; } .reviewStars__wrapper--sm .reviewStars::before { content: ""; position: absolute; display: block; top: 0; left: 0; width: 0; height: 100%; background-color: #FFD43B; } .reviewStars__wrapper--sm .reviewStars::after { content: ""; position: relative; display: block; width: 100%; height: 100%; background-image: url(../images/icon_reviewStars--sm.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .reviewStars__wrapper--sm .reviewStars + .reviewStars__num { font-size: 16px; font-weight: 700; color: #343a40; margin-left: 4px; line-height: 20px; } .inputWithBtn { display: flex; gap: 8px; } .inputWithBtn .btn { flex-shrink: 0; } .inputHalf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .inputHalf .nice-select { width: 100%; } .inputAddress .input-text { margin-bottom: 10px; } .inputAddress__postalCode { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .phoneAuth { background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 16px; border-radius: 4px; } .phoneAuth > * { margin-bottom: 12px; } .phoneAuth > *:last-child { margin-bottom: 0; } .required-asterisk { color: #f03e3e; font-weight: 400; } .textInfo { gap: 6px; color: #666968; font-size: 13px; word-break: keep-all; margin-bottom: 8px; line-height: 22px; } .textInfo .icon { margin-top: 3px; margin-right: 3px; vertical-align: top; } .textInfo em { font-style: normal; font-weight: 500; color: #252521; } .textInfo em.blue { color: #228be6; } .textInfo--dot { position: relative; } .textInfo--dot::before { content: "·"; display: inline-block; } .textInfo:has(.icon) { position: relative; padding-left: 20px; } .textInfo:has(.icon) .icon { position: absolute; top: 3px; left: 0; margin-top: 0; margin-right: 0; } .infoText { margin-bottom: 20px; } .infoText:last-child { margin-bottom: 0; } .infoText__list { margin-bottom: 16px; } .infoText__list li { position: relative; font-size: 13px; color: #50514f; margin-bottom: 4px; padding-left: 12px; } .infoText__list li::before { position: absolute; content: ""; display: inline-block; width: 3px; height: 3px; background-color: #b1b6b9; border-radius: 50%; top: 9px; left: 2px; } .infoText__list li:last-child { margin-bottom: 0; } .infoText > *:last-child { margin-bottom: 0; } .infoBox { background-color: #f8f9fa; border-radius: 6px; padding: 12px; margin-bottom: 20px; } .infoBox:last-child { margin-bottom: 0; } .infoBox__title { font-size: 16px; font-weight: 700; color: #343a40; margin-bottom: 12px; } .infoBox__paragraph { font-size: 13px; color: #50514f; margin-bottom: 12px; } .infoBox__list { margin-bottom: 16px; } .infoBox__list li { position: relative; font-size: 13px; color: #50514f; margin-bottom: 4px; padding-left: 12px; } .infoBox__list li::before { position: absolute; content: ""; display: inline-block; width: 3px; height: 3px; background-color: #b1b6b9; border-radius: 50%; top: 9px; left: 2px; } .infoBox__list li:last-child { margin-bottom: 0; } .infoBox > *:last-child { margin-bottom: 0; } .infoBox .textInfo { color: #50514f; } .infoBox em { font-style: normal; color: #f03e3e; font-weight: 500; } .infoBox i { font-style: normal; color: #3a3a37; font-weight: 500; } .section-title { position: relative; font-size: 18px; font-weight: 700; display: block; color: #0d0f12; padding-bottom: 10px; } .section-title--sm { font-size: 16px; padding-bottom: 8px; } .section-title--border { border-bottom: 1px solid #495057; } .sub-tab__trigger { display: flex; overflow-x: auto; padding: 10px 0; } .sub-tab__trigger::-webkit-scrollbar { display: none; } .sub-tab__btn { white-space: nowrap; min-height: 36px; border-radius: 32px; padding: 0 16px; font-size: 14px; font-weight: 500; color: #979b9d; border: 1px solid #ced4da; text-align: center; background-color: #ffffff; } .sub-tab__btn + .sub-tab__btn { margin-left: 6px; } .sub-tab__btn:hover { background-color: #fafafa; } .sub-tab__btn.current { color: #ffffff; background-color: #343a40; border-color: transparent; } .sub-tab__content { display: none; } .sub-tab__content.current { display: block; } .dateSearch > * + * { margin-top: 10px; } .fullBtnSection { display: flex; align-items: center; position: relative; padding: 0 16px; gap: 6px; } .fullBtnSection:last-of-type { margin-bottom: 0; } .fullBtnSection__more { position: relative; margin-right: 16px; } .fullBtnSection__more:after { content: ""; position: absolute; top: 50%; right: -18px; width: 8px; height: 8px; border-right: 2px solid #495057; border-bottom: 2px solid #495057; transform: translateY(calc(-50% - 2px)) rotate(45deg); } .fullBtnSection .btn { flex: 1; } .topSearchBox { position: relative; padding: 16px; background-color: #ffffff; } .topSearchBox .sub-tab__trigger { padding-top: 0; margin-bottom: 4px; } .topSearchBox .select-box { display: flex; margin-bottom: 8px; } .topSearchBox .inputWithBtn .input-text { font-size: 14px; } .topSearchBox .inputWithBtn .btn { height: 48px; } .bottomFixedControls { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; z-index: 10; box-shadow: 0 -1px 6px 0 rgba(0, 0, 0, 0.1); } .bottomFixedControls__inner { margin-inline: auto; max-width: 720px; display: flex; align-items: center; gap: 8px; padding: 8px; } .bottomFixedControls__inner + .bottomFixedControls__inner { padding-top: 0; } .bottomFixedControls .btn { flex: 1; height: 52px; font-size: 16px; font-weight: 500; } .bottomFixedControls__totalPrice { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 0; } .bottomFixedControls__totalPrice dt { font-size: 13px; color: #666968; font-weight: 400; } .bottomFixedControls__totalPrice dd { font-size: 22px; font-weight: 700; color: #0d0f12; letter-spacing: -0.034em; } .bottomFixedControls__totalPrice dd > .priceUnit { position: relative; font-size: 18px; margin-left: 2px; top: -2px; color: #16191d; font-weight: 500; } .popModal .popModal_content { font-family: "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important; letter-spacing: -0.01em; } .popModalContent { display: none; } .popModalContent__title { font-size: 16px; font-weight: 700; color: #212529; padding-bottom: 16px; } .popModalContent__inner { max-height: 400px; overflow-y: auto; padding-right: 12px; } .popModalContent__inner::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; } .popModalContent__inner::-webkit-scrollbar-thumb { background-color: #b3b3b3; } .popModalContent__sellerInfo dl { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; } .popModalContent__sellerInfo dl dt { flex-shrink: 0; font-size: 13px; line-height: 18px; color: #7e8282; width: 90px; font-weight: 400; } .popModalContent__sellerInfo dl dd { font-size: 13px; line-height: 18px; color: #3a3a37; } .popModalContent__discountList dl { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; } .popModalContent__discountList dl dt { flex-shrink: 0; font-size: 13px; line-height: 18px; color: #7e8282; width: 90px; font-weight: 400; } .popModalContent__discountList dl dd { font-size: 13px; line-height: 18px; color: #3a3a37; font-weight: 500; } .popModalContent__sellerPrivacy__item { margin-bottom: 10px; } .popModalContent__sellerPrivacy__item em { font-style: normal; font-size: 15px; color: #50514f; font-weight: 500; } .popModalContent__sellerPrivacy__item p { font-size: 13px; color: #7e8282; padding-left: 12px; font-weight: 300; } .popModalContent__sellerPrivacy__item table { width: 100%; border-collapse: collapse; margin-top: 4px; } .popModalContent__sellerPrivacy__item table th, .popModalContent__sellerPrivacy__item table td { border: 1px solid #e9ecef; padding: 8px; font-size: 13px; } .popModalContent__sellerPrivacy__item table td { color: #666968; } .popModalContent__sellerPrivacy__item table th { background-color: #f1f3f5; font-weight: 500; color: #3a3a37; } .popModalContent__sellerPrivacy__time { border-top: 1px solid #e9ecef; padding: 8px 0; margin-top: 20px; color: #3a3a37; } .popModalContent__snsShare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .popModalContent__snsShare__item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: #16191d; } .popModalContent__snsShare__item .icon { border-radius: 50%; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15); } .popModalContent__reviewBenefit dl { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 24px; } .popModalContent__reviewBenefit dl dt { flex-shrink: 0; font-size: 14px; line-height: 18px; color: #0d0f12; width: 140px; font-weight: 400; } .popModalContent__reviewBenefit dl dd { font-size: 14px; line-height: 18px; color: #666968; } .popModalContent__reviewBenefit dl dd > em { font-weight: 500; font-style: normal; color: #1c7ed6; } .popModalContent__reviewBenefit dl:last-of-type { margin-bottom: 12px; } .popModalContent__deliveryFeeInfo { min-width: 320px; } .popModalContent__deliveryFeeInfo__item { margin-bottom: 20px; } .popModalContent__deliveryFeeInfo__item:last-child { margin-bottom: 0; } .popModalContent__deliveryFeeInfo__item em { font-style: normal; font-size: 14px; color: #50514f; font-weight: 500; } .popModalContent__deliveryFeeInfo__item p { font-size: 13px; color: #7e8282; padding-left: 12px; font-weight: 300; } .popModalContent__deliveryFeeInfo__item table { width: 100%; border-collapse: collapse; margin-top: 4px; } .popModalContent__deliveryFeeInfo__item table th, .popModalContent__deliveryFeeInfo__item table td { border: 1px solid #e9ecef; padding: 8px; font-size: 13px; } .popModalContent__deliveryFeeInfo__item table td { color: #666968; } .popModalContent__deliveryFeeInfo__item table th { background-color: #f1f3f5; font-weight: 500; color: #3a3a37; } .popModalContent__deliveryFeeInfo__controls { display: flex; align-items: flex-end; justify-content: space-between; } .popModal { max-width: 560px !important; /* Set your desired width */ } .popModal .close { right: 26px !important; top: 24px !important; } .popModal .popModal_content { margin: 0 auto !important; } .infoBtn { display: inline-flex; align-items: center; justify-content: center; } .member-badge { display: inline-block; font-size: 14px; height: 23px; padding: 0 15px; border-radius: 40px; background-color: #b1b6b9; font-weight: 500; line-height: 1.5; } .member-badge.vip { color: #116EBB; background-color: #DCF0FF; } .categoryTriggerBtn { position: relative; height: 48px; font-size: 14px; font-weight: 400; color: #030507; padding-left: 8px; padding-right: 30px; } .categoryTriggerBtn::after { content: ""; width: 7px; height: 7px; margin-top: -4.5px; border-bottom: 2px solid #999; border-right: 2px solid #999; display: block; pointer-events: none; position: absolute; right: 12px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); } .loadingImg { position: fixed; width: 52px; height: 52px; opacity: 0.3; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 40px)); z-index: 9999; display: flex; align-items: center; justify-content: center; } .productDetailInfo__count__additionalSelect { font-size: 14px; color: #7e8282; margin-top: 2px; } .file_attachments { display: flex; align-items: flex-start; margin-bottom: 20px; } .file_attachments__title { font-size: 15px; color: #343a40; font-weight: 700; padding: 4px 8px; } .file_attachments_inner { background-color: #fafafa; border: 1px solid #e9ecef; border-radius: 6px; width: 100%; padding: 4px; } .file_attachments_inner .file_item { display: flex; padding: 8px; } .file_attachments_inner .file_link { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; } .file_attachments_inner .file_info_area { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .file_attachments_inner .file_title_wrap { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; } .file_attachments_inner .file_title { flex: 0 1 auto; display: flex; min-width: 0; font-size: 13px; color: #16191d; font-weight: 400; text-align: left; } .file_attachments_inner .file_title .text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .file_attachments_inner .file_extension { margin-right: 6px; font-size: 13px; flex: 0 0 auto; display: inline-block; } .file_attachments_inner .file_volume { font-size: 13px; flex: 0 0 auto; display: inline-block; color: #979b9d; } .file_attachments_inner .task { margin-right: 6px; flex: 0 0 auto; display: flex; align-items: center; } .file_attachments_inner .task .file_attachments_inner .task [class*=button_] { flex: 0 0 auto; margin-left: 15px; } .file_attachments_inner .button_svg_download::before { display: inline-block; vertical-align: top; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M15.75%2011.25V12.15C15.75%2013.4101%2015.75%2014.0402%2015.5048%2014.5215C15.289%2014.9448%2014.9448%2015.289%2014.5215%2015.5048C14.0402%2015.75%2013.4101%2015.75%2012.15%2015.75H5.85C4.58988%2015.75%203.95982%2015.75%203.47852%2015.5048C3.05516%2015.289%202.71095%2014.9448%202.49524%2014.5215C2.25%2014.0402%202.25%2013.4101%202.25%2012.15V11.25M12.75%207.5L9%2011.25M9%2011.25L5.25%207.5M9%2011.25V2.25%22%20stroke%3D%22%23969696%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; content: ""; } .menu_navigation_wrap .side_menu > li > div { position: relative; padding: 0 55px 0 20px; border-bottom: 1px solid #eee; box-sizing: border-box; } .menu_navigation_wrap .side_menu > li > div .depth { display: block; height: 50px; color: #16191d; font-size: 16px; font-weight: 600; line-height: 50px; } .menu_navigation_wrap .side_menu > li > div .moer { display: block; position: absolute; top: 0; right: 5px; width: 50px; height: 50px; background: url(../images/ico_arw_direct.png) no-repeat center center/14px; background-size: 7px 11px; } .menu_navigation_wrap .side_menu > li > div.on .moer { background-image: url(../images/ico_arw_direct.png); background-size: 7px 11px; } .menu_navigation_wrap .side_menu > li > ul { display: none; padding: 15px 20px; background: #f8f8f8; border-bottom: 1px solid #eee; line-height: 29px; } .menu_navigation_wrap .side_menu > li > ul.on { display: block; } .menu_navigation_wrap .side_menu > li > ul li a { display: block; } .menu_navigation_wrap .side_menu > li > ul li > div { position: relative; } .menu_navigation_wrap .side_menu > li > ul li > div a.hasSub { height: 30px; } .menu_navigation_wrap .side_menu > li > ul li > div a.hasSub + a { width: 30px; height: 30px; position: absolute; top: 0; right: 0; background: url(../images/ico_arw_direct.png) no-repeat center center/12px; display: block; background-size: 7px 11px; } .menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub + a { background: url(../images/ico_arw_direct.png) no-repeat center center/12px; background-size: 7px 11px; } .menu_navigation_wrap .side_menu > li > ul li > ul { background: #fff; padding-left: 10px; display: none; border-radius: 4px; } .menu_navigation_wrap .side_menu > li > ul li > ul li a { font-size: 12px; color: #666; } .menu_navigation_wrap .side_menu > li > ul li > ul li a::before { content: "-"; display: inline-block; margin-right: 5px; font-size: 12px; } .recently_side { position: relative; border: none; } .recently_side h1 { border-bottom: none; background: #fff; color: #16191d; font-size: 14px; text-indent: 20px; height: 40px; line-height: 40px; } .recently_side a.mitem_goodsview { display: block; float: none; position: absolute; top: 0; right: 11px; width: 40px; height: 40px; padding: 0; margin: 0; background-position: center; border: none; background: url(../images/ico_arw_direct.png) no-repeat center center/14px; background-size: 7px 11px; text-indent: -9999px; } .recently_side .recentlySide-swiper { max-width: 320px; padding: 20px; } .recently_side .recentlySide-swiper .swiper-pagination { padding-top: 12px; } @media screen and (min-width: 720px) { .quick-menu__to-top { right: calc(50% - 330px); } .fullBtnSection { padding: 0; } } .sheet { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 12; visibility: visible; transition: opacity 0.5s, visibility 0.5s; } .sheet[aria-hidden=true] { opacity: 0; visibility: hidden; pointer-events: none; } .sheet .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0, 0, 0, 0.6); } .sheet .contents { display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background-color: #ffffff; overflow-y: hidden; --default-transitions: transform 0.5s, border-radius 0.5s; transition: var(--default-transitions); transform: translateY(0); max-width: 720px; max-height: 100vh; width: 100%; height: 30vh; box-sizing: border-box; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1); } .sheet .contents:not(.not-selectable) { transition: var(--default-transitions), height 0.5s; } .sheet[aria-hidden=true] .contents { transform: translateY(100%); } .sheet .sheet__controls { display: flex; } .sheet .draggable-area { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding: 12px 0 28px; cursor: grab; } .sheet .draggable-thumb { width: 48px; height: 4px; background-color: #dcdcdc; border-radius: 2px; } .sheet .close-sheet { position: absolute; top: -4px; right: 2px; border: none; font-size: 22px; padding: 10px; color: #909090; } .sheet .sheet__body { flex-grow: 1; height: 100%; display: flex; flex-direction: column; overflow-y: auto; gap: 1rem; padding: 8px 16px 20px; box-sizing: border-box; } /* 체크박스 */ .b-checkbox.checkbox { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; word-break: keep-all; } /* Box-shadow on hover */ .b-checkbox.checkbox { outline: none; display: inline-flex; align-items: center; } .b-checkbox.checkbox:not(.button) { margin-right: 0.5em; } .b-checkbox.checkbox:not(.button) + .checkbox:last-child { margin-right: 0; } .b-checkbox.checkbox input[type=checkbox] { position: absolute; left: 0; opacity: 0; outline: none; z-index: -1; } .b-checkbox.checkbox input[type=checkbox] + .check { width: 1.4em; height: 1.4em; flex-shrink: 0; border-radius: 4px; border: 1px solid #ebedef; background: #ebedef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat; background-size: 83% 83%; background-position: 60% 40%; } .b-checkbox.checkbox input[type=checkbox]:checked + .check { background: #343a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat; background-size: 83% 83%; background-position: 60% 40%; border-color: #343a40; } .b-checkbox.checkbox input[type=checkbox]:indeterminate + .check, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check { background: #343a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; border-color: #343a40; } .b-checkbox.checkbox .control-label { padding-left: calc(0.5em - 1px); } .b-checkbox.checkbox.button { display: flex; } .b-checkbox.checkbox[disabled] { opacity: 0.5; } .b-checkbox.checkbox.is-small { font-size: 13px; } .b-checkbox.checkbox.is-medium { font-size: 16px; } .b-checkbox.checkbox.is-large { font-size: 20px; letter-spacing: -0.025em; } .b-checkbox-container.vertical { display: flex; flex-direction: column; } .b-checkbox-container.vertical .b-checkbox.checkbox:not(.button) { margin-right: 0; } .b-checkbox-container.vertical .b-checkbox + .b-checkbox { margin-top: 8px; } /* 라디오 버튼 */ .custom-radio-container { display: flex; align-items: center; row-gap: 8px; -moz-column-gap: 12px; column-gap: 12px; } .custom-radio-container.vertical { flex-direction: column; align-items: flex-start; } .custom-radio.inner-input { display: flex; align-items: center; } .custom-radio.no-text label { margin-bottom: 6px; } .custom-radio > input:checked, .custom-radio > input:not(:checked) { position: absolute; left: -9999px; } .custom-radio > input:checked + label, .custom-radio > input:not(:checked) + label { position: relative; padding-left: 24px; cursor: pointer; display: inline-block; } .custom-radio > input:checked + label:before, .custom-radio > input:not(:checked) + label:before { content: ""; box-sizing: content-box; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 1px solid #ced4da; border-radius: 100%; background: #fff; } .custom-radio > input:checked + label:after, .custom-radio > input:not(:checked) + label:after { content: ""; width: 9px; height: 9px; background: #495057; position: absolute; top: 50%; left: 4px; border-radius: 100%; } .custom-radio > input:not(:checked) + label:after { opacity: 0; transform: scale(0); } .custom-radio > input:checked + label:after { opacity: 1; transform: scale(1) translateY(-50%); } .custom-radio.is-medium label { font-size: 16px; } .custom-radio.is-medium > input:checked + label, .custom-radio.is-medium > input:not(:checked) + label { padding-left: 28px; } .custom-radio.is-medium > input:checked + label:before, .custom-radio.is-medium > input:not(:checked) + label:before { width: 20px; height: 20px; } .custom-radio.is-medium > input:checked + label:after, .custom-radio.is-medium > input:not(:checked) + label:after { width: 12px; height: 12px; left: 5px; } /* 셀렉트 */ .select-box .nice-select { height: 48px; line-height: 46px; border: 1px solid #ced4da; border-radius: 4px; padding-left: 8px; padding-right: 30px; font-size: 15px; } .select-box .nice-select .current { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select-box .nice-select:focus { border-color: #868e96; } .select-box .nice-select:after { width: 7px; height: 7px; margin-top: -4.5px; } .select-box .nice-select.short { min-width: 60px; } .select-box .nice-select.short2 { min-width: 80px; } .select-box .nice-select.md { min-width: 200px; } .select-box .nice-select.lg { min-width: 320px; } .select-box .nice-select.full { width: 100%; } .select-box .nice-select .list { max-height: 160px; overflow-y: auto; min-width: 100%; } .select-box .nice-select .list::-webkit-scrollbar { width: 8px; } .select-box .nice-select .list::-webkit-scrollbar-track { background: #f3f3f3; } .select-box .nice-select .list::-webkit-scrollbar-thumb { background: #909090; border-radius: 6px; } .select-box .nice-select .list::-webkit-scrollbar-thumb:hover { background: #707070; } .select-box .nice-select .list li.disabled { display: none; } .select-box .nice-select .option { padding-left: 8px; } .select-box .nice-select.above .list { top: auto; bottom: 100%; margin-bottom: 4px; transform-origin: 50% 100%; } .nativeSelect { position: relative; } .nativeSelect select { display: block; height: 48px; line-height: 46px; border: 1px solid #ced4da; background-color: #ffffff; border-radius: 4px; padding-left: 8px; padding-right: 30px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nativeSelect select:focus { border-color: #868e96; } .nativeSelect select:after { width: 7px; height: 7px; margin-top: -4.5px; } .nativeSelect select.short { min-width: 60px; } .nativeSelect select.short2 { min-width: 80px; } .nativeSelect select.md { min-width: 200px; } .nativeSelect select.lg { min-width: 320px; } .nativeSelect select.full { width: 100%; } .nativeSelect:after { border-bottom: 2px solid #999; border-right: 2px solid #999; content: ""; display: block; width: 7px; height: 7px; margin-top: -5px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); } .textarea { border: 1px solid #dee2e6; border-radius: 4px; padding: 6px 8px; outline: none; width: 100%; background-color: #ffffff; resize: none; scrollbar-width: thin; font-size: 16px; } .textarea:focus { border-color: #868e96; } .textarea:-moz-read-only { background-color: #f1f3f5; } .textarea:disabled, .textarea:read-only { background-color: #f1f3f5; } /* 텍스트 인풋 */ .input-text { height: 48px; border: 1px solid #ced4da; border-radius: 4px; padding: 0 8px; outline: none; transition: all 0.2s ease-in-out; width: 100%; max-width: 172px; background-color: #ffffff; min-width: 52px; font-size: 16px; } .input-text:focus { border-color: #868e96; } .input-text.sm { max-width: 128px; } .input-text.xsm { max-width: 80px; } .input-text.xxsm { max-width: 44px; min-width: none; } .input-text.md { max-width: 298px; } .input-text.lg { max-width: 420px; } .input-text.xl { max-width: 600px; } .input-text:-moz-read-only { background-color: #f1f3f5; } .input-text:disabled, .input-text:read-only { background-color: #f1f3f5; } .input-text.full { display: block; max-width: none; } .input-text::-webkit-outer-spin-button, .input-text::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* 데이트 피커 */ .datepicker { border: 1px solid #dee2e6; border-radius: 4px; background-color: #ffffff; padding: 0 8px 0 12px; height: 44px; background-image: url(../images/icon_calendar.png); background-repeat: no-repeat; background-size: 17px; background-position: right 12px center; outline: none; transition: all 0.2s ease-in-out; font-size: 15px; } .datepicker:focus { border-color: #868e96; } .datepicker:disabled { background-color: #f1f3f5; color: #868e96; } .datepicker-container { display: flex; align-items: center; } .datepicker-container input[type=text].datepicker { flex: 1; min-width: 0; } .date #ui-datepicker-div { z-index: 104 !important; } .ui-widget.ui-widget-content { border: 1px solid #efefef !important; box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.172); } .ui-datepicker-title { margin: 0 20px 0 42px !important; } .ui-datepicker-title * { font-family: "Noto Sans KR", sans-serif !important; } .ui-datepicker-title select { text-align: center; font-weight: 500; background-color: transparent; margin-bottom: 4px !important; } .ui-state-default { background-color: transparent !important; border: none !important; text-align: center !important; } .ui-datepicker { width: 230px !important; padding: 5px !important; border-radius: none !important; } .ui-datepicker select.ui-datepicker-year { width: 25% !important; } .ui-datepicker-calendar th { font-weight: 400 !important; } .ui-datepicker th { padding: 0.2em 0.3em 0.7em !important; } .ui-datepicker-calendar th > span { font-family: "Noto Sans KR", sans-serif !important; color: #7b7e81; } .ui-datepicker-calendar td:nth-child(1) > a { color: #ff6464; } .ui-datepicker-calendar td:nth-child(7) > a { color: #5757ff; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { color: #444444 !important; font-weight: 700 !important; background-color: rgb(240, 240, 240) !important; border-radius: 5px !important; text-underline-position: under; } .ui-widget-header { border: none !important; background-color: transparent !important; } .ui-state-active, .ui-widget-content .ui-state-active { color: #454545 !important; } .ui-datepicker-prev span { background-image: url(../images/icon_chevron2.png) !important; background-position: center center !important; } .ui-datepicker-next span { background-image: url(../images/icon_chevron.png) !important; background-position: center center !important; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 5px !important; cursor: pointer; border: 1px solid transparent !important; } .tilde { margin: 0 4px; font-size: 15px; color: #7e8282; } .inputTimer { position: relative; display: flex; } .inputTimer .input-text { padding-right: 56px; } .inputTimer__time { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #228be6; font-size: 15px; font-variant-numeric: tabular-nums; } .dateRange-btnContainer { display: flex; flex-grow: 1; } .dateRange-btnContainer .dateRange-btn { position: relative; height: 44px; flex: 1; border: 1px solid #dee2e6; padding: 0 6px; text-align: center; background-color: #ffffff; color: #868e96; font-size: 14px; margin-left: -1px; } .dateRange-btnContainer .dateRange-btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; } .dateRange-btnContainer .dateRange-btn:last-child { border-radius: 0 4px 4px 0; } .dateRange-btnContainer .dateRange-btn.selected { position: relative; z-index: 1; color: #212529; font-weight: 500; border: 1px solid #495057; } .dateRange-btnContainer .dateRange-btn:disabled { color: #868e96; background-color: #f1f3f5; cursor: not-allowed; } .innerSearch { display: flex; align-items: center; background-color: #f1f3f5; border-radius: 24px; padding: 4px 16px; } .innerSearch input[type=search] { border: none; background-color: transparent; outline: none; height: 36px; flex: 1; font-size: 16px; } .innerSearch input[type=search]::-webkit-search-decoration, .innerSearch input[type=search]::-webkit-search-cancel-button, .innerSearch input[type=search]::-webkit-search-results-button, .innerSearch input[type=search]::-webkit-search-results-decoration { display: none; } .innerSearch .icon_nav-search { opacity: 0.6; } .microModal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; } .microAlert .microModal__container { position: relative; background-color: #fff; width: 300px; max-height: 100vh; padding: 32px 16px 8px 16px; border-radius: 12px; overflow-y: auto; box-sizing: border-box; } .microAlert .microModal__top { text-align: center; padding: 0 4px; margin-bottom: 12px; } .microAlert .microModal__title { font-weight: 700; font-size: 16px; line-height: 1.25; color: #16191d; box-sizing: border-box; } .microAlert .microModal__close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; font-size: 22px; color: #50514f; padding: 8px; } .microAlert .microModal__top .microModal__close:before { content: "✕"; } .microAlert .microModal__content { font-size: 14px; padding: 0 4px; margin-bottom: 20px; line-height: 1.5; color: #7e8282; text-align: center; } .microAlert .microModal__btnContainer { display: flex; justify-content: center; align-items: center; } .microAlert .microModal__btn { flex: 1; text-align: center; font-size: 15px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: #666968; border-radius: 4px; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; min-height: 44px; margin: 0; will-change: transform; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .microAlert .microModal__btn:active { transform: scale(1.05); } .microAlert .microModal__btn-primary { color: #1971c2; font-weight: 700; } .microFullScreen .microModal__container, .microFullMenu .microModal__container { position: fixed; background-color: #fff; max-width: 720px; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; margin-inline: auto; box-sizing: border-box; z-index: 1000; } .microFullScreen .microModal__body, .microFullMenu .microModal__body { height: 100%; } .microFullScreen .microModal__top, .microFullMenu .microModal__top { z-index: 9; display: flex; align-items: center; justify-content: space-between; text-align: center; height: 48px; top: 0; width: 100%; background-color: #ffffff; border-bottom: 1px solid #EDEDED; } .microFullScreen .microModal__title, .microFullMenu .microModal__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; color: #0d0f12; } .microFullScreen .microModal__content, .microFullMenu .microModal__content { overflow-y: auto; position: relative; font-size: 14px; line-height: 1.5; color: #7e8282; height: calc(100% - 48px); color: #030507; } .microFullScreen .microModal__inner, .microFullMenu .microModal__inner { padding: 16px; } .microFullScreen .microModal__close, .microFullMenu .microModal__close { position: absolute; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; width: 32px; height: 32px; top: 8px; right: 10px; color: #16191d; } .microFullScreen .microModal__close::after, .microFullMenu .microModal__close::after { content: ""; display: block; width: 18px; height: 18px; background-image: url("../images/icon_modal-close.png"); background-repeat: no-repeat; background-size: cover; } .microFullScreen.myReviewImagePop .microModal__top, .microFullMenu.myReviewImagePop .microModal__top { background-color: #000000; border-bottom: none; } .microFullScreen.myReviewImagePop .microModal__close::after, .microFullMenu.myReviewImagePop .microModal__close::after { background-position: -18px 0; } .microBottomSheet .microModal__container { position: fixed; background-color: #fff; max-width: 720px; left: 0; right: 0; bottom: 0; overflow-y: auto; margin-inline: auto; box-sizing: border-box; z-index: 1000; border-radius: 16px 16px 0 0; } .microBottomSheet .microModal__body { height: 100%; } .microBottomSheet .microModal__top { z-index: 9; display: flex; align-items: center; justify-content: space-between; text-align: center; height: 40px; top: 0; width: 100%; background-color: #ffffff; } .microBottomSheet .microModal__content { overflow-y: auto; position: relative; font-size: 14px; line-height: 1.5; color: #7e8282; padding: 8px 16px 20px; color: #030507; min-height: 30vh; min-height: 30svh; max-height: 60vh; max-height: 60svh; } .microBottomSheet .microModal__content:has(.product-option) { max-height: 80vh; max-height: 80svh; } .microBottomSheet .microModal__close { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .microBottomSheet .microModal__close::after { content: ""; display: block; width: 24px; height: 10px; background-image: url("../images/icon_bottom-chevron.png"); background-size: cover; } .microBottomSheet.myReviewImagePop .microModal__top { background-color: #000000; border-bottom: none; } .microBottomSheet.myReviewImagePop .microModal__close { background-position: -18px 0; } .microPromotion .microModal__container { position: relative; background-color: #fff; max-width: 400px; max-height: 100vh; border-radius: 12px; overflow-y: auto; box-sizing: border-box; margin: 0 16px; } .microPromotion .microModal__close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; font-size: 22px; color: #50514f; padding: 8px; } .microPromotion .microModal__top .microModal__close:before { content: "✕"; } .microPromotion .microModal__content { font-size: 14px; padding: 0; line-height: 1.5; color: #7e8282; text-align: center; } .microPromotion .microModal__btnContainer { background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; } .microPromotion .microModal__btn { flex: 1; text-align: center; font-size: 15px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; color: #666968; border-radius: 4px; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; min-height: 44px; margin: 0; will-change: transform; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .microPromotion .microModal__btn:active { transform: scale(1.05); } .microPromotion .microModal__btn-primary { color: #1971c2; font-weight: 700; } .microPromotion__bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 8px; } .microPromotion__bottom .microModal__btn { flex: none; padding: 8px 12px 8px 28px; } /**************************\ Demo Animation Style \**************************/ @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } @keyframes mmslideDown { from { transform: translateY(0); } to { transform: translateY(10%); } } @keyframes mmslideLeftIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes mmslideLeftOut { from { transform: translateX(0); } to { transform: translateX(-10%); } } .microAlert, .microFullScreen, .microBottomSheet, .microFullMenu, .microPromotion { display: none; } .microAlert.is-open, .microFullScreen.is-open, .microBottomSheet.is-open, .microFullMenu.is-open, .microPromotion.is-open { display: block; } .microAlert[aria-hidden=false] .microModal__overlay, .microFullScreen[aria-hidden=false] .microModal__overlay, .microBottomSheet[aria-hidden=false] .microModal__overlay, .microPromotion[aria-hidden=false] .microModal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .microAlert[aria-hidden=false] .microModal__container, .microFullScreen[aria-hidden=false] .microModal__container, .microBottomSheet[aria-hidden=false] .microModal__container, .microPromotion[aria-hidden=false] .microModal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .microAlert[aria-hidden=true] .microModal__overlay, .microFullScreen[aria-hidden=true] .microModal__overlay, .microBottomSheet[aria-hidden=true] .microModal__overlay, .microPromotion[aria-hidden=true] .microModal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .microAlert[aria-hidden=true] .microModal__container, .microFullScreen[aria-hidden=true] .microModal__container, .microBottomSheet[aria-hidden=true] .microModal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .microBottomSheet[aria-hidden=true] .microModal__container { animation: mmslideDown 0.3s cubic-bezier(0, 0, 0.2, 1); } .microFullMenu[aria-hidden=false] .microModal__container { animation: mmslideLeftIn 0.5s cubic-bezier(0, 0, 0.2, 1); } .microFullMenu[aria-hidden=true] .microModal__container { animation: mmslideLeftOut 0.5s cubic-bezier(0, 0, 0.2, 1); } .microFullMenu[aria-hidden=false] .microModal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .microFullMenu[aria-hidden=true] .microModal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .microAlert .microModal__container, .microAlert .microModal__overlay, .microFullScreen .microModal__container, .microFullScreen .microModal__overlay, .microBottomSheet .microModal__container, .microBottomSheet .microModal__overlay, .microFullMenu .microModal__container, .microFullMenu .microModal__overlay, .microPromotion .microModal__container, .microPromotion .microModal__overlay { will-change: transform; } .microAlert .microModal__overlay, .microFullScreen .microModal__overlay, .microBottomSheet .microModal__overlay, .microPromotion .microModal__overlay { transform: translate(0, 0.01px); } .modalInfo__title { font-size: 16px; font-weight: 700; color: #16191d; margin-bottom: 8px; } .modalInfo .table th { font-size: 13px; } .modalInfo .table td { font-size: 13px; } .modalInfo .bottomBtnControls { margin-top: 0; } .modalInfo__deliveryTable th { background-color: #ffffff !important; font-weight: 400 !important; font-size: 12px !important; } .modalInfo__deliveryTable td { color: #7e8282 !important; } .modalInfo__deliveryTable tr.deliveryCompleted td { color: #16191d !important; font-weight: 500; } .modalSelect__title { position: relative; font-size: 16px; font-weight: 700; color: #16191d; padding-bottom: 12px; } .modalSelect__item { display: block; width: 100%; font-size: 16px; padding: 22px 0; color: #212529; min-height: 60px; cursor: pointer; } .modalSelect__item input { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .modalSelect__item input:checked + span { color: #228be6; font-weight: 500; } .fullscreenBg { background-color: #f4f6f8; padding-bottom: 100px; height: 100%; } .microModal__requsetText { font-size: 14px; color: #030507; font-weight: 400; margin-bottom: 12px; } /* Colors: Default (blue) */ .toggle-switchy { color: #fff; } .toggle-switchy > input + .toggle:before { content: "ON"; } .toggle-switchy > input + .toggle:after { content: "OFF"; } .toggle-switchy > input + .toggle > .switch { background: #fff; } .toggle-switchy > input + .toggle + .label { color: #000; } .toggle-switchy > input:checked + .toggle { background: #3498db; } .toggle-switchy > input:not(:checked) + .toggle { background: #ccc; } .toggle-switchy > input:checked + .toggle > .switch { border: 3px solid #3498db; } .toggle-switchy > input:not(:checked) + .toggle > .switch { border: 3px solid #ccc; } /* Rounded switch corners */ .toggle-switchy > input + .toggle { border-radius: 4px; } .toggle-switchy > input + .toggle .switch { border-radius: 6px; } /* ////////////////////////// CORE STYLES BELOW - NO TOUCHY ////////////////////////// */ .toggle-switchy { display: inline-flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; vertical-align: middle; margin-bottom: 0; } .toggle-switchy:hover { cursor: pointer; } .toggle-switchy > input { position: absolute; opacity: 0; } .toggle-switchy > input + .toggle { align-items: center; position: relative; } .toggle-switchy > input + .toggle { overflow: hidden; position: relative; flex-shrink: 0; } .toggle-switchy > input[disabled] + .toggle { opacity: 0.5; } .toggle-switchy > input[disabled] + .toggle:hover { cursor: not-allowed; } .toggle-switchy > input + .toggle { width: 100%; height: 100%; margin: 0; cursor: pointer; } .toggle-switchy > input + .toggle > .switch { display: block; height: 100%; position: absolute; right: 0; z-index: 3; box-sizing: border-box; } /* Labels */ .toggle-switchy > input + .toggle:before, .toggle-switchy > input + .toggle:after { display: flex; align-items: center; position: absolute; z-index: 2; height: 100%; } .toggle-switchy > input + .toggle:before { right: 55%; } .toggle-switchy > input + .toggle:after { left: 50%; } .toggle-switchy > input + .toggle + .label { margin-left: 10px; } .toggle-switchy[data-label=left] > input + .toggle { order: 2; } .toggle-switchy[data-label=left] > input + .toggle + .label { order: 1; margin-left: 0; margin-right: 10px; } /* Show / Hide */ .toggle-switchy > input + .toggle:before { opacity: 0; } .toggle-switchy > input:checked + .toggle:before { opacity: 1; } .toggle-switchy > input:checked + .toggle:after { opacity: 0; } /* Transitions */ .toggle-switchy > input + .toggle { transition: background 200ms ease-in-out; } .toggle-switchy > input + .toggle:before, .toggle-switchy > input + .toggle:after { transition: all 200ms ease-in-out; } .toggle-switchy > input + .toggle > .switch { transition: right 200ms ease-in-out, border-color 200ms ease-in-out; } /* ////////////////////////// CORE STYLES ABOVE - NO TOUCHY ////////////////////////// */ /* Size: Extra Large */ .toggle-switchy[data-size=xl] > input + .toggle { width: 85px; height: 40px; } .toggle-switchy[data-size=xl] > input + .toggle > .switch { width: 40px; } .toggle-switchy[data-size=xl] > input + .toggle:before, .toggle-switchy[data-size=xl] > input + .toggle:after { font-size: 1.2rem; } .toggle-switchy[data-size=xl] > input:not(:checked) + .toggle > .switch { right: calc(100% - 40px); } /* Size: Large */ .toggle-switchy[data-size=lg] > input + .toggle { width: 75px; height: 35px; } .toggle-switchy[data-size=lg] > input + .toggle > .switch { width: 35px; } .toggle-switchy[data-size=lg] > input + .toggle:before, .toggle-switchy[data-size=lg] > input + .toggle:after { font-size: 1rem; } .toggle-switchy[data-size=lg] > input:not(:checked) + .toggle > .switch { right: calc(100% - 35px); } /* Size: Default (Medium) */ .toggle-switchy > input + .toggle { width: 65px; height: 30px; } .toggle-switchy > input + .toggle > .switch { width: 30px; } .toggle-switchy > input + .toggle:before, .toggle-switchy > input + .toggle:after { font-size: 0.8rem; } .toggle-switchy > input:not(:checked) + .toggle > .switch { right: calc(100% - 30px); } /* Size: Small */ .toggle-switchy[data-size=sm] > input + .toggle { width: 55px; height: 25px; } .toggle-switchy[data-size=sm] > input + .toggle > .switch { width: 25px; } .toggle-switchy[data-size=sm] > input + .toggle:before, .toggle-switchy[data-size=sm] > input + .toggle:after { font-size: 0.7rem; } .toggle-switchy[data-size=sm] > input:not(:checked) + .toggle > .switch { right: calc(100% - 25px); } /* Size: Extra Small */ .toggle-switchy[data-size=xs] > input + .toggle { width: 45px; height: 20px; } .toggle-switchy[data-size=xs] > input + .toggle > .switch { width: 20px; } .toggle-switchy[data-size=xs] > input + .toggle:before, .toggle-switchy[data-size=xs] > input + .toggle:after { font-size: 0.5rem; } .toggle-switchy[data-size=xs] > input:not(:checked) + .toggle > .switch { right: calc(100% - 20px); } /* Style: Rounded */ .toggle-switchy[data-style=rounded] > input + .toggle, .toggle-switchy[data-style=rounded] > input + .toggle > .switch { border-radius: 50px; } .toggle-switchy[data-style=rounded] > input + .toggle:before { right: 50%; } .toggle-switchy[data-style=rounded] > input + .toggle:after { left: 50%; } /* Style: Square */ .toggle-switchy[data-style=square] > input + .toggle { border-radius: 0; } .toggle-switchy[data-style=square] > input + .toggle .switch { border-radius: 0; } /* Text: Off */ .toggle-switchy[data-text=false] > input + .toggle:before, .toggle-switchy[data-text=false] > input + .toggle:after { content: ""; } .toggle-switchy[data-text=false][data-size=xl] > input + .toggle { width: 80px; } .toggle-switchy[data-text=false][data-size=lg] > input + .toggle { width: 70px; } .toggle-switchy[data-text=false] > input + .toggle { width: 60px; } .toggle-switchy[data-text=false][data-size=sm] > input + .toggle { width: 50px; } .toggle-switchy[data-text=false][data-size=xs] > input + .toggle { width: 40px; } /* Color: Red */ .toggle-switchy[data-color=red] > input:checked + .toggle { background: #e74c3c; } .toggle-switchy[data-color=red] > input:checked + .toggle > .switch { border-color: #e74c3c; } /* Color: Orange */ .toggle-switchy[data-color=orange] > input:checked + .toggle { background: #e67e22; } .toggle-switchy[data-color=orange] > input:checked + .toggle > .switch { border-color: #e67e22; } /* Color: Yellow */ .toggle-switchy[data-color=yellow] > input:checked + .toggle { background: #f1c40f; } .toggle-switchy[data-color=yellow] > input:checked + .toggle > .switch { border-color: #f1c40f; } /* Color: Green */ .toggle-switchy[data-color=green] > input:checked + .toggle { background: #2ecc71; } .toggle-switchy[data-color=green] > input:checked + .toggle > .switch { border-color: #2ecc71; } /* Color: Blue */ .toggle-switchy[data-color=blue] > input:checked + .toggle { background: #3498db; } .toggle-switchy[data-color=blue] > input:checked + .toggle > .switch { border-color: #3498db; } /* Color: Purple */ .toggle-switchy[data-color=purple] > input:checked + .toggle { background: #9b59b6; } .toggle-switchy[data-color=purple] > input:checked + .toggle > .switch { border-color: #9b59b6; } /* Color: Gray */ .toggle-switchy[data-color=gray] > input:checked + .toggle { background: #555; } .toggle-switchy[data-color=gray] > input:checked + .toggle > .switch { border-color: #555; } .table-wrapper { position: relative; margin-bottom: 20px; width: 100%; } .table { width: 100%; box-shadow: 0px -1px 0px 0px #ced4da; } .table tr { border-bottom: 1px solid #e9ecef; } .table tr.checked td { background-color: #f5fbff; } .table tr.fixed-notice td { background-color: #fafafa; } .table tr.fixed-notice td .icon_notice-fixed { vertical-align: top; margin-top: 2px; width: 18px; height: 18px; } .table th { vertical-align: middle; padding: 10px 10px; font-weight: 500; color: #50514f; background-color: #f8f9fa; height: 40px; word-break: keep-all; font-size: 14px; } .table td { vertical-align: middle; padding: 10px 10px; height: 40px; background-color: #ffffff; font-size: 14px; } .table td .td-inner { display: flex; align-items: center; flex-wrap: wrap; -moz-column-gap: 5px; column-gap: 5px; row-gap: 8px; } .table td .td-inner.vertical { flex-direction: column; align-items: flex-start; } .table td > img { display: inline-block; } .table.vertical th, .table.vertical td { text-align: center; } .table.vertical th.left, .table.vertical td.left { text-align: left; } .table.vertical th.right, .table.vertical td.right { text-align: right; } .table.vertical th, .table.vertical td { padding: 10px 5px; } .table.tight th, .table.tight td { font-size: 13px; height: 36px; padding: 8px 5px; } .table.transparent { border-top: none; } .table.transparent tr { border-bottom: none; } .table.transparent th { background-color: transparent; } .table.transparent td { background-color: transparent; } .table.thTransparent th { background-color: transparent; } .table .tr-foldable { visibility: collapse; } .table .tr-foldable-trigger { cursor: pointer; } .table .tr-foldable__content { padding: 26px 32px; text-align: left; } .table .tr-foldable > td { background-color: #fafafa; padding: 0; } .table .tr-foldable.active { visibility: visible; } .table .tr-foldable__qna { position: relative; display: flex; align-items: flex-start; margin-bottom: 48px; line-height: 1.4; } .table .tr-foldable__qna::after { content: ""; position: absolute; bottom: -24px; left: 0; display: block; width: 100%; height: 1px; background-color: #f1f3f5; } .table .tr-foldable__qna .icon { flex-shrink: 0; } .table .tr-foldable__qna-content { margin-left: 8px; word-break: break-all; margin-top: -2px; color: #16191d; font-size: 15px; } .table .tr-foldable__qna-title { font-weight: 500; font-size: 16px; margin-bottom: 10px; color: #030507; } .table .tr-foldable__btn-container { display: flex; justify-content: flex-end; align-items: center; } .table .tr-foldable__btn-container > * + * { margin-left: 8px; } .table__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 84px; } .table__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } :root { --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-bullet-size: 10px; --swiper-pagination-bullet-width: 10px; --swiper-pagination-bullet-height: 10px; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 8px; --swiper-pagination-bullet-vertical-gap: 6px; --swiper-scrollbar-sides-offset: 14px ; } body { overflow-x: hidden; background-color: #f4f6f8; } .screen-wrap.is-fixed { overflow: hidden; isolation: isolate; } .content-wrap { position: relative; max-width: 720px; margin-inline: auto; padding-top: 96px; padding-bottom: 140px; } .main { background-color: #f4f6f8; } .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; transition: transform 0.3s ease-in-out; } .header__wrapper { height: 100%; } .header__controls { position: relative; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 6px; gap: 8px; max-width: 720px; margin-inline: auto; } .header__controls-wrapper { background-color: #ffffff; position: relative; z-index: 1; } .header__controls::before, .header__controls::after { content: ""; position: absolute; top: 48px; width: 16px; height: calc(100% + 16px); background-color: #f4f6f8; } .header__controls::before { left: 0; transform: translateX(-100%); } .header__controls::after { left: auto; right: 0; transform: translateX(100%); } .header__btn-container { display: flex; gap: 2px; } .header__btn { position: relative; display: inline-flex; padding: 8px; } .header__home-link { padding: 4px; margin-left: 6px; } .header.scroll { transform: translateY(-48px); } .header__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; color: #0d0f12; } .header__toBack__btn { padding: 8px; } .header--sub ~ .content-wrap { padding-top: 48px; } .header--sub:has(.headerTab) ~ .content-wrap { padding-top: 96px; } .header--sub::before { content: ""; position: absolute; top: 48px; display: block; width: 100%; height: 1px; background-color: #ededed; z-index: 2; } .header--sub:has(.headerTab)::before { display: none; } .header__category { position: absolute; top: 48px; left: 0; width: 100%; background-color: #ffffff; z-index: 2; display: none; border-radius: 0 0 10px 10px; } .header__category.opened { display: block; } .header__category__list { display: grid; grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 4px; } .header__category__list li a { display: flex; align-items: center; justify-content: space-between; height: 44px; font-size: 14px; font-weight: 400; color: #16191d; padding: 0 12px 0 8px; border-radius: 4px; } .header__category__list li.active a { font-weight: 700; color: #0d0f12; background-color: #f8fafb; } .header__selectTitle { position: absolute; display: inline-flex; align-items: center; font-size: 18px; font-weight: 700; color: #0d0f12; left: 50%; transform: translateX(-50%); gap: 8px; padding-right: 24px; } .header__selectTitle::after { content: ""; display: block; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #495057; border-right: 2px solid #495057; transform: translateY(calc(-50% - 2px)) rotate(135deg); } .header__selectTitle.opened::after { transform: translateY(calc(-50% + 4px)) rotate(-45deg); } .header.categoryDimmed { z-index: 1001; } .header.categoryDimmed .header__controls::before, .header.categoryDimmed .header__controls::after { display: none; } .home-category { position: relative; background-color: #ffffff; padding-left: 2px; max-width: 720px; margin-inline: auto; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14); overflow: hidden; } .home-category__list { display: flex; align-items: center; height: 48px; overflow-x: auto; scrollbar-width: none; } .home-category__list::after { content: ""; position: absolute; top: 0; right: 0; width: 32px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); } .home-category__list::-webkit-scrollbar { display: none; } .home-category__item { position: relative; flex-grow: 1; text-align: center; height: 100%; line-height: 48px; } .home-category__item a { font-size: 16px; display: inline-block; font-weight: 500; color: #0d0f12; word-break: keep-all; padding: 0 14px 0; width: 100%; white-space: nowrap; } .home-category__item.active::after { content: ""; position: absolute; left: 50%; bottom: 0; display: block; width: calc(100% - 28px); height: 3px; background-color: #343a40; transform: translateX(-50%); } .headerTab { position: relative; background-color: #ffffff; max-width: 720px; margin-inline: auto; overflow: hidden; } .headerTab__list { display: flex; align-items: center; height: 48px; overflow-x: auto; scrollbar-width: none; } .headerTab__list::-webkit-scrollbar { display: none; } .headerTab__item { position: relative; flex: 1; text-align: center; height: 100%; line-height: 48px; } .headerTab__item::before { content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 1px; background-color: #dee2e6; } .headerTab__item a { font-size: 15px; display: block; font-weight: 700; color: #979b9d; word-break: keep-all; padding: 0 24px 0; } .headerTab__item.active a { color: #16191d; } .headerTab__item.active::after { content: ""; position: absolute; bottom: 1px; display: block; width: calc(100% - 48px); max-width: 210px; left: 50%; transform: translateX(-50%); height: 3px; background-color: #212529; } .headerCategoryDim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; } .header-search-pop__auto-complete { position: absolute; display: none; overflow-y: auto; top: 65px; left: 0; right: 0; background-color: #ffffff; z-index: 1; } .header-search-pop__auto-complete.active { display: block; } .header-search-pop__auto-complete > ul { overflow-y: auto; height: calc(100vh - 65px); height: calc(100svh - 65px); padding: 4px 0; } .header-search-pop__auto-complete > ul > li a { display: block; font-size: 15px; padding: 6px 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .header-search-pop__auto-complete > ul > li a:hover { text-decoration: underline; background-color: #f8f9fa; } .header-search-pop__auto-complete > ul > li + li { margin-top: 3px; } .header-search-pop__auto-complete em { font-style: normal; font-weight: 500; } .header-search-pop__footer { display: flex; justify-content: flex-end; align-items: center; padding: 0 16px; flex-shrink: 0; height: 34px; border-top: 1px solid #f1f3f5; } .header-search-pop__close { letter-spacing: -0.04em; } .header-search-pop__close > span { color: #50514f; } .header-search-pop__close:hover > span { color: #252521; text-decoration: underline; } .fullMenu { background-color: #f4f6f8; } .fullMenu__top { display: flex; padding: 12px 16px; gap: 8px; background-color: #ffffff; } .fullMenu__top > .btn { flex: 1; } .fullMenu__top .member-rank-summary { width: 100%; } .fullMenu__top .member-rank-summary .textBtns { justify-content: flex-end; } .fullMenu__top .member-rank-summary__top { padding: 12px 0; } .fullMenu .product-tab { margin-bottom: 0; background-color: #ffffff; } .fullMenu .product-tab__btn { font-size: 16px; height: 50px; } .fullMenu__content { display: none; align-items: flex-start; height: calc(100vh - 165px); height: calc(100svh - 165px); overflow-y: hidden; } .fullMenu__content.active { display: flex; } .fullMenu__content:has(.fullMenu__menu--noSub) { height: auto; } .fullMenu__menu { width: 128px; height: 100%; overflow-y: auto; flex-shrink: 0; scrollbar-width: none; } .fullMenu__menu::-webkit-scrollbar { display: none; width: 4px; } .fullMenu__menu::-webkit-scrollbar-thumb { background-color: #a3a3a3; border-radius: 6px; } .fullMenu__menu:hover::-webkit-scrollbar { display: block; } .fullMenu__menu__btn { display: block; width: 100%; min-height: 50px; font-weight: 500; font-size: 13px; background-color: #f4f4f4; color: #6B6B6B; padding: 12px 10px 12px 14px; border-bottom: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } .fullMenu__menu__btn.current { background-color: #ffffff; color: #16191d; font-weight: 700; border-color: #ffffff; } .fullMenu__menu--noSub { width: auto; flex-grow: 1; } .fullMenu__menu--noSub .fullMenu__menu__btn { background-color: #ffffff; font-weight: 400; color: #16191d; } .fullMenu__rightSection { flex: 1; height: 100%; overflow-y: auto; padding: 12px; } .fullMenu__rightSection::-webkit-scrollbar { display: none; width: 4px; } .fullMenu__rightSection::-webkit-scrollbar-thumb { background-color: #a3a3a3; border-radius: 6px; } .fullMenu__rightSection:hover::-webkit-scrollbar { display: block; } .fullMenu__itemSection { padding: 16px 0; border-bottom: 1px solid #f1f3f5; } .fullMenu__sectionTitle { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #343a40; padding: 6px 4px; } .fullMenu__sectionTitle::after { content: ""; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: rotate(45deg); margin-left: 4px; } .fullMenu__itemList li a { display: flex; align-items: center; height: 36px; font-size: 14px; font-weight: 400; color: #7e8282; padding: 0 4px; } .fullMenu .mainNotice__customerContact { border: none; } .fullMenu__miscLinks { padding: 16px; } .fullMenu__miscLinks__title { font-size: 13px; font-weight: 400; color: #979b9d; margin-bottom: 8px; } .fullMenu__miscLinks__list { display: grid; grid-template-columns: repeat(2, 1fr); } .fullMenu__miscLinks__link { display: block; font-size: 14px; font-weight: 500; color: #16191d; padding: 10px 0; } .header-trend { flex: 1; position: relative; display: flex; justify-content: flex-start; align-items: center; padding: 0 4px; height: 36px; border-bottom: 1px solid #dee2e6; overflow: hidden; } .header-trend__wrapper { display: flex; align-items: center; gap: 12px; background-color: #ffffff; padding: 12px 14px 0; } .header-trend__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; } .search-trend { width: 100%; } .search-trend a { display: flex; align-items: center; } .search-trend ul { width: 100%; } .search-trend__number { font-size: 17px; font-weight: 500; } .search-trend__text { display: inline-block; line-height: 16px; height: 16px; margin-left: 4px; color: #16191d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; } .search-trend .icon { margin-left: 4px; margin-top: 1px; flex-shrink: 0; } .top-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; } .top-banner__btn-container { position: absolute; max-width: 720px; width: 100%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 1; } .top-banner__close { position: absolute; top: 0; right: 0; height: 100%; width: 32px; pointer-events: auto; opacity: 0.85; } .top-banner__close:before, .top-banner__close::after { content: ""; position: absolute; top: 50%; width: 18px; height: 1px; background-color: #ffffff; } .top-banner__close:before { left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } .top-banner__close::after { right: 50%; transform: translateX(50%) translateY(-50%) rotate(-45deg); } .top-banner-swiper { max-width: 720px; margin-inline: auto; height: 40px; overflow: hidden; } .top-banner-swiper .top-banner__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .footer { padding: 16px 0; } .footer__first { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; word-break: keep-all; -moz-column-gap: 4px; column-gap: 4px; row-gap: 2px; } .footer__first li { position: relative; text-align: center; } .footer__first li a { display: block; font-size: 13px; padding: 4px 14px; color: #495057; line-height: 1.4; white-space: nowrap; } .footer__first li::after { content: ""; position: absolute; display: inline-block; width: 1px; height: 12px; right: -2px; top: 50%; transform: translateY(-50%); background-color: #ced4da; } .footer__first li:last-child::after { display: none; } .footer__second { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 14px; } .footer__second__detailBtn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; font-size: 14px; color: #212529; padding-right: 12px; } .footer__second__detailBtn::after { position: absolute; content: ""; right: 0; top: 50%; display: inline-block; width: 8px; height: 8px; border: 1px solid transparent; border-bottom-color: #868e96; border-right-color: #868e96; transform: rotate(45deg) translateY(calc(-50% - 6px)); } .footer__third { margin-bottom: 10px; word-break: keep-all; line-height: 1.35; padding: 0 14px; } .footer__third li { display: flex; align-items: flex-start; margin-bottom: 2px; } .footer__third__th { display: inline-flex; align-items: center; color: #495057; font-size: 13px; } .footer__third__th::after { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 8px; background-color: #ced4da; } .footer__third__td { color: #495057; font-size: 13px; margin-right: 8px; } .footer__logo { margin-bottom: 10px; padding: 8px 14px; max-width: 160px; } .footer__description { color: #495057; font-size: 12px; word-break: keep-all; margin-bottom: 2px; line-height: 1.35; padding: 0 14px; } .footer__sellerLink { display: flex; gap: 10px; margin-bottom: 10px; padding: 0 14px; } .footer__copyright { color: #495057; font-size: 13px; word-break: keep-all; margin-bottom: 10px; padding: 0 14px; } .footer__underLine { color: #343a40; font-size: 13px; text-decoration: underline; } .family-site-link li.disabled { display: none; } .family-site-link.nice-select { height: 38px; line-height: 36px; font-size: 13px; } .family-site-link.nice-select .list { top: auto; left: auto; right: 0; bottom: 100%; margin-top: 0; margin-bottom: 12px; transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .family-site-link.nice-select .list .option { line-height: 34px; min-height: 34px; font-size: 13px; } .tab-bar { position: fixed; display: flex; align-items: center; left: 0; right: 0; bottom: 0; width: 100%; height: 54px; z-index: 11; } .tab-bar__nav { position: relative; display: flex; width: 100%; z-index: 1; text-align: center; font-size: 10px; color: #3c3c3c; max-width: 720px; margin-inline: auto; } .tab-bar__link { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; } .tab-bar__home { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; width: 60px; height: 60px; background-color: #f1f3f5; border-radius: 50%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .tab-bar__home-wrapper { position: relative; flex: 1; max-width: 108px; } .tab-bar__home > a { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; padding-bottom: 4px; } .tab-bar__bg { position: absolute; display: flex; left: 0; right: 0; bottom: 0; height: 100%; gap: 20px; } .tab-bar__bg::before, .tab-bar__bg::after { content: ""; display: block; width: 50%; height: 100%; background-color: #ffffff; } .tab-bar__bg::before { border-top-right-radius: 44px; box-shadow: rgba(0, 0, 0, 0.1) 2px -2px 8px 0px; } .tab-bar__bg::after { border-top-left-radius: 44px; box-shadow: rgba(0, 0, 0, 0.1) -2px -2px 8px 0px; } .tab-bar__bg-fraction { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 30px; background: #ffffff; } .sub-box { position: relative; margin-bottom: 10px; background-color: #ffffff; } .sub-box:last-of-type { margin-bottom: 0; } .noResult { display: flex; justify-content: flex-start; flex-direction: column; align-items: center; min-height: 70vh; font-size: 16px; color: #666968; padding-top: 20vh; } .noResult__image { width: 68px; height: 68px; } .noResult__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .noResult__text { margin-top: 20px; letter-spacing: -0.025em; font-weight: 400; font-size: 16px; color: #343a40; } .main-section { padding: 20px 0; margin-bottom: 10px; background-color: #ffffff; } .main-section:last-of-type { margin-bottom: 0; } .main-section__main-banner { position: relative; padding: 0; margin-bottom: 0; } .main-section__category-type .product-list-vertical-twoAndaHalf .swiper-slide, .main-section__category-type .product-list-vertical-oneAndaHalf .swiper-slide, .main-section__category-type .product-list-vertical-oneAndaHalfCenter .swiper-slide { box-shadow: none; border-radius: 0; } .main-section__category-type .product-list-vertical-twoAndaHalf .product-unit-image, .main-section__category-type .product-list-vertical-oneAndaHalf .product-unit-image, .main-section__category-type .product-list-vertical-oneAndaHalfCenter .product-unit-image { border-radius: 6px; } .main-section__time-sale { position: relative; background-size: contain; background-repeat: no-repeat; background-position: center top; } .main-section__time-sale .main-section-header { opacity: 0; position: absolute; top: 28px; left: 0; } .main-section__time-sale .product-list-vertical-twoAndaHalf, .main-section__time-sale .product-list-vertical-oneAndaHalf, .main-section__time-sale .product-list-vertical-oneAndaHalfCenter, .main-section__time-sale .product-list-singleItem { padding-top: 15%; } .main-section__time-sale .product-list-singleItem .product-unit-info { padding: 0px 0px 8px 2px; } .main-section__time-sale.no-bg .main-section-header { opacity: 1; position: static; } .main-section__time-sale.no-bg .product-list-vertical-twoAndaHalf, .main-section__time-sale.no-bg .product-list-vertical-oneAndaHalf, .main-section__time-sale.no-bg .product-list-vertical-oneAndaHalfCenter, .main-section__time-sale.no-bg .product-list-singleItem { padding-top: 0; } .main-section__brand-link { padding: 12px 0; } .main-section__small-banner { padding: 0; } .main-section__product-banner .product-list-vertical-twoAndaHalf .swiper-slide, .main-section__product-banner .product-list-vertical-oneAndaHalf .swiper-slide, .main-section__product-banner .product-list-vertical-oneAndaHalfCenter .swiper-slide { box-shadow: none; border-radius: 0; } .main-section__product-banner .product-list-vertical-twoAndaHalf .product-unit-image, .main-section__product-banner .product-list-vertical-oneAndaHalf .product-unit-image, .main-section__product-banner .product-list-vertical-oneAndaHalfCenter .product-unit-image { border-radius: 6px; } .main-section__product-banner .product-list-vertical-twoAndaHalf .product-unit-info, .main-section__product-banner .product-list-vertical-oneAndaHalf .product-unit-info, .main-section__product-banner .product-list-vertical-oneAndaHalfCenter .product-unit-info { padding: 0px 0px 8px 2px; } .main-section__notice { padding: 20px 14px; } .swiper-pagination.theme-pagination { position: static; padding-top: 48px; } .main-banner__controller { position: absolute; display: flex; justify-content: center; align-items: center; left: 20px; bottom: 24px; z-index: 2; background-color: rgba(0, 0, 0, 0.65); width: 160px; height: 40px; border-radius: 100px; } .main-banner__pagination { display: inline-block; width: 24px; height: 24px; font-size: 15px; color: #ffffff; margin-right: 6px; margin-left: 6px; } .main-banner__btn { width: 24px; height: 24px; background-image: url(../images/icon_banner-controll.png); background-size: cover; background-position-x: 0; } .main-banner__btn.play { background-position-x: 72px; } .main-banner__btn.pause { background-position-x: 48px; } .main-banner .swiper-slide img { -o-object-fit: cover; object-fit: cover; max-height: 600px; width: 100%; height: 100%; } .main-banner__controls { position: absolute; display: flex; align-items: center; width: -moz-fit-content; width: fit-content; right: 12px; bottom: 12px; left: auto; background-color: rgba(0, 0, 0, 0.3); padding: 4px 16px; border-radius: 16px; color: #ffffff; z-index: 1; gap: 8px; } .main-banner__controls .swiper-pagination { position: static; } .main-banner__controls__btn { flex-shrink: 0; width: 16px; height: 16px; background-size: cover; background-image: url(../images/icon_swiper-controls.png); background-position: 0 0; } .main-banner__controls__btn.paused { background-position-x: 18px; } .main-section-header { margin-bottom: 16px; padding: 0 14px; position: relative; } .main-section-title { margin-bottom: 16px; } .main-section-title__description { display: block; font-size: 14px; color: #7e8282; } .main-section-title__title { display: flex; align-items: flex-end; font-size: 22px; font-weight: 700; gap: 4px; color: #16191d; } .main-section-title__title > .icon { flex-shrink: 0; margin-bottom: 3px; } .category-type-tab { padding: 0 0 8px 0; } .category-type-tab__list { display: flex; gap: 28px; } .category-type-tab__list li { flex: 1; max-width: 92px; } .category-type-tab__btn { display: flex; flex-direction: column; align-items: center; margin-inline: auto; } .category-type-tab__btn.active .category-type-tab__name { color: #1a1a1a; font-weight: 700; } .category-type-tab__name { margin-top: 8px; font-size: 12px; letter-spacing: -0.03em; color: #979b9d; text-align: center; word-break: keep-all; } .brand-link { display: flex; flex-direction: column; gap: 12px; } .brand-link__image { overflow: hidden; } .brand-link__image img { width: 100%; min-height: 80px; -o-object-fit: cover; object-fit: cover; } .product-list-vertical-twoAndaHalf .product-list-vertical-twoAndaHalf__swiper { position: relative; padding-left: 14px; padding-right: 14px; } .product-list-vertical-twoAndaHalf .product-unit-image { aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; } .product-list-vertical-twoAndaHalf .swiper-slide { height: auto; } .product-list-vertical-twoAndaHalf .product-unit-info { padding: 0px 0px 8px 2px; background-color: #ffffff; } .product-list-vertical-twoAndaHalf .swiper-scrollbar { margin-top: 20px; } .product-list-vertical-oneAndaHalf .product-list-vertical-oneAndaHalf__swiper { position: relative; padding-left: 14px; padding-right: 14px; } .product-list-vertical-oneAndaHalf .product-unit-image { aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; } .product-list-vertical-oneAndaHalf .swiper-slide { height: auto; } .product-list-vertical-oneAndaHalf .product-unit-info { padding: 0px 0px 8px 2px; background-color: #ffffff; } .product-list-vertical-oneAndaHalf .swiper-scrollbar { margin-top: 20px; } .product-list-vertical-oneAndaHalfCenter .product-list-vertical-oneAndaHalfCenter__swiper { position: relative; padding-left: 14px; padding-right: 14px; } .product-list-vertical-oneAndaHalfCenter .product-unit-image { aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; } .product-list-vertical-oneAndaHalfCenter .swiper-slide { background-color: #ffffff; height: auto; opacity: 0.6; filter: grayscale(0.6); transition: all 0.3s ease-in-out; } .product-list-vertical-oneAndaHalfCenter .product-unit-info { padding: 0px 0px 8px 2px; background-color: #ffffff; } .product-list-vertical-oneAndaHalfCenter .swiper-scrollbar { margin-top: 20px; } .product-list-vertical-oneAndaHalfCenter .swiper-slide-active { opacity: 1; filter: grayscale(0); } .time-sale__top { background-color: #212529; position: absolute; height: clamp(32px, 12%, 48px); width: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 1; } .time-sale__top .time { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .time-sale__top .left { margin-left: 6px; font-size: 13px; } .small-banner { overflow: hidden; } .small-banner__swiper { position: relative; } .small-banner__swiper .swiper-pagination { position: absolute; width: -moz-fit-content !important; width: fit-content !important; padding-top: 0; left: 50% !important; transform: translateX(-50%) !important; bottom: 3px !important; z-index: 8; } .small-banner__swiper .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px !important; } .small-banner__swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #495057; } .product-tab { position: relative; box-shadow: inset 0 -1px 0 0 #dee2e6; padding: 0 14px 1px; margin-bottom: 20px; } .product-tab::before { right: auto; left: 0; } .product-tab:after { right: auto; right: 0; } .product-tab ul { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; } .product-tab ul li { flex: 1; } .product-tab__btn { width: 100%; height: 46px; padding: 0 12px 4px; min-width: 60px; text-align: center; font-size: 14px; color: #868e96; word-break: keep-all; } .product-tab__btn.active { color: #212529; box-shadow: inset 0 -3px 0 0 #868e96; } .product-banner { padding: 0 14px; margin-bottom: 28px; } .product-banner__image { width: 100%; border-radius: 8px; overflow: hidden; } .product-banner__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-banner__description { margin-top: 10px; } .product-banner__description-title { font-size: 16px; color: #0d0f12; font-weight: 700; margin-bottom: 4px; } .product-banner__description-subtitle { display: block; font-size: 14px; color: #7e8282; } .magazine { padding-bottom: 20px; } .magazine__swiper .swiper-wrapper { padding-top: 12px; padding-bottom: 40px; } .magazine__swiper .swiper-slide { width: clamp(260px, 60vw, 350px); overflow: hidden; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); transform: scale(0.84) !important; transition: all 0.3s ease-in-out; } .magazine__swiper .swiper-slide img { opacity: 0.4; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; transition: all 0.3s ease-in-out; } .magazine__swiper .swiper-slide-active { transform: scale(1) !important; } .magazine__swiper .swiper-slide-active img { opacity: 1; } .magazine__link { text-align: center; } .magazine__link a { position: relative; border: 1px solid; display: inline-block; font-size: 14px; color: #343a40; border: 1px solid #e9ecef; padding: 8px 34px 8px 20px; border-radius: 40px; } .magazine__link a::after { content: ""; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg) translateY(calc(-50% - 1px)); border-color: #868e96; } .mainSns { padding: 0 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .mainSns__item { border-radius: 5px; overflow: hidden; } .mainSns__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mainNotice { border: 1px solid #dee2e6; border-radius: 5px; padding: 16px 16px; } .mainNotice__wrapper { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; } .mainNotice__title { display: flex; align-items: flex-end; font-size: 22px; font-weight: 700; gap: 4px; margin-bottom: 20px; } .mainNotice__list { margin-bottom: 20px; } .mainNotice__list li a { display: flex; align-items: center; gap: 7px; } .mainNotice__list li a span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: #212529; } .mainNotice__list li a .icon { flex-shrink: 0; } .mainNotice__list li + li { position: relative; margin-top: 24px; } .mainNotice__list li + li::before { content: ""; position: absolute; width: 100%; height: 1px; background-color: #f1f3f5; top: -12px; left: 0; } .mainNotice__link { text-align: center; padding-bottom: 8px; } .mainNotice__link a { position: relative; border: 1px solid; display: inline-block; font-size: 14px; color: #212529; border: 1px solid #dee2e6; padding: 8px 34px 8px 20px; border-radius: 40px; } .mainNotice__link a::after { content: ""; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg) translateY(calc(-50% - 1px)); border-color: #868e96; } .mainNotice__customerLink { display: flex; gap: 8px; } .mainNotice__customerLink__link { display: inline-flex; align-items: center; justify-content: center; height: 44px; text-align: center; flex: 1; font-size: 15px; color: #343a40; border: 1px solid #dee2e6; border-radius: 5px; } .mainNotice__customerLink__link.primary { font-weight: 500; background-color: #7e8282; color: #ffffff; border: 0; } .mainNotice__customerContact { display: flex; align-items: center; justify-content: center; border: 1px solid #e9ecef; border-radius: 5px; padding: 16px 16px; gap: 16px; } .mainNotice__customerContact .icon { flex-shrink: 0; } .mainNotice__customerContact__right { text-align: left; padding-bottom: 6px; } .mainNotice__customerContact--moreInfo { align-items: flex-start; } .mainNotice__customerContact--moreInfo dl { display: flex; align-items: center; margin-bottom: 4px; } .mainNotice__customerContact--moreInfo dl:last-child { margin-bottom: 0; } .mainNotice__customerContact--moreInfo dl dt { font-size: 12px; color: #495057; font-weight: 400; margin-right: 8px; min-width: 48px; } .mainNotice__customerContact--moreInfo dl dd { font-size: 12px; color: #16191d; font-weight: 400; } .notice__title { display: inline-block; font-weight: 500; color: #0d0f12; } .notice__title.customer-service { font-size: 17px; margin-right: 4px; } .notice__description { display: block; font-size: 16px; letter-spacing: -0.035em; color: #868e96; } .notice__number { font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; } .notice__paragraph { font-size: 13px; } .notice__text01 { font-weight: 500; color: #1971c2; } .notice__text02 { color: #868e96; } .notice__text03 { color: #495057; } .notice__moreInfo { margin-top: 16px; } .searchPage { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: #ffffff; } .searchPage.active { display: block; } .searchPage__inner { max-width: 720px; margin-inline: auto; background-color: #f4f6f8; } .searchPage__header { position: relative; display: flex; align-items: center; padding: 10px 16px; gap: 4px; border-bottom: 1px solid #e9ecef; background-color: #ffffff; } .searchPage__header .innerSearch { flex-grow: 1; border-radius: 5px; padding: 4px 10px; } .searchPage__section { padding: 16px; background-color: #ffffff; margin-bottom: 10px; } .searchPage__closeBtn { padding: 10px 5px; flex-shrink: 0; } .searchPage__closeBtn svg { fill: #606060; } .searchPage__textDeleteBtn { display: none; padding: 10px; } .searchPage__textDeleteBtn.active { display: block; } .searchPage__sectionHeader { display: flex; align-items: center; margin-bottom: 16px; } .searchPage__title { font-size: 16px; font-weight: 700; color: #16191d; margin-right: auto; } .recentSearch { position: relative; } .recentSearch__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; } .recentSearch__list::-webkit-scrollbar { display: none; } .recentSearch__list::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 32px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); } .recentSearch__item { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; border: 1px solid #dedede; font-size: 13px; line-height: 16px; font-weight: 400; color: #16191d; } .recentSearch__link { height: 32px; line-height: 32px; padding-left: 12px; } .recentSearch__delete { height: 32px; padding-right: 8px; } .recentSearch__deleteAll { font-size: 14px; color: #7e8282; font-weight: 400; padding: 8px 2px 8px 12px; } .recentSearch__noResult { font-size: 15px; color: #7e8282; text-align: center; padding: 20px 0; } .resultTrend__num { display: inline-block; font-size: 16px; font-weight: 700; color: #868e96; margin-right: 4px; min-width: 24px; } .resultTrend__list { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); background-color: #fafafa; border: 1px solid #dee2e6; border-radius: 5px; padding: 6px; -moz-column-gap: 6px; column-gap: 6px; margin-bottom: 20px; } .resultTrend__list li { position: relative; } .resultTrend__list li a { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; padding: 0 12px 0 4px; margin: 8px 0; width: 100%; } .resultTrend__list li .icon { position: absolute; top: 26px; right: 2px; } .resultTrend__list li:nth-child(1) { grid-area: 1/1/2/2; } .resultTrend__list li:nth-child(2) { grid-area: 2/1/3/2; } .resultTrend__list li:nth-child(3) { grid-area: 3/1/4/2; } .resultTrend__list li:nth-child(4) { grid-area: 4/1/5/2; } .resultTrend__list li:nth-child(5) { grid-area: 5/1/6/2; } .resultTrend__list li:nth-child(6) { grid-area: 1/2/2/3; } .resultTrend__list li:nth-child(7) { grid-area: 2/2/3/3; } .resultTrend__list li:nth-child(8) { grid-area: 3/2/4/3; } .resultTrend__list li:nth-child(9) { grid-area: 4/2/5/3; } .resultTrend__list li:nth-child(10) { grid-area: 5/2/6/3; } .best-review__item .product-unit-title a { font-size: 12px; line-height: 16px; } .best-review__item .product-unit-misc { display: flex; align-items: center; margin-top: 6px; } .best-review__item .product-unit-rating { margin-top: 0; margin-right: 8px; } .best-review__item .product-unit-price { margin-top: 0; } .best-review__item .product-unit-price__current { font-size: 13px; margin-left: 4px; } .best-review__product { display: flex; align-items: center; padding: 8px 0; border: 1px solid #dee2e6; border-width: 1px 0; margin-top: 16px; } .best-review__product .product-unit-info { margin-top: 0; margin-left: 8px; } .best-review__title { display: block; font-size: 16px; line-height: 20px; color: #030507; font-weight: 700; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .best-review__paragraph { font-size: 12px; color: #343a40; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 17px; height: 51px; margin-top: 8px; } .best-review__review-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px; } .best-review__product-image { flex-shrink: 0; width: 64px; height: 64px; } .best-review__product-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .availableReviewItem { padding: 16px; border-bottom: 1px solid #e9ecef; } .availableReviewItem:last-of-type { border-bottom: 0; } .availableReviewItem__image { flex-shrink: 0; position: relative; width: 85px; height: 85px; border-radius: 4px; overflow: hidden; } .availableReviewItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .availableReviewItem__image a { display: block; width: 100%; height: 100%; } .availableReviewItem__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .availableReviewItem__right { flex-grow: 1; margin-left: 10px; } .availableReviewItem__info__date { font-size: 14px; color: #666968; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .availableReviewItem__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 4px; } .availableReviewItem__info__option { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .availableReviewItem__info__quantity { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .availableReviewItem__info__dot { margin: 0 3px; } .availableReviewItem__linkContainer { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 6px; margin-left: auto; } .availableReviewItem__btn.btn { word-break: keep-all; font-size: 15px; height: 42px; max-width: 136px; } .availableReviewItem__top { display: flex; align-items: flex-start; gap: 10px; } .availableReviewItem__bottom { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .availableReviewItem__descText { font-size: 13px; color: #7e8282; } .availableReviewItem__descText em { font-style: normal; font-weight: 700; color: #666968; margin-left: 2px; word-break: keep-all; } .availableReviewItem__descText + .availableReviewItem__descText { margin-top: 2px; } .reviewWritingItem { display: flex; align-items: flex-start; padding: 16px 12px; border-radius: 2px; background-color: #f9f9f9; } .reviewWritingItem:last-of-type { border-bottom: 0; } .reviewWritingItem__image { flex-shrink: 0; position: relative; width: 68px; height: 68px; border-radius: 4px; overflow: hidden; } .reviewWritingItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .reviewWritingItem__image a { display: block; width: 100%; height: 100%; } .reviewWritingItem__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .reviewWritingItem__right { flex-grow: 1; margin-left: 10px; } .reviewWritingItem__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 6px; } .reviewWritingItem__info__option { font-size: 13px; color: #7e8282; line-height: 16px; font-weight: 400; } .reviewWritingItem__info__dot { margin: 0 3px; } .myReviewItem { padding: 16px; border-bottom: 1px solid #e9ecef; } .myReviewItem:last-of-type { border-bottom: 0; } .myReviewItem__top { display: flex; align-items: flex-start; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ededed; } .myReviewItem__image { flex-shrink: 0; position: relative; width: 85px; height: 85px; border-radius: 4px; overflow: hidden; } .myReviewItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .myReviewItem__image a { display: block; width: 100%; height: 100%; } .myReviewItem__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .myReviewItem__right { flex-grow: 1; margin-left: 10px; } .myReviewItem__info__date { font-size: 14px; color: #666968; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .myReviewItem__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 4px; } .myReviewItem__info__option { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .myReviewItem__info__quantity { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .myReviewItem__info__dot { margin: 0 3px; } .myReviewItem__reviewText { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 24px; margin-bottom: 6px; } .myReviewItem__reviewText.opened { -webkit-line-clamp: initial; } .myReviewItem__reviewMore { display: inline-flex; align-items: center; font-size: 14px; color: #1971c2; margin-bottom: 10px; cursor: pointer; padding: 4px 2px 4px 0; min-width: 60px; } .myReviewItem__reviewMore svg { margin-left: 3px; width: 12px; height: 12px; margin-top: 1px; } .myReviewItem__reviewMore svg, .myReviewItem__reviewMore path { fill: #1971c2; margin-top: -1px; } .myReviewItem__reviewMore.opened svg { transform: rotate(180deg); } .myReviewItem__thumbs { display: grid; grid-template-columns: repeat(3, 140px); gap: 6px; overflow-x: auto; padding-bottom: 10px; } .myReviewItem__thumbs a { display: block; aspect-ratio: 1/1; } .myReviewItem__thumbs img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; cursor: pointer; border-radius: 5px; } .myReviewItem__bottom { padding-top: 32px; position: relative; } .myReviewItem__bottom .reviewStars__wrapper { position: absolute; top: 0; left: 0; } .myReviewItem .textBtns { position: absolute; top: -2px; right: 0; } .myReviewImageSlide { background-color: #000000; height: calc(100% - 80px); } .myReviewImageSlide .swiper-slide { display: flex; align-items: center; justify-content: center; } .myReviewImageThumbs { padding: 10px 0 !important; background-color: #000000; } .myReviewImageThumbs .swiper-wrapper { justify-content: center; } .myReviewImageThumbs .swiper-slide { width: 60px; height: 60px; } .myReviewImageThumbs .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .myReviewImageThumbs .swiper-slide::after { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; z-index: 1; } .myReviewImageThumbs .swiper-slide.swiper-slide-thumb-active::after { content: ""; display: block; border: 3px solid #228be6; background-color: transparent; } .editUserInfo { background-color: #ffffff; padding: 16px; min-height: calc(100vh - 188px); min-height: calc(100svh - 188px); } .editUserPwCheck { padding-top: 16px; } .editUserPwCheck__title { font-size: 18px; font-weight: 700; color: #16191d; margin-bottom: 20px; } .editUserPwCheck__subTitle { font-size: 14px; font-weight: 400; color: #666968; margin-bottom: 8px; } .editUserPwCheck .input-text { margin-bottom: 28px; } .userForm { position: relative; margin-inline: auto; padding-top: 16px; } .userForm__required { position: absolute; top: 2px; right: 2px; color: #7e8282; font-size: 14px; font-weight: 400; } .userForm .input-text { height: 52px; } .userForm__inputBox { margin-bottom: 30px; } .userForm__inputBox__title { position: relative; display: block; color: #0d0f12; font-size: 16px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid #495057; } .userForm__inputBox > * { margin-bottom: 28px; } .userForm__inputBox .input-text { margin-bottom: 4px; } .userForm__inputBox .nice-select { height: 52px; line-height: 50px; } .userForm__inputBox__alertText { color: #f03e3e; padding-left: 4px; font-size: 13px; } .userForm__inputBox__checks { margin-top: 16px; margin-bottom: 8px; } .userForm__inputBox__checks .checkbox { font-size: 16px; font-weight: 500; } .userForm__inputBox .inputWithBtn .btn { height: 52px; min-width: 120px; } .userForm__inputBox .inputTimer { width: 100%; } .userForm__inputBox .inputEmail { margin-bottom: 4px; } .userForm__inputBox .inputEmail .input-text { margin-bottom: 0; } .userForm__inputBox .inputEmail .nice-select { width: 142px; } .userForm__inputBox__itemTitle { display: block; color: #212529; font-size: 14px; font-weight: 500; padding-left: 2px; margin-bottom: 6px; } .userForm__inputBox__itemTitle .misc { font-size: 12px; color: #7e8282; font-weight: 400; } .userForm__inputBox .custom-radio-container { height: 52px; gap: 28px; } .userForm__inputBox .inputAddress .inputAddress__postalCode { margin-bottom: 10px; } .userForm__inputBox .inputAddress .inputAddress__postalCode .input-text { margin-bottom: 0; } .userForm__inputBox .inputAddress .input-text { margin-bottom: 10px; } .userForm__inputBox .inputAddress__postalCode .btn { height: 52px; } .userForm__inputBox .phoneAuth { max-width: 480px; margin-top: 20px; } .userForm__inputBox .phoneAuth .input-text { margin-bottom: 0; } .userForm__inputBox .phoneAuth .inputWithBtn { margin-bottom: 4px; } .userForm__inputBox .phoneAuth .inputWithBtn .btn { width: 120px; } .userForm__inputBox .textInfo { margin-top: 4px; font-size: 12px; } .userForm__switch { display: flex; gap: 16px; padding-left: 4px; margin-top: 16px; } .userForm__switch .toggle-switchy .label { font-size: 13px; } .userForm__switch .toggle-switchy.kakao > input:checked + .toggle { background: #FEE500; } .userForm__switch .toggle-switchy.kakao > input:checked + .toggle > .switch { border: 3px solid #FEE500; } .userForm__switch .toggle-switchy.kakao > input + .toggle:before { color: #191919; } .userForm__switch .toggle-switchy.naver > input:checked + .toggle { background: #03c75a; } .userForm__switch .toggle-switchy.naver > input:checked + .toggle > .switch { border: 3px solid #03c75a; } .userForm__btnContainer-half { display: flex; gap: 8px; } .userForm__btnContainer-half .btn { flex-grow: 1; } .userForm__bottom { margin-top: 20px; } .userForm__deleteLink { position: relative; display: inline-block; font-size: 16px; color: #50514f; font-weight: 500; padding: 8px 16px; background-color: #ffffff; border: 1px solid #ced4da; border-radius: 4px; } .userForm__deleteLink:active { background-color: #fafafa; } .userForm__deleteLink::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #666968; border-right: 1px solid #666968; transform: rotate(45deg); margin-left: 4px; margin-bottom: 3px; } .userForm .select-box { display: flex; } .userForm--returnBox { padding: 14px 16px; background-color: #f7f7f7; border-radius: 5px; border: 1px solid #dedede; margin-bottom: 20px; } .userForm--returnBox .section-title { padding-bottom: 0; margin-bottom: 20px; } .userForm--innerBox { padding: 14px 16px; background-color: #f7f7f7; border-radius: 5px; border: 1px solid #dedede; margin-bottom: 10px; } .userForm--innerBox .input-text { height: 48px; } .userForm--innerBox .userForm__inputBox > * { margin-bottom: 16px; } .userForm--innerBox .userForm__inputBox__item:last-child { margin-bottom: 0; } .userForm--innerBox .userForm__inputBox { margin-bottom: 0; } .editContent__innerBox { display: flex; flex-direction: column; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 16px; border-radius: 4px; } .editContent__innerBox .input-text { margin-bottom: 8px; max-width: none; } .editContent__innerBox:has(.emailInput) { display: block; } .editContent__innerBtnContainer { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; } .deleteAccount__inner { margin-bottom: 40px; } .deleteAccount__image { border-radius: 20px; overflow: hidden; margin-bottom: 40px; } .deleteAccount__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .deleteAccount__title { font-size: 18px; margin-bottom: 10px; font-weight: 700; color: #16191d; } .deleteAccount__item { margin-bottom: 28px; } .deleteAccount__item .select-box { height: 50px; } .deleteAccount__item .nice-select { height: 50px; line-height: 48px; } .deleteAccount__itemTitle { display: block; color: #212529; font-size: 14px; font-weight: 500; padding-left: 2px; margin-bottom: 6px; } .deleteAccount .b-checkbox-container { margin-left: 2px; font-weight: 700; } .addressManage { background-color: #ffffff; padding: 16px; min-height: calc(100vh - 188px); min-height: calc(100svh - 188px); } .addressManage__header { display: flex; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid #495057; } .addressManage__title { font-size: 18px; font-weight: 700; color: #212529; margin-right: auto; } .addressManage__btnContainer { text-align: right; } .addressManage__list { border-bottom: 1px solid #dee2e6; } .addressManage__item { position: relative; display: flex; align-items: flex-start; padding: 26px 0 28px; border-bottom: 1px solid #dee2e6; } .addressManage__item:last-child { border-bottom: none; } .addressManage__itemRadio { padding: 5px 2px; margin-right: 6px; } .addressManage__itemBody { margin-right: auto; } .addressManage__itemName { display: flex; align-items: center; margin-bottom: 3px; } .addressManage__itemPerson { display: inline-flex; align-items: center; gap: 5px; color: #212529; font-size: 16px; font-weight: 500; } .addressManage__itemCheck svg, .addressManage__itemCheck path { fill: currentColor; } .addressManage__itemBadge { font-size: 14px; font-weight: 500; padding: 3px 5px; border-radius: 3px; color: #868e96; background-color: #f1f3f5; margin-left: 8px; font-size: 12px; margin-top: 1px; } .addressManage__itemPhone { font-size: 14px; color: #868e96; margin-bottom: 10px; } .addressManage__itemAddress { font-size: 14px; color: #212529; } .addressManage__item .textBtns { position: absolute; top: 26px; right: 0; } .addressManage__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 88px 0 84px; } .addressManage__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .addressManage .noResult { min-height: 50vh; } .myMemberRankInfo { margin-bottom: 40px; background-color: #ffffff; padding: 16px; } .myMemberRankInfo__title { font-size: 18px; font-weight: 500; color: #0d0f12; padding: 20px 16px; text-align: center; } .myMemberRankInfo__title em { font-style: normal; font-weight: 700; } .myMemberRankInfo__title strong { font-weight: 700; } .myMemberRankInfo__item { position: relative; overflow: hidden; padding: 28px 0; border-bottom: 1px solid #ededed; } .myMemberRankInfo__item:last-child { border-bottom: 0; } .myMemberRankInfo__top { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .myMemberRankInfo__top img { width: 92px; height: 92px; -o-object-fit: cover; object-fit: cover; margin-bottom: 20px; } .myMemberRankInfo__topDescription { text-align: center; margin-bottom: 20px; } .myMemberRankInfo__topName { display: inline-block; color: #16191d; font-size: 18px; font-weight: 700; margin-bottom: 20px; text-align: center; } .myMemberRankInfo__topText { font-size: 14px; color: #666968; width: 100%; margin-left: 2px; } .myMemberRankInfo__topText em { font-style: normal; font-weight: 500; color: #212529; } .myMemberRankInfo__body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; position: relative; } .myMemberRankInfo__box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background-color: #f7f7f7; border-radius: 4px; min-height: 80px; padding: 20px 16px; } .myMemberRankInfo__box img { width: 48px; height: 32px; -o-object-fit: cover; object-fit: cover; } .myMemberRankInfo__boxText { font-size: 14px; font-weight: 500; color: #16191d; } .myMemberRankInfo__boxText em { font-style: normal; font-weight: 700; color: #1c7ed6; } .myRank { margin-bottom: 10px; padding: 24px 16px; background-color: #ffffff; text-align: center; } .myRank__yourRank { font-size: 16px; font-weight: 500; color: #495057; margin-bottom: 28px; } .myRank__yourRank em { font-style: normal; font-weight: 700; color: #16191d; } .myRank__link { display: inline-flex; align-items: center; justify-content: center; } .myRank__link::after { content: ""; display: inline-block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-left: 2px; } .myRank .member-rank-summary__summary-info { margin-inline: auto; width: 288px; margin-bottom: 28px; } .myMileage > .sub-box { padding: 16px; background-color: #ffffff; } .mileageStatus { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; padding: 0 0 20px; } .mileageStatusCurrent { display: flex; align-items: flex-end; margin-bottom: 24px; } .mileageStatusCurrent svg { width: 48px; margin-right: 10px; } .mileageStatusCurrent__title { display: inline-block; font-size: 18px; font-weight: 500; color: #16191d; margin-bottom: 16px; margin-right: 6px; } .mileageStatusCurrent__number { display: inline-block; font-size: 28px; font-weight: 700; color: #16191d; letter-spacing: -0.032em; margin-bottom: 10px; margin-right: 4px; } .mileageStatusCurrent__unit { display: inline-block; font-size: 16px; font-weight: 500; color: #50514f; margin-bottom: 16px; } .mileageStatusMisc { position: relative; display: flex; gap: 28px; } .mileageStatusMisc::before { position: absolute; content: ""; display: block; width: 100%; height: 1px; background-color: #e9ecef; top: -12px; left: 50%; transform: translateX(-50%); } .mileageStatusMisc__item { text-align: center; position: relative; } .mileageStatusMisc__item + .mileageStatusMisc__item::before { position: absolute; content: ""; display: block; width: 1px; height: 16px; background-color: #dee2e6; top: 12px; left: -14px; } .mileageStatusMisc__title { font-size: 12px; font-weight: 500; color: #7e8282; margin-bottom: 10px; } .mileageStatusMisc__number { font-size: 18px; font-weight: 700; color: #666968; letter-spacing: -0.032em; } .mileageStatusMisc__unit { font-size: 12px; font-weight: 500; color: #666968; } .mileageList { display: none; } .mileageList.current { display: block; } .mileageList__item { position: relative; padding: 10px 0 12px; border-bottom: 1px solid #dee2e6; } .mileageList__item:last-child { border-bottom: 0; } .mileageList__itemHeader { display: flex; flex-direction: column; margin-bottom: 10px; } .mileageList__itemDate { font-size: 12px; color: #7e8282; } .mileageList__itemDot { color: #7e8282; } .mileageList__itemBrand { font-size: 12px; color: #7e8282; } .mileageList__itemTitle { font-size: 18px; font-weight: 700; color: #212529; margin-right: auto; } .mileageList__itemBody { display: flex; align-items: center; margin-bottom: 12px; } .mileageList__itemDescription { margin-right: 6px; color: #212529; } .mileageList__itemNumber { font-size: 16px; font-weight: 700; color: #212529; margin-bottom: 2px; } .mileageList__item--saveUp .mileageList__itemTitle { color: #1c7ed6; } .mileageList__item--saveUp .mileageList__itemNumber { color: #1c7ed6; } .mileageList__productName { font-weight: 500; color: #7e8282; } .mileageList__orderNum { position: absolute; top: 16px; right: 0; color: #7e8282; font-weight: 500; font-size: 12px; } .mileageList__orderNum em { font-style: normal; font-weight: 400; margin-left: 2px; letter-spacing: -0.01em; } .mileageList__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .mileageList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .couponRegister .input-text { font-size: 14px; } .couponRegister .btn { height: 48px; } .couponList { padding: 16px; } .couponList__item { display: flex; width: 100%; min-height: 188px; margin-bottom: 20px; } .couponList__left { width: 64%; padding: 20px 16px; border-radius: 8px; border: 1px solid #dee2e6; border-right: 1px dashed #dee2e6; } .couponList__title { font-size: 16px; font-weight: 700; color: #1971c2; margin-bottom: 12px; } .couponList__subTitle { font-size: 13px; color: #343a40; } .couponList__date { font-size: 13px; color: #868e96; margin-bottom: 28px; } .couponList__dayLeft { font-size: 13px; color: #e03131; } .couponList__checkBtn { font-size: 15px !important; font-weight: 500; } .couponList__right { width: 36%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 12px; gap: 18px; border-radius: 8px; border: 1px solid #dee2e6; border-left: 0; } .couponList__right .btn { word-break: keep-all; height: auto; min-height: 36px; padding: 2px 16px; } .couponList__image { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 1px solid #dee2e6; } .couponList__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .couponList__link { color: #1c7ed6; font-size: 14px; font-weight: 500; } .couponList__link::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #1c7ed6; border-right: 1px solid #1c7ed6; transform: rotate(45deg); margin-left: 4px; margin-bottom: 3px; } .couponList__link:hover { text-decoration: underline; text-decoration-color: #228be6; } .couponList__btnContainer { text-align: right; } .couponList__no-result { grid-column: span 2; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .couponList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .couponList__select { display: flex; margin-bottom: 10px; } .couponList__downloadAll { margin-bottom: 10px; } .listTop { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; } .listTop__data { color: #50514f; font-size: 15px; font-weight: 500; } .listTop em { font-style: normal; } .listTop__filterBtn svg, .listTop__filterBtn path { fill: #50514f; } .orderListItem__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; border-bottom: 1px solid #e9ecef; } .orderListItem__top__date { font-size: 16px; font-weight: 500; color: #212529; } .orderListItem__top__date .misc { font-size: 14px; font-weight: 400; color: #868e96; margin-left: 4px; } .orderListItem__top__more { color: #1c7ed6; font-size: 13px; font-weight: 500; } .orderListItem__top__more::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #1c7ed6; border-right: 1px solid #1c7ed6; transform: rotate(45deg); margin-left: 4px; margin-bottom: 2px; } .orderListItem__body { display: flex; align-items: flex-start; padding: 20px 16px; } .orderListItem:last-of-type { border-bottom: 0; } .orderListItem__image { flex-shrink: 0; position: relative; width: 85px; height: 85px; border-radius: 4px; overflow: hidden; } .orderListItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .orderListItem__image a { display: block; width: 100%; height: 100%; } .orderListItem__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .orderListItem__right { flex-grow: 1; margin-left: 10px; } .orderListItem__info__status { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #666968; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderListItem__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 4px; } .orderListItem__info__option { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderListItem__info__quantity { font-size: 13px; color: #16191d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderListItem__info__dot { margin: 0 3px; } .orderListItem__btnControls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 16px 20px; } .orderListItem__btnControls .btn:only-child { grid-column: 1/-1; } .orderDetail__body { padding: 14px 16px; } .orderDetail__body .textBtns { justify-content: flex-end; margin-bottom: 10px; } .orderDetail__table:last-child { margin-bottom: 0; } .orderDetail__table > .table { border-top: none; box-shadow: none; } .orderDetail__table > .table tr { border-bottom: none; } .orderDetail__table > .table th { background-color: transparent; height: 34px; padding: 4px 8px 4px 2px; vertical-align: top; color: #0d0f12; font-weight: 400; line-height: 1.2; } .orderDetail__table > .table td { background-color: transparent; height: 34px; padding: 4px 8px 4px 2px; vertical-align: top; text-align: right; color: #0d0f12; line-height: 1.2; } .orderDetail__table > .table td em { font-style: normal; font-weight: 500; color: #030507; } .orderDetail__table > .table .input-text { font-size: 16px; padding-left: 12px; height: 48px; max-width: 320px; } .orderDetail__table > .table .inputWithBtn .btn { flex-shrink: 0; height: 48px; } .orderDetail__table > .table .inputHalf { max-width: 320px; } .orderDetail__table > .table .inputHalf .nice-select { height: 48px; line-height: 50px; font-size: 16px; } .orderDetail__table > .table .inputAddress .input-text { max-width: 420px; } .orderDetail__table > .table .inputAddress__postalCode { max-width: 320px; } .orderDetail__table > .table .inputAddress__postalCode .input-text { margin-bottom: 0; } .orderDetail__table > .table .inputAddress__postalCode .btn { height: 48px; flex-shrink: 0; } .orderDetail__table > .table .textarea { max-width: 720px; } .orderDetail__table > .table .nice-select { height: 48px; line-height: 46px; } .orderDetail__table__address { font-size: 13px; } .orderDetail__table__productPrice { font-size: 16px; font-weight: 500; color: #0d0f12; } .orderDetail__table__discountSub th { color: #7e8282 !important; } .orderDetail__table__discountSub th span { display: inline-block; position: relative; padding-left: 16px; } .orderDetail__table__discountSub th span::before { content: ""; position: absolute; display: inline-block; width: 8px; height: 8px; border-left: 2px solid #ced4da; border-bottom: 2px solid #ced4da; top: 3px; left: 3px; } .orderDetail__table__discountSub td { color: #7e8282 !important; } .orderDetail__table--price th, .orderDetail__table--price td { font-size: 15px; } .orderDetail__table__sum { border-top: 1px solid #e9ecef; } .orderDetail__table__sum th, .orderDetail__table__sum td { font-size: 18px; font-weight: 700 !important; color: #0d0f12; padding-top: 20px !important; padding-bottom: 12px !important; } .orderDetail__table__misc { font-size: 12px; color: #666968; } .orderDetail__table__cashCancel { margin-top: 8px; } .orderDetail__date { color: #868e96; } .orderDetail__deduction { font-size: 13px; color: #7e8282; margin-left: 4px; } .orderDetail__waiting { font-size: 14px; font-weight: 500; color: #50514f; margin-right: 4px; } .orderDetailTop { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; } .orderDetailTop__date { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #16191d; } .orderDetailTop__date .misc { font-weight: 500; color: #666968; } .orderDetailTop__num { font-size: 13px; font-weight: 400; color: #666968; } .orderDetailProduct.closed .orderDetailProduct__content { display: none; } .orderDetailProduct.closed .orderDetail__content { display: none; } .orderDetailProduct__top { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border-bottom: 1px solid #e9ecef; } .orderDetailProduct__top__title { font-size: 16px; font-weight: 700; } .orderDetailProduct__top__title .misc { font-size: 14px; font-weight: 500; color: #7e8282; } .orderDetailProduct__top__chevron { position: absolute; display: block; width: 12px; height: 12px; border-right: 1px solid #495057; border-bottom: 1px solid #495057; right: 20px; top: 21px; transform: translateY(4px) rotate(-135deg); } .orderDetailProduct__top__chevron.closed { transform: translateY(-4px) rotate(45deg); } .orderDetailProduct__top__address { display: flex; align-items: flex-start; font-size: 13px; color: #666968; margin-top: 8px; line-height: 22px; } .orderDetailProduct__top__name { display: inline-block; position: relative; font-size: 15px; font-weight: 500; color: #0d0f12; padding-right: 16px; line-height: 22px; flex-shrink: 0; } .orderDetailProduct__top__name::after { position: absolute; content: ""; display: inline-block; width: 1px; height: 14px; background-color: #dee2e6; top: 50%; right: 8px; transform: translateY(-50%); } .orderDetailProduct__multiple__top { padding: 12px 0; } .orderDetailProduct__item { position: relative; display: flex; align-items: flex-start; padding: 20px 16px; } .orderDetailProduct__item + .orderDetailProduct__item::before { position: absolute; content: ""; display: block; width: calc(100% - 32px); height: 1px; top: 0; left: 16px; background-color: #f1f3f5; } .orderDetailProduct:last-of-type { border-bottom: 0; } .orderDetailProduct__image { flex-shrink: 0; position: relative; width: 85px; height: 85px; border-radius: 4px; overflow: hidden; } .orderDetailProduct__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .orderDetailProduct__image a { display: block; width: 100%; height: 100%; } .orderDetailProduct__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .orderDetailProduct__right { flex-grow: 1; margin-left: 10px; } .orderDetailProduct__info__status { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #666968; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderDetailProduct__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 4px; } .orderDetailProduct__info__option { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderDetailProduct__info__quantity { font-size: 13px; color: #16191d; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .orderDetailProduct__info__dot { margin: 0 3px; } .orderDetailProduct__btnControls { padding: 0 16px 20px; } .orderDetailProduct__cancel { display: flex; align-items: flex-start; justify-content: space-between; } .orderDetailProduct__cancel__num { font-size: 13px; color: #f03e3e; line-height: 16px; font-weight: 400; } .orderDetailProduct__cancel .nativeSelect { margin-top: -14px; } .orderDetailProduct__cancel .nativeSelect select { height: 32px; line-height: 30px; font-size: 13px; } .orderDetailProduct--multiple .orderDetailProduct__item { border-radius: 5px; padding: 14px; margin-bottom: 14px; background-color: #f7f7f7; } .orderDetailProduct--multiple .orderDetailProduct__item + .orderDetailProduct__item::before { display: none; } .orderDetailProduct .infoBox:last-child { border: 1px solid #e9ecef; border-width: 1px 0; border-radius: 0; } .orderRefundReason { margin-bottom: 20px; } .orderRefundReason__title { font-size: 16px; margin-bottom: 10px; font-weight: 700; color: #16191d; } .orderRefundReason__item { margin-bottom: 20px; } .orderRefundReason__item .select-box { height: 50px; } .orderRefundReason__item .nice-select { height: 50px; line-height: 48px; } .orderRefundReason__item:last-child { margin-bottom: 0; } .orderRefundReason__item .custom-radio-container { flex-wrap: wrap; padding: 6px 0; row-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .orderRefundReason__item > .textarea { display: block; } .orderRefundReason__item > .select-box, .orderRefundReason__item > .input-text, .orderRefundReason__item > .textarea { margin-bottom: 10px; } .orderRefundReason__itemTitle { display: block; color: #666968; font-size: 15px; font-weight: 500; margin-bottom: 8px; } .orderRefundReason:last-of-type { margin-bottom: 0; } .myQnaList__top { position: relative; display: flex; align-items: flex-start; -webkit-appearance: none; padding: 0 16px; cursor: pointer; } .myQnaList__top::-webkit-details-marker { display: none; } .myQnaList__top__chevron { position: absolute; display: block; width: 12px; height: 12px; border-right: 1px solid #495057; border-bottom: 1px solid #495057; right: 12px; top: 50%; transform: translateY(calc(-50% - 6px)) rotate(45deg); } .myQnaList__item { position: relative; display: flex; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #e9ecef; -webkit-appearance: none; } .myQnaList__item[open] { padding-bottom: 0; } .myQnaList__item[open] .myQnaList__top__chevron { transform: translateY(calc(-50% + 6px)) rotate(-135deg); } .myQnaList:last-of-type { border-bottom: 0; } .myQnaList__image { flex-shrink: 0; position: relative; width: 85px; height: 85px; border-radius: 4px; overflow: hidden; } .myQnaList__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .myQnaList__image a { display: block; width: 100%; height: 100%; } .myQnaList__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .myQnaList__right { flex-grow: 1; margin-left: 10px; } .myQnaList__info { position: relative; height: 85px; } .myQnaList__info__name { display: block; font-size: 14px; font-weight: 400; color: #666968; line-height: 20px; margin-bottom: 2px; } .myQnaList__info__question { font-size: 15px; font-weight: 500; color: #0d0f12; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 36px; } .myQnaList__info__status { position: absolute; bottom: 3px; left: 1px; display: flex; align-items: center; font-size: 13px; color: #666968; line-height: 14px; font-weight: 400; } .myQnaList__info__date { position: relative; margin-left: 20px; } .myQnaList__info__date::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #d1d6d8; left: -10px; top: 2px; } .myQnaList__answer { position: relative; padding: 16px; margin-top: 16px; border-top: 1px solid #f1f3f5; background-color: #fafafa; } .myQnaList__answer__badge { font-size: 13px; font-weight: 500; color: #ffffff; padding: 2px 6px; border-radius: 3px; background-color: #808080; display: inline-block; line-height: 18px; margin-right: 4px; } .myQnaList__answer__question { font-size: 14px; margin-top: 28px; margin-bottom: 12px; padding: 0 4px; } .myQnaList__answer__reply { background-color: #f2f2f2; border-radius: 5px; padding: 12px 14px; font-size: 14px; color: #50514f; } .myQnaList__answer__reply__text { line-height: 24px; } .myQnaList__answer .textBtns { position: absolute; top: 8px; right: 8px; } .myQnaList--noImage .myQnaList__right { margin-left: 0; } .myQnaList--noImage .myQnaList__info__question { margin-bottom: 8px; } .myQnaList--noImage .myQnaList__info { height: auto; } .myQnaList--noImage .myQnaList__info__status { position: static; } .myQnaEdit { background-color: #ffffff; padding: 16px; } .myContactList .myReviewItem__thumbs { margin-bottom: 20px; } .eventList { background-color: #ffffff; padding: 16px; } .eventList__item { display: block; padding: 16px 0; border-bottom: 1px solid #e9ecef; } .eventList__item:last-of-type { border-bottom: 0; } .eventList__item:first-of-type { padding-top: 8px; } .eventList__top { display: flex; align-items: center; margin-bottom: 6px; } .eventList__badge { font-size: 11px; font-weight: 500; color: #16191d; padding: 2px 4px; border-radius: 3px; border: 1px solid #495057; background-color: #f7f7f7; display: inline-block; line-height: 14px; margin-right: 6px; flex-shrink: 0; } .eventList__badge--progress { color: #339af0; background-color: #f6fbff; border: 1px solid #339af0; } .eventList__badge--closed { color: #7e8282; background-color: white; border: 1px solid #7e8282; } .eventList__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 400; color: #030507; } .eventList__date { font-size: 13px; color: #7e8282; } .eventList__list { display: flex; flex-wrap: wrap; margin-top: 4px; } .eventList__list li { font-size: 12px; font-weight: 400; color: #7e8282; } .eventList__list li + li::before { content: ""; display: inline-block; width: 1px; height: 10px; background-color: currentColor; margin: 0 8px; opacity: 0.4; } .detailTop { padding: 8px 16px; display: flex; min-height: 44px; justify-content: space-between; align-items: center; background-color: #212529; } .detailTop__title { font-size: 16px; color: #ffffff; font-weight: 400; } .detailTop__title em { font-style: normal; font-weight: 700; color: #4dabf7; } .userNoticeSection { min-height: 44px; padding: 12px 16px; background-color: #f0f8ff; } .userNoticeSection__text { font-size: 15px; color: #1c7ed6; font-weight: 500; margin-bottom: 4px; } .userNoticeSection__text .misc { font-size: 14px; font-weight: 400; color: #1c7ed6; } .userNoticeSection__text:last-child { margin-bottom: 0; } .userNoticeSection__text--question { font-size: 16px; } .userNoticeSection__subText { font-size: 14px; color: #16191d; font-weight: 400; margin-bottom: 16px; } .userNoticeSection__subText:last-child { margin-bottom: 0; } .userNoticeSection__subText em { font-style: normal; font-weight: 700; color: #0d0f12; } .userNoticeSection .custom-radio-container { -moz-column-gap: 24px; column-gap: 24px; padding-top: 12px; } .userNoticeSection--giftAsk { background-color: #fafafa; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; } .userNoticeSection--giftAsk .userNoticeSection__text { color: #0d0f12; font-size: 16px; } .deliveryCycle { border: 1px solid #e0e0e0; padding: 20px 16px 14px; margin-bottom: 12px; border-radius: 6px; background-color: #ffffff; } .deliveryCycle-description { font-weight: 500; color: #3a3a37; font-size: 15px; margin-bottom: 16px; } .deliveryCycle .custom-radio-container { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; -moz-column-gap: 16px !important; column-gap: 16px !important; row-gap: 16px !important; } .deliveryCycle__wrapper { padding: 16px; } .personalPayment { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 12px; column-gap: 12px; row-gap: 34px; margin-bottom: 80px; border-top: 1px solid #495057; padding: 16px; } .personalPayment__period { font-size: 13px; color: #7e8282; } .personalPayment__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; grid-column: span 4; } .personalPayment__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .personalPayment .product-unit-price__current { font-size: 16px; } .personalPayment .product-unit-info { margin-top: 8px; } .personalPayment .product-unit-info__inner { padding-top: 0; } .personalPayment .product-unit-price { margin-top: 0; } .myPageMain .sub-box { position: relative; padding: 16px; background-color: #ffffff; } .myPageMain__logout { display: flex; justify-content: center; align-items: center; border: 1px solid #dee2e6; color: #343a40; height: 44px; border-radius: 5px; gap: 4px; font-size: 15px; } .myPageMain__innerTitle { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .myPageMain__more { position: absolute; right: 20px; top: 18px; color: #495057; font-size: 13px; font-weight: 500; } .myPageMain__more::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: rotate(45deg); margin-left: 4px; margin-bottom: 2px; } .myPageMain__btnContainer { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; } .myPageMain__btnContainer .btn { height: 44px; flex: 1; } .myPageMain__menuTitle { font-size: 15px; color: #868e96; margin-bottom: 12px; } .myPageMain__menuList li a { position: relative; display: block; padding: 14px 0; font-size: 16px; } .myPageMain__menuList li a::after { position: absolute; content: ""; display: inline-block; right: 4px; top: 50%; width: 10px; height: 10px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: translateY(-50%) rotate(45deg); } .myPageMain__menuList li + li { border-top: 1px solid #f1f3f5; } .member-rank-summary { background-color: #ffffff; } .member-rank-summary__top { position: relative; display: flex; align-items: center; min-height: 70px; padding: 14px; margin-bottom: 10px; } .member-rank-summary__bottom { display: flex; align-items: center; min-height: 120px; border-top: 1px solid #f1f3f5; padding-top: 10px; } .member-rank-summary__icon { width: 60px; height: 60px; margin-right: 16px; } .member-rank-summary__user { margin-right: auto; } .member-rank-summary__rank { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.035em; color: #495057; } .member-rank-summary__name { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; color: #0d0f12; } .member-rank-summary__name .append { font-size: 18px; font-weight: 500; } .member-rank-summary__benefit-link { color: #343a40; font-weight: 500; font-size: 14px; letter-spacing: -0.035em; padding: 4px 16px; border: 1px solid #b1b6b9; border-radius: 21px; background-color: #ffffff; } .member-rank-summary__benefit-link:hover { background-color: #f9f9f9; } .member-rank-summary__summary { display: flex; flex-grow: 1; flex-shrink: 0; } .member-rank-summary__summary-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .member-rank-summary__summary-item > img { width: 30px; height: 30px; } .member-rank-summary__summary-item + .member-rank-summary__summary-item { position: relative; margin-left: 20px; } .member-rank-summary__summary-item + .member-rank-summary__summary-item::before { position: absolute; content: ""; display: block; width: 1px; height: 34px; background-color: #e9ecef; top: 50%; left: -10px; transform: translateY(-50%); } .member-rank-summary__summary-item img { margin-bottom: 12px; } .member-rank-summary__summary-name { display: block; font-weight: 500; color: #343a40; margin-bottom: 4px; } .member-rank-summary__summary-numberContainer { display: flex; justify-content: center; align-items: center; line-height: 1.2; } .member-rank-summary__summary-number { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; color: #16191d; } .member-rank-summary__summary-numberUnit { font-size: 15px; color: #495057; margin-left: 2px; margin-top: 1px; } .member-rank-summary__summary-info { display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 4px; padding: 10px 12px; line-height: 2; background-color: #f8fafb; color: #343a40; min-height: 80px; width: 280px; } .member-rank-summary__summary-info em { font-style: normal; font-weight: 500; color: #f03e3e; } .orderProgress { display: flex; align-items: center; justify-content: center; border-radius: 4px; min-height: 140px; } .orderProgress__list { display: flex; width: 100%; } .orderProgress__list li { flex: 1; text-align: center; position: relative; } .orderProgress__list li + li::before { position: absolute; content: ""; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #979b9d; border-right: 1px solid #979b9d; top: 9px; left: -7px; transform: rotate(45deg); } .orderProgress__list li.current .orderProgress__num { color: #228be6; } .orderProgress__list li.current .orderProgress__text { font-weight: 500; color: #252521; } .orderProgress__num { display: block; font-size: 26px; line-height: 1; margin-bottom: 16px; font-weight: 700; color: #adb5bd; } .orderProgress__text { display: block; font-size: 14px; color: #868e96; } .wishList__btnControls { display: flex; gap: 6px; } .wishList__btnControls .gift-btn { flex-shrink: 0; width: 40px; height: 40px; font-size: 13px; } .wishList__btnControls .gift-btn::before { width: 20px; height: 20px; } .wishList__btnControls .btn { flex: 1; } .quickReviewItem { display: flex; align-items: center; padding: 16px; } .quickReviewItem:last-of-type { border-bottom: 0; } .quickReviewItem__image { flex-shrink: 0; position: relative; width: 76px; height: 76px; border-radius: 4px; overflow: hidden; } .quickReviewItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .quickReviewItem__image a { display: block; width: 100%; height: 100%; } .quickReviewItem__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .quickReviewItem__right { flex-grow: 1; margin-left: 10px; } .quickReviewItem__info__name { display: block; font-size: 16px; font-weight: 500; color: #0d0f12; line-height: 20px; margin-bottom: 6px; } .quickReviewItem__info__option { font-size: 13px; color: #7e8282; line-height: 16px; font-weight: 400; margin-bottom: 6px; } .quickReviewItem__info__dot { margin: 0 3px; } .customerMain .sub-box { position: relative; padding: 16px; background-color: #ffffff; } .customerMain__innerTitle { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .customerMain__more { position: absolute; right: 20px; top: 18px; color: #495057; font-size: 13px; font-weight: 500; } .customerMain__more::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: rotate(45deg); margin-left: 4px; margin-bottom: 2px; } .customerMain__boardList > li { border-top: 1px solid #f1f3f5; } .customerMain__boardList > li a, .customerMain__boardList > li details { position: relative; display: block; padding: 12px 0; font-size: 14px; } .customerMain__boardList > li summary { word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .customerMain__boardList > li summary::-webkit-details-marker { display: none; } .customerMain__boardList > li .customerMain__boardTitle { word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .customerMain__boardList > li details[open] { padding-bottom: 0; } .customerMain__boardList > li summary { display: block; cursor: pointer; } .customerMain__boardList > li .icon_new-post, .customerMain__boardList > li .icon_hot-post { margin-left: 2px; vertical-align: top; margin-top: 3px; } .customerMain__boardList > li .icon_notice-speaker { margin-right: 4px; vertical-align: top; margin-top: 3px; } .customerMain__boardList > li:last-child { border-bottom: 1px solid #f1f3f5; } .customerMain__boardCategory { display: block; font-size: 13px; color: #7e8282; font-weight: 500; margin-bottom: 4px; } .customerMain__boardDate { display: block; color: #7e8282; font-size: 12px; margin-top: 4px; } .customerMain__boardFixed { position: relative; } .customerMain__boardFixed::before { position: absolute; content: ""; display: inline-block; left: -16px; right: -16px; top: 0; background-color: #f7f7f7; bottom: -1px; } .customerMain__boardFixed + .customerMain__boardFixed { border-color: #ededed !important; } .customerMain__boardFixed .customerMain__boardContent { border-top: 1px solid #ededed; } .customerMain__boardFixed .customerMain__boardContent::before { background-color: #f2f2f2; } .customerMain__boardContent { position: relative; font-size: 13px; white-space: normal; line-height: 22px; padding: 14px 0; margin-top: 10px; z-index: 0; border-top: 1px solid #f1f3f5; color: #030507; padding-left: 26px; } .customerMain__boardContent::before { position: absolute; content: ""; display: block; left: -16px; right: -16px; top: 0; bottom: 0; z-index: -1; background-color: #fafafa; } .customerMain__boardContent .icon_reply { position: absolute; left: 6px; top: 18px; } .btnTabLinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; } .btnTabLinks__link { display: flex; align-items: center; justify-content: center; height: 48px; background-color: #ffffff; text-align: center; font-size: 14px; font-weight: 500; color: #495057; border-radius: 4px; border: 1px solid #dee2e6; padding-left: 6px; } .btnTabLinks__link::after { content: ""; display: inline-block; width: 6px; height: 6px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: rotate(45deg); margin-left: 6px; margin-top: 0px; } .btnTabLinks__link:active { background-color: #f7f7f7; } .customerFaq .sub-box { padding: 16px; } .customerNotice .sub-box { padding: 16px; } .orderNumCheck .sub-box { padding: 16px; } .orderNumCheck .custom-radio-container { margin-bottom: 10px; } .orderNumCheck .custom-radio { width: 100%; } .orderNumCheck .custom-radio label { width: 100%; } .orderNumCheck__orderNum { font-size: 13px; font-weight: 300; color: #7e8282; margin-left: 2px; } .orderNumCheck .b-checkbox-container.vertical .b-checkbox + .b-checkbox { margin-top: 12px; } .b-checkbox.checkbox .inner-product { display: inline-flex; align-items: flex-start; } .b-checkbox.checkbox .inner-product img { width: 85px; height: 85px; -o-object-fit: cover; object-fit: cover; border-radius: 2px; margin-left: 6px; } .b-checkbox.checkbox .inner-product__info { display: block; margin-left: 8px; } .b-checkbox.checkbox .inner-product__info-status { font-size: 14px; color: #666968; line-height: 16px; font-weight: 400; margin-bottom: 4px; } .b-checkbox.checkbox .inner-product__info-title { display: block; font-size: 16px; color: #0d0f12; font-weight: 500; line-height: 20px; margin-bottom: 4px; } .b-checkbox.checkbox .inner-product__info-option { font-size: 13px; color: #979b9d; line-height: 16px; font-weight: 400; } .productManual { position: relative; display: flex; align-items: flex-start; width: 100%; padding: 16px; } .productManual + .productManual { border-top: 1px solid #f1f3f5; } .productManual__left { display: flex; margin-right: auto; align-items: flex-start; } .productManual__left img { width: 64px; height: 64px; border-radius: 2px; border-radius: 4px; margin-right: 10px; } .productManual__info { height: 64px; display: flex; flex-direction: column; justify-content: space-between; } .productManual__info-title { font-size: 14px; font-weight: 500; padding-right: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 18px; margin-top: 2px; } .productManual__info-download { font-size: 12px; color: #50514f; margin-bottom: 2px; } .productManual__btn { position: absolute; padding: 12px; right: 12px; top: 50%; transform: translateY(-50%); } .userGuide .sub-box { padding: 16px; } .userGuideList { border-top: 1px solid #dee2e6; } .userGuideList__top { position: relative; display: flex; align-items: flex-start; -webkit-appearance: none; padding: 0 8px; cursor: pointer; height: 54px; } .userGuideList__top::-webkit-details-marker { display: none; } .userGuideList__top__chevron { position: absolute; display: block; width: 12px; height: 12px; border-right: 1px solid #495057; border-bottom: 1px solid #495057; right: 4px; top: 50%; transform: translateY(calc(-50% - 4px)) rotate(45deg); } .userGuideList__item { position: relative; display: flex; align-items: flex-start; border-bottom: 1px solid #dee2e6; -webkit-appearance: none; } .userGuideList__item[open] { padding-bottom: 0; } .userGuideList__item[open] .userGuideList__top__chevron { transform: translateY(calc(-50% + 4px)) rotate(-135deg); } .userGuideList:last-of-type { border-bottom: 0; } .userGuideList__topInner { flex-grow: 1; } .userGuideList__info { position: relative; } .userGuideList__info__title { font-size: 16px; font-weight: 700; color: #212529; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 36px; height: 54px; line-height: 54px; } .userGuideList__content { padding: 14px 10px; background-color: #fafafa; border-top: 1px solid #e9ecef; font-size: 13px; color: #50514f; letter-spacing: -0.01em; } .userGuideList__content p { margin-bottom: 16px; } .userGuideList__content ul, .userGuideList__content ol { margin-bottom: 16px; } .userGuideList__content ul li, .userGuideList__content ol li { margin-bottom: 4px; } .userGuideList__content em { font-style: normal; font-weight: 700; } .userGuideList__content em.blue { color: #228be6; } .userGuideList__innerSubTitle { font-size: 14px; font-weight: 500; color: #50514f; margin-bottom: 4px; } .userGuideList__innerTitle { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: #3a3a37; } .userGuideList__innerTitle ~ .userGuideList__innerTitle { margin-top: 40px; } .suggestionImage { margin-bottom: 20px; } .suggestionImage img { width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .login { padding: 16px; } .login .input-text { height: 56px; } .login__inputBox { margin-bottom: 30px; } .login__inputBox > * { margin-bottom: 5px; } .login__inputBox .input-text { font-size: 16px; } .login__inputBox .input-text + .input-text { margin-top: 12px; } .login__inputBox__alertText { color: #f03e3e; padding-left: 6px; padding-bottom: 8px; font-size: 13px; } .login__inputBox__alertText:last-of-type { padding-bottom: 0; } .login__inputBox .inputWithBtn .btn { flex-shrink: 0; width: 142px; height: 56px; } .login__inputBox .inputTimer { width: 100%; } .login__misc { display: flex; align-items: center; margin-bottom: 16px; } .login__misc__link { margin-left: auto; font-size: 15px; color: #7e8282; } .login__loginBtn.btn { flex: 1; font-size: 20px; } .login__loginBtnContainer { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .login__signIn { font-size: 16px; display: flex; justify-content: center; gap: 8px; padding: 12px 0 24px 0; margin-bottom: 16px; border-bottom: 1px solid #dee2e6; } .login__signIn__text { color: #868e96; } .login__signIn__link { font-weight: 500; color: #212529; text-decoration: underline; } .login__sns__btn { display: flex; width: 100%; justify-content: center; align-items: center; flex: 1; gap: 8px; height: 60px; border-radius: 4px; text-align: center; background-color: #f0f0f0; font-size: 18px; font-weight: 500; } .login__sns__btn.kakao { background-color: #FEE500; color: #343a40; } .login__sns__btn.naver { background-color: #00C73C; color: #ffffff; } .login__sns__btn .icon { margin-top: 2px; } .login__sns__btn + .login__sns__btn { margin-top: 12px; } .login__findResult { display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; padding: 20px; border-radius: 4px; text-align: center; font-size: 16px; margin-bottom: 16px; color: #212529; min-height: 140px; border: 1px solid #f1f3f5; } .login__findResult em { font-style: normal; font-weight: 500; color: #16191d; } .login__btnContainer-half { display: flex; gap: 8px; } .login__btnContainer-half .btn { flex-grow: 1; font-size: 18px; } .login__logoContainer { text-align: center; padding: 16px 0 28px; } .login__logoContainer img { display: inline-block; } .pwChange { padding: 40px 20px; border-radius: 10px; width: 100%; background-color: #ffffff; } .pwChange__wrapper { display: flex; justify-content: center; align-items: center; padding: 40px 20px 0; } .pwChange__tit { margin-inline: auto; margin-bottom: 40px; max-width: 440px; } .pwChange__img { width: 140px; margin-inline: auto; margin-bottom: 28px; } .pwChange__txt__top { text-align: center; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #1971c2; line-height: 1.2; } .pwChange__txt__title { text-align: center; font-size: 26px; font-weight: 700; margin-bottom: 24px; line-height: 1.2; color: #212529; } .pwChange__txt__text { font-size: 13px; font-weight: 400; color: #495057; line-height: 1.6; word-break: keep-all; } .pwChange__txt__text em { font-style: normal; font-weight: 500; color: #1c7ed6; } .pwChange__btn { max-width: 440px; margin-inline: auto; } .pwChange__btn .btn { line-height: 1; width: 100%; margin-bottom: 8px; } .pwChange__btn .btn em { font-style: normal; font-size: 12px; color: #868e96; } .signUpTerms { padding: 16px; background-color: #ffffff; } .signUpTerms__agreeText { font-size: 15px; font-weight: 500; padding-left: 14px; line-height: 1; padding-bottom: 16px; margin-bottom: 16px; color: #3a3a37; text-align: center; border-bottom: 1px solid #dee2e6; } .signUpTerms__all { margin-bottom: 28px; } .signUpTerms__all .b-checkbox-container { padding: 14px 12px; border-radius: 4px; background-color: #f8f9fa; border: 1px solid #f1f3f5; color: #0d0f12; font-weight: 700; } .signUpTerms__all .b-checkbox.checkbox { width: 100%; } .signUpTerms__all .b-checkbox.checkbox .control-label { padding-left: 10px; } .signUpTerms__all__description { margin-top: 6px; font-size: 12px; color: #7e8282; line-height: 18px; padding-left: 16px; } .signUpTerms__all__description .important { color: #666968; font-weight: 500; } .signUpTerms__all__description p { position: relative; padding-left: 10px; margin-bottom: 4px; } .signUpTerms__all__description p::before { position: absolute; content: "•"; font-size: 12px; left: 0; color: #ced4da; } .signUpTerms__gcone { border-radius: 4px; padding: 14px 18px; background-color: #fafafa; margin-bottom: 12px; } .signUpTerms__gcone__link { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #343a40; margin-bottom: 12px; } .signUpTerms__gcone__link p { display: inline; } .signUpTerms__gcone__link svg { display: inline-block; width: 14px; height: 14px; fill: #b1b6b9; margin-left: 3px; vertical-align: top; margin-top: 8px; } .signUpTerms__gcone__link em { font-style: normal; color: #3053bc; } .signUpTerms__gcone__text { font-size: 13px; color: #50514f; } .signUpTerms__misc { border: 1px solid #e9ecef; padding: 16px 12px; border-radius: 4px; margin-bottom: 28px; } .signUpTerms__misc__item { position: relative; margin-bottom: 12px; } .signUpTerms__misc__item .b-checkbox-container { color: #343a40; font-weight: 500; } .signUpTerms__misc__item .b-checkbox.checkbox .control-label { padding-left: 10px; } .signUpTerms__misc__item:last-of-type { margin-bottom: 0; } .signUpTerms__misc__item .b-checkbox.checkbox { align-items: flex-start; } .signUpTerms__misc__item--hasDetail { padding-right: 44px; } .signUpTerms__misc__detail { position: absolute; display: inline-block; right: 4px; padding-right: 10px; top: 1px; font-size: 13px; color: #666968; } .signUpTerms__misc__detail::after { position: absolute; content: ""; width: 6px; height: 6px; border-top: 1px solid #7e8282; border-right: 1px solid #7e8282; right: 4px; top: 50%; transform: rotate(45deg) translateY(calc(-50% - 1px)); } .signUpTerms__misc__marketing { padding: 4px 0 4px 32px; font-size: 12px; line-height: 16px; color: #7e8282; word-break: keep-all; } .signUpTerms__misc__marketing em { font-style: normal; color: #f03e3e; } .terms_wrap { margin: 0 auto; } .terms_box { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 20px; } .terms_box:last-child { border-bottom: none; margin-bottom: 0; } .terms_box h4 { color: #333; font-weight: 500; font-size: 16px; margin-bottom: 16px; } .terms_box p, .terms_box li, .terms_box dt, .terms_box dd { color: #666; font-size: 13px; } .terms_box p { margin-bottom: 10px; } .terms_box p.lg { font-size: 15px; margin-bottom: 12px; } .terms_box p em { font-style: normal; font-weight: 500; color: #404040; } .terms_box .listUp { margin-bottom: 10px; } .terms_box .listUp > li { margin-bottom: 8px; } .terms_box .listUp > li:last-child { margin-bottom: 0; } .terms_box .listUpSub { padding: 4px 10px; } .terms_box .listUpSub > li { margin-bottom: 2px; } .terms_box .listUpSub > li:last-child { margin-bottom: 0; } .terms_box .table-list { width: 100%; border-collapse: collapse; } .terms_box .table-list th, .terms_box .table-list td { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 14px; } .terms_box .table-list th { background-color: #f2f2f2; } .terms_box .terms-table { padding: 12px 0 20px; } .terms_box .terms-table .tit { font-size: 16px; font-weight: 700; margin-bottom: 10px; } .terms_box a { text-decoration: underline; } .signUp { background-color: #ffffff; padding: 16px; min-height: calc(100vh - 188px); min-height: calc(100svh - 188px); } .rejoinId { position: relative; color: #339af0; font-size: 12px; margin-left: 4px; margin-bottom: 2px; padding-right: 8px; text-decoration: underline; text-decoration-color: #63b2f3; } .rejoinId::after { position: absolute; content: ""; width: 6px; height: 6px; border-top: 1px solid #339af0; border-right: 1px solid #339af0; right: 2px; top: 50%; transform: rotate(45deg) translateY(calc(-50% - 1px)); } .rejoinSelect { border: 1px solid #dee2e6; padding: 18px 16px 26px; border-radius: 4px; } .rejoinSelect__title { text-align: center; font-size: 16px; font-weight: 500; color: #1c7ed6; margin-bottom: 24px; } .rejoinSelect__item { position: relative; display: flex; line-height: 1; } .rejoinSelect__item + .rejoinSelect__item { margin-top: 28px; } .rejoinSelect__item + .rejoinSelect__item::before { position: absolute; content: ""; width: 100%; height: 1px; background-color: #f1f3f5; top: -14px; left: 0; } .rejoinSelect__item__id { font-size: 17px; font-weight: 500; color: #0d0f12; margin-right: 5px; } .rejoinSelect__item__info { font-size: 12px; font-weight: 500; color: #666968; } .rejoinSelect__item__detail { color: #7e8282; font-size: 12px; margin-top: 10px; line-height: 16px; } .rejoinSelect__item__detail em { font-style: normal; color: #666968; } .rejoinSelect__item__dot { color: #50514f; } .rejoinSelect__item__line { margin: 0 5px; color: #b1b6b9; } .rejoinSelect__item .b-checkbox-container { margin-top: 1px; } .rejoinSelect__item__right { flex-grow: 1; cursor: pointer; } .signUp-promotion .sub-box { padding: 16px; background-color: #ffffff; } .signUp-promotion__introBox { text-align: center; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 12px 16px; border-radius: 4px; margin-bottom: 8px; } .signUp-promotion__introBox__title { color: #212529; font-size: 16px; font-weight: 700; word-break: keep-all; } .signUp-promotion__introBox__subTitle { color: #495057; font-size: 14px; } .signUp-promotion__introBox.second { margin-bottom: 24px; } .signUp-promotion__introBox.second .signUp-promotion__introBox__title { font-size: 14px; color: #343a40; } .signUp-promotion__introBox.second em { font-style: normal; color: #3053bc; } .signUp-promotion__introBoxWrapper { margin-bottom: 24px; } .signUp-promotion__col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .signUp-promotion__col-2 .btn { height: 64px; } .signUp-promotion__col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .signUp-promotion__col-3 .btn { height: 64px; } .signUp-promotion .login__sns { display: flex; gap: 6px; } .signUp-promotion .signUpLink .btn { width: 100%; margin-bottom: 8px; } .signUp-promotion .signUpLink .login__sns__btn { height: 52px; font-size: 16px; } .signUp-promotion .signUpLink .login__sns__btn + .login__sns__btn { margin-top: 0; } .signUp-promotion__col-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .signUp-promotion__section { margin-bottom: 40px; } .signUp-promotion__section__title { font-size: 16px; font-weight: 700; color: #343a40; margin-bottom: 20px; } .signUp-promotion__benefitBox { text-align: center; border-radius: 4px; border: 1px solid #e9ecef; padding: 20px 6px; line-height: 1.4; } .signUp-promotion__benefitBox svg { margin-inline: auto; margin-bottom: 20px; } .signUp-promotion__benefitBox__title { font-size: 13px; font-weight: 500; color: #212529; margin-bottom: 20px; word-break: keep-all; } .signUp-promotion__benefitBox__subTitle { font-size: 11px; font-weight: 300; color: #7e8282; word-break: keep-all; } .signUp-promotion__gcone { display: flex; align-items: center; justify-content: center; min-height: 234px; overflow: hidden; border-radius: 4px; margin-bottom: 40px; background-color: #f8f9fa; padding: 24px 20px 32px; } .signUp-promotion__gcone__inner { text-align: center; } .signUp-promotion__gcone__img { display: inline-block; width: 107px; margin-bottom: 24px; } .signUp-promotion__gcone__text { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; color: #343a40; margin-bottom: 20px; line-height: 1.4; } .signUp-promotion__gcone__text em { font-style: normal; color: #3053bc; font-size: 20px; font-weight: 700; margin-right: 2px; } .signUp-promotion__gcone__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #ffffff; background-color: #343a40; height: 44px; font-size: 16px; font-weight: 500; border-radius: 100px; min-width: 180px; } .signUp-promotion__gcone__button:hover { background-color: #2d3238; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .signUp-promotion__brandBox { text-align: center; border-radius: 4px; border: 1px solid #e9ecef; padding: 24px 8px; min-height: 168px; } .signUp-promotion__brandBox img { margin-inline: auto; margin-bottom: 20px; } .signUp-promotion__brandBox__subTitle { font-size: 13px; color: #7e8282; word-break: keep-all; margin-bottom: 2px; min-height: 39px; } .signUp-promotion__brandBox__title { font-size: 16px; font-weight: 500; color: #343a40; } .signUpComplete { max-width: 860px; margin-inline: auto; } .signUpComplete__inner { margin-bottom: 40px; } .signUpComplete__inner img { margin-inline: auto; margin-bottom: 16px; width: 280px; -o-object-fit: cover; object-fit: cover; } .signUpComplete__box { padding: 12px; border-radius: 4px; margin-bottom: 20px; text-align: center; } .signUpComplete__box__title { font-size: 24px; color: #0d0f12; font-weight: 700; margin-bottom: 16px; } .signUpComplete__box__text { color: #16191d; font-size: 13px; } .emailInput { position: relative; } .emailInput__btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: #7e8282; padding-right: 12px; height: 100%; } .emailInput__btn::after { position: absolute; content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #7e8282; top: 50%; right: 0; transform: translateY(calc(-50% + 1px)); } .emailInput .input-text { padding-right: 100px; } .cartOrder { padding-bottom: 100px; } .cartOrder .sub-box { padding: 16px; } .cartOrder__control { width: 100%; display: flex; justify-content: space-between; align-items: center; } .cartOrder__control .b-checkbox { padding: 6px 0; font-weight: 500; font-size: 16px; color: #212529; } .cartOrder__control__btnContainer { display: flex; align-items: center; gap: 4px; } .cartOrder__control__btnContainer .btn { height: 32px; font-size: 13px; padding: 0 12px; } .cartOrder__controlWrapper { position: relative; padding: 8px 16px; background-color: #ffffff; margin-bottom: 10px; } .cartOrder__message { display: flex; align-items: center; width: 100%; margin-bottom: 10px; } .cartItem { position: relative; display: flex; align-items: flex-start; margin-bottom: 8px; } .cartItem .b-checkbox.checkbox { font-size: 16px; margin-right: 2px; padding: 8px 0 8px 8px; margin-left: -8px; margin-top: -8px; } .cartItem__image { flex-shrink: 0; width: 80px; height: 80px; border-radius: 4px; overflow: hidden; } .cartItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cartItem__productInfo { margin-left: 8px; text-align: left; flex-grow: 1; } .cartItem__productTitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; margin-bottom: 8px; margin-right: 24px; } .cartItem__productOption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #50514f; margin-bottom: 8px; } .cartItem__productOption .option-badge { display: inline-block; padding: 0 5px; border-radius: 2px; font-size: 11px; background-color: #7e8282; color: #ffffff; } .cartItem__productPrice { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 16px; line-height: 20px; color: #16191d; letter-spacing: -0.03em; } .cartItem__productPrice > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; font-weight: 500; color: #343a40; } .cartItem__productDot { font-size: 12px; font-weight: 400; color: #495057; margin: 0 4px; } .cartItem__productQuantity { font-size: 13px; color: #212529; font-weight: 400; line-height: 20px; letter-spacing: -0.03em; } .cartItem__productBottom { display: flex; align-items: center; } .cartItem__delete { top: -4px; right: -8px; position: absolute; width: 32px; height: 32px; } .cartItem__delete:before, .cartItem__delete:after { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background-color: #7e8282; content: ""; } .cartItem__delete::before { transform: translate(-50%, -50%) rotate(45deg); } .cartItem__delete::after { transform: translate(-50%, -50%) rotate(-45deg); } .cartItem__miscControls { display: flex; align-items: center; justify-content: space-between; padding-left: 24px; margin-bottom: 20px; } .cartItem__miscControls:last-child { margin-bottom: 0; } .cartItem__giftSelect { display: flex; justify-content: space-between; gap: 16px; padding: 16px 12px; border-radius: 5px; background-color: #f9f9f9; } .cartItem__giftSelectName { font-size: 13px; color: #212529; font-weight: 500; } .product-count { background-color: #f9f9f9; padding: 12px 20px; margin-bottom: 8px; border-radius: 4px; } .product-count__amount-top { position: relative; margin-bottom: 20px; padding-right: 24px; } .product-count__amount-title { font-size: 16px; font-weight: 500; color: #16191d; word-break: keep-all; } .product-count__amount-delete { position: absolute; width: 16px; height: 16px; background-image: url(" ../images/icon_modal-close.png"); opacity: 0.75; background-repeat: no-repeat; background-size: cover; top: 4px; right: 2px; } .product-count__amount-bottom { display: flex; justify-content: space-between; } .product-count__amount-counter { display: flex; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #e9ecef; min-width: 92px; height: 32px; border-radius: 100px; padding: 0 8px; } .product-count__amount-counter > * + * { margin-left: 4px; } .product-count__amount-number { font-weight: 500; text-align: center; min-width: 20px; } .product-count__amount-btn { width: 24px; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; } .product-count__amount-btn.plus { background-image: url('data:image/svg+xml;utf-8,'); } .product-count__amount-btn.minus { background-image: url('data:image/svg+xml;utf-8,'); } .product-count__amount-price-box > * + * { margin-left: 4px; } .product-count__amount-monthly-price { font-size: 12px; color: #495057; } .product-count__amount-price { font-size: 18px; font-weight: 700; color: #030507; letter-spacing: -0.03em; } .cartOrderBox__title { font-size: 22px; font-weight: 700; margin-bottom: 32px; } .cartOrderBox__list { margin-bottom: 12px; padding: 12px 0; border-bottom: 1px solid #dee2e6; border-top: 1px dashed #dee2e6; } .cartOrderBox__list > li { display: flex; } .cartOrderBox__list > li.cartOrderBox__miscItem { background-color: #f8f9fa; margin-bottom: 0; padding: 4px 8px; } .cartOrderBox__list > li.cartOrderBox__miscItem.first { padding-top: 12px; border-radius: 6px 6px 0 0; } .cartOrderBox__list > li.cartOrderBox__miscItem.last { padding-bottom: 12px; border-radius: 0 0 6px 6px; } .cartOrderBox__list > li + li { margin-top: 12px; } .cartOrderBox__list--final { border-top: 1px solid #495057; border-bottom: 1px solid #495057; } .cartOrderBox__list__subList .cartOrderBox__th { position: relative; padding-left: 18px; } .cartOrderBox__list__subList .cartOrderBox__th::before { content: ""; position: absolute; display: inline-block; width: 8px; height: 8px; border-left: 2px solid #ced4da; border-bottom: 2px solid #ced4da; top: 3px; left: 3px; } .cartOrderBox__list__subList .cartOrderBox__td { color: #666968; font-weight: 500; } .cartOrderBox__list__subList .cartOrderBox__td > .priceUnit { color: #666968; } .cartOrderBox__discountMinus { position: relative; font-size: 14px; margin-right: 4px; top: -1px; font-weight: 400; color: #495057; } .cartOrderBox__th { margin-right: auto; font-size: 13px; color: #212529; display: inline-flex; align-items: center; } .cartOrderBox__th .infoBtn { margin-left: 4px; } .cartOrderBox__td { font-size: 15px; font-weight: 700; color: #212529; letter-spacing: -0.03em; } .cartOrderBox__td > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; color: #343a40; font-weight: 500; } .cartOrderBox__total { display: flex; align-items: center; } .cartOrderBox__total--final .cartOrderBox__totalTh { font-size: 16px; font-weight: 700; } .cartOrderBox__total--final .cartOrderBox__totalTd { font-size: 22px; } .cartOrderBox__total--final .cartOrderBox__totalTd > .priceUnit { font-size: 18px; } .cartOrderBox__totalTh { font-size: 14px; font-weight: 500; color: #16191d; margin-right: auto; } .cartOrderBox__totalTd { font-size: 18px; font-weight: 700; color: #0d0f12; letter-spacing: -0.034em; } .cartOrderBox__totalTd > .priceUnit { position: relative; font-size: 16px; margin-left: 2px; top: -1px; font-weight: 500; } .cartOrderBox__finalTitle { font-size: 20px; font-weight: 700; color: #030507; margin-bottom: 12px; } .orderInfo { padding-bottom: 40px; } .orderInfo__item { position: relative; padding: 16px; } .orderInfo__item .cartItem { margin-bottom: 12px; } .orderInfo__item__couponSelect { display: flex; width: 100%; margin-bottom: 10px; } .orderInfo__item__couponSelect .nice-select { width: 100%; } .orderInfo__item::before { position: absolute; content: ""; display: block; width: calc(100% - 32px); height: 1px; background-color: #e9ecef; top: 0; left: 16px; } .orderInfo__item:first-child::before { display: none; } .orderInfo__item--multiple .cartItem { margin-left: 6px; } .orderInfo__item--multiple .cartItem__miscControls { padding-left: 0; } .orderInfo__table:last-child { margin-bottom: 0; } .orderInfo__table > .table { border-top: none; box-shadow: none; } .orderInfo__table > .table tr { border-bottom: none; } .orderInfo__table > .table th { background-color: transparent; height: 56px; padding: 20px 8px 4px 2px; vertical-align: top; color: #0d0f12; font-weight: 400; line-height: 1.2; } .orderInfo__table > .table td { background-color: transparent; height: 34px; padding: 4px 8px 4px 2px; vertical-align: middle; color: #0d0f12; line-height: 1.2; } .orderInfo__table > .table .input-text { font-size: 16px; padding-left: 8px; height: 52px; width: 100%; max-width: none; } .orderInfo__table > .table .inputWithBtn .btn { flex-shrink: 0; height: 52px; } .orderInfo__table > .table .inputHalf { max-width: 320px; } .orderInfo__table > .table .inputHalf .nice-select { height: 52px; line-height: 50px; font-size: 16px; } .orderInfo__table > .table .inputAddress .input-text { max-width: 420px; } .orderInfo__table > .table .inputAddress__postalCode { max-width: 320px; } .orderInfo__table > .table .inputAddress__postalCode .input-text { margin-bottom: 0; } .orderInfo__table > .table .inputAddress__postalCode .btn { height: 48px; flex-shrink: 0; } .orderInfo__table > .table .textarea { max-width: 720px; } .orderInfo__table > .table .nice-select { height: 52px; line-height: 50px; } .orderInfo__table__address { font-size: 13px; } .orderInfo__table__productPrice { font-size: 16px; font-weight: 500; color: #0d0f12; } .orderInfo__table__discountSub th { color: #7e8282 !important; } .orderInfo__table__discountSub th span { display: inline-block; position: relative; padding-left: 16px; } .orderInfo__table__discountSub th span::before { content: ""; position: absolute; display: inline-block; width: 8px; height: 8px; border-left: 2px solid #ced4da; border-bottom: 2px solid #ced4da; top: 3px; left: 3px; } .orderInfo__table__discountSub td { color: #7e8282 !important; } .orderInfo__table--price th, .orderInfo__table--price td { font-size: 15px; } .orderInfo__table__sum { border-top: 1px solid #e9ecef; } .orderInfo__table__sum th, .orderInfo__table__sum td { font-size: 18px; font-weight: 700 !important; color: #0d0f12; padding-top: 20px !important; padding-bottom: 12px !important; } .orderInfo__table__misc { font-size: 12px; color: #666968; } .orderInfo__table__cashCancel { margin-top: 8px; } .orderInfo__mileage { display: flex; align-items: center; } .orderInfo__mileage .inputWithBtn { margin-bottom: 8px; } .orderInfo__mileage .input-text { background-color: #f5f5f5; text-align: right; } .orderInfo__mileageText { font-size: 14px; color: #0d0f12; } .orderInfo__mileageText em { font-style: normal; font-weight: 700; } .orderInfo__btnContainer { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-bottom: 10px; } .orderInfo__orderInfoTop { margin-bottom: 20px; } .orderInfo__orderInfoTop .textInfo { text-align: center; } .deliveryInfo { position: relative; } .deliveryInfo__info { margin-bottom: 12px; margin-top: 4px; } .deliveryInfo__info__name { font-size: 15px; font-weight: 500; color: #16191d; } .deliveryInfo__info__phone { position: relative; font-size: 15px; font-weight: 500; color: #16191d; padding-left: 16px; } .deliveryInfo__info__phone::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #ced4da; top: 50%; left: 8px; transform: translateY(calc(-50% + 1px)); } .deliveryInfo__address { margin-bottom: 10px; font-size: 14px; font-weight: 400; color: #495057; } .deliveryInfo__cstmclerCd { margin-bottom: 10px; font-size: 14px; font-weight: 400; color: #495057; } .deliveryInfo__message { display: flex; width: 100%; } .deliveryInfo__message .nice-select { width: 100%; } .deliveryInfo__changeBtn { position: absolute; top: -4px; right: 0; } .deliveryInfo--multiple { padding: 12px; background-color: #f8f9fa; border: 1px solid #eaeced; border-radius: 5px; } .deliveryInfo--multiple .deliveryInfo__changeBtn { top: 12px; right: 12px; } .addressManagePop { padding-bottom: 100px; background-color: inherit; } .addressManagePop .sub-box { padding: 16px; } .cashReceipt-borderTop { border-top: 1px solid #d7dadc; } .cashReceipt-borderBottom { border-bottom: 1px solid #d7dadc; } .cashReceipt-borderTopBottom { border-top: 1px solid #d7dadc; border-bottom: 1px solid #d7dadc; } .cashReceipt-container { padding: 16px 0; } .easyPayCashReceipt { background-color: #f8f9fa; padding: 12px; border-radius: 5px; border: 1px solid #eaeced; } .easyPayCashReceipt .custom-radio-container { margin-bottom: 12px; } .gcpayEvent { background-color: #f0f8ff; border-radius: 6px; padding: 24px 12px; margin-bottom: 10px; } .gcpayEvent__icon { margin-inline: auto; width: 100px; -o-object-fit: cover; object-fit: cover; } .gcpayEvent__title { font-size: 16px; font-weight: 700; color: #1c7ed6; text-align: center; margin-bottom: 8px; word-break: keep-all; } .gcpayEvent__title .misc { font-size: 14px; color: #1c7ed6; font-weight: 400; } .gcpayEvent__content { font-size: 13px; color: #343a40; font-weight: 500; text-align: center; } .order-method { padding: 12px 0; border-top: 1px solid #495057; } .order-method .custom-radio label { width: 100%; } .order-method > .custom-radio { padding: 24px 0; border-top: 1px solid #e3e3e3; } .order-method > .custom-radio:first-child { border-top: none; } .order-method .b-checkbox { width: 100%; } .order-method-normal { padding-top: 12px; } .order-method-normal__btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: #7e8282; height: 84px; border: 1px solid #dee2e6; border-radius: 5px; font-weight: 500; padding: 0 4px; text-align: center; word-break: keep-all; line-height: 16px; } .order-method-normal__btn.active { color: #ffffff; border-color: transparent; background-color: #707070; } .order-method-normal__btn.active .order-method-normal__icon { background-position: 32px 0; } .order-method-normal__btn.active .order-method-normal__icon--payco { background-position: 60px 0; } .order-method-normal__btn.active .order-method-normal__icon--toss { background-position: 66px 0; } .order-method-normal__btn-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 32px; } .order-method-normal__content-inner { background-color: #f8f9fa; padding: 12px; border-radius: 5px; border: 1px solid #eaeced; margin-bottom: 10px; } .order-method-normal__nextTimeCheck { margin-bottom: 12px; } .order-method-normal__icon { width: 32px; height: 32px; background-size: cover; } .order-method-normal__icon--card { background-image: url("../images/icon_payment-card.png"); } .order-method-normal__icon--transfer { background-image: url("../images/icon_payment-transfer.png"); } .order-method-normal__icon--deposit { background-image: url("../images/icon_payment-deposit.png"); } .order-method-normal__icon--account { background-image: url("../images/icon_payment-account.png"); } .order-method-normal__icon--payco { width: 60px; height: 30px; background-image: url("../images/icon_payment-payco.png"); } .order-method-normal__icon--toss { width: 66px; height: 30px; background-image: url("../images/icon_payment-toss.png"); } .order-method-normal .table-transparent th .input-text, .order-method-normal .table-transparent td .input-text, .order-method-normal .table-innerAddress th .input-text, .order-method-normal .table-innerAddress td .input-text { height: 44px; } .order-method-normal .table-transparent th .nice-select, .order-method-normal .table-transparent td .nice-select, .order-method-normal .table-innerAddress th .nice-select, .order-method-normal .table-innerAddress td .nice-select { height: 44px; line-height: 42px; } .order-method-normal .table-transparent th, .order-method-normal .table-innerAddress th { padding: 8px 8px 8px 4px; word-break: keep-all; vertical-align: middle; color: #495057; line-height: 1.4; font-size: 13px; } .order-method-normal .table-transparent .custom-radio-container, .order-method-normal .table-innerAddress .custom-radio-container { padding: 12px 0; } .order-method__content { padding-bottom: 12px; } .order-method .icon_gcpay { margin-left: 2px; margin-right: 6px; } .table-transparent, .table-innerAddress { width: 100%; } .table-transparent th, .table-transparent td, .table-innerAddress th, .table-innerAddress td { vertical-align: text-top; padding: 8px 4px; } .table-transparent th, .table-innerAddress th { font-size: 15px; font-weight: 500; color: #343a40; } .table-transparent .find-address-btn, .table-innerAddress .find-address-btn { background-color: #495057; color: #ffffff; padding: 6px 10px; border-radius: 4px; height: 42px; font-size: 13px; font-weight: 500; margin-left: 4px; } .table-transparent .find-address-btn:hover, .table-innerAddress .find-address-btn:hover { background-color: #343a40; } .table-transparent .td-inner, .table-innerAddress .td-inner { display: flex; align-items: center; flex-wrap: wrap; -moz-column-gap: 5px; column-gap: 5px; row-gap: 8px; } .table-transparent .td-inner.vertical, .table-innerAddress .td-inner.vertical { flex-direction: column; align-items: flex-start; } .table-transparent .nice-select, .table-innerAddress .nice-select { min-width: 100px; height: 36px; line-height: 34px; border: 1px solid #dee2e6; border-radius: 4px; padding-left: 12px; } .table-transparent .nice-select:after, .table-innerAddress .nice-select:after { width: 6px; height: 6px; margin-top: -3.5px; } .table-transparent .nice-select.md, .table-innerAddress .nice-select.md { min-width: 200px; max-width: 320px; } .table-transparent .orderInfo__deliveryRequest, .table-innerAddress .orderInfo__deliveryRequest { width: 100%; } .table-transparent .orderInfo__deliveryRequest .select-box .nice-select, .table-innerAddress .orderInfo__deliveryRequest .select-box .nice-select { height: 42px; line-height: 40px; width: 100%; max-width: 420px; } .gcpayNoInterest__table.table { border-top: none; } .gcpayNoInterest__table.table th, .gcpayNoInterest__table.table td { height: 40px; font-size: 13px; } .gcpayNoInterest__table.table th { background-color: #ffffff; padding: 8px 16px; } .gcpayNoInterest__table.table td { padding: 8px 10px; } .gcpayNoInterest .infoBox { padding: 16px 14px; } .gcpayNoInterest .infoBox__list li { font-size: 13px; } .multiDeliverySelect { padding: 16px; } .multiDeliverySelect__title { font-size: 14px; font-weight: 500; color: #16191d; margin-bottom: 10px; } .multiDeliverySelect__list { border: 1px solid #dee2e6; border-radius: 5px; margin-bottom: 10px; } .multiDeliverySelect__list .b-checkbox { align-items: flex-start; margin-top: 0 !important; padding: 14px 8px; font-size: 14px; } .multiDeliverySelect__list .b-checkbox + .b-checkbox { border-top: 1px solid #dee2e6; } .multiDeliverySelect__name { font-weight: 500; color: #16191d; margin-right: 2px; } .multiDeliverySelect__address { font-size: 13px; color: #495057; } .multiDeliverySelect__btnContainer { display: flex; align-items: center; gap: 5px; } .multiDeliverySelect__btnContainer .btn { flex: 1; height: 48px; } .order-payment__deliveryCycle { border: 1px solid #e0e0e0; padding: 12px; margin-bottom: 12px; border-radius: 6px; } .order-payment__deliveryCycle-description { font-weight: 500; color: #3a3a37; font-size: 15px; margin-bottom: 16px; } .order-payment__deliveryCycle .custom-radio-container { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; -moz-column-gap: 16px !important; column-gap: 16px !important; row-gap: 16px !important; } .nonMemberTerms { margin-bottom: 10px; } .nonMemberTerms__item { position: relative; margin-bottom: 12px; } .nonMemberTerms__item .b-checkbox-container { color: #343a40; font-weight: 500; } .nonMemberTerms__item .b-checkbox.checkbox .control-label { padding-left: 6px; } .nonMemberTerms__item .b-checkbox { width: 100%; } .nonMemberTerms__item:last-of-type { margin-bottom: 0; } .nonMemberTerms__item--checkAll { position: relative; margin-bottom: 20px; padding: 6px 0; } .nonMemberTerms__item--checkAll .b-checkbox-container { color: #16191d; font-weight: 700; } .nonMemberTerms__item--checkAll::after { content: ""; position: absolute; display: inline-block; width: 100%; height: 1px; border-top: 1px solid #dee2e6; left: 0; bottom: -4px; } .nonMemberTerms__detail { position: absolute; display: inline-block; right: 6px; padding-right: 10px; top: 0; font-size: 13px; color: #666968; } .nonMemberTerms__detail::after { position: absolute; content: ""; width: 6px; height: 6px; border-top: 1px solid #7e8282; border-right: 1px solid #7e8282; right: 4px; top: 50%; transform: rotate(45deg) translateY(calc(-50% - 1px)); } .nonMemberTerms__marketing { padding: 4px 0 4px 32px; font-size: 12px; line-height: 16px; color: #7e8282; word-break: keep-all; } .nonMemberTerms__marketing em { font-style: normal; color: #f03e3e; } .orderCompletedTop { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px 12px; } .orderCompletedTop svg { margin-bottom: 12px; } .orderCompletedTop__title { font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #16191d; } .orderCompletedTop__subTitle { font-size: 16px; font-weight: 400; color: #343a40; text-align: center; margin-bottom: 20px; } .orderCompletedTop__subTitle em { font-style: normal; font-weight: 500; color: #16191d; } .orderCompletedTop__orderNumBox { display: flex; align-items: center; gap: 6px; background-color: #f8fafb; padding: 10px 14px; border-radius: 5px; } .orderCompletedTop__orderNumBox__title { font-size: 14px; font-weight: 500; color: #121210; } .orderCompletedTop__orderNumBox__num { font-size: 14px; font-weight: 400; color: #50514f; } .orderFailed .sub-box { padding: 16px; text-align: center; } .orderFailed__inner { padding: 100px 0; } .orderFailed img { display: inline-block; margin-bottom: 20px; width: 68px; } .orderFailed__title { font-size: 24px; font-weight: 700; color: #495057; margin-bottom: 32px; } .orderFailed__title em { font-style: normal; } .orderFailed__text { font-size: 14px; font-weight: 400; color: #7e8282; margin-bottom: 32px; } .orderFailed__text em { font-style: normal; font-weight: 500; } .orderFailed__reason { display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; max-width: 520px; min-height: 68px; margin-inline: auto; font-size: 14px; font-weight: 400; color: #495057; border-radius: 4px; } .gcpayGuide { background: #3053bc; padding-top: 40px; padding-bottom: 30px; } .gcpayGuide .swiper-slide { width: 100% !important; } .gcpayGuide .swiper-pagination { position: static; margin-top: 15px; } .gcpayGuide .swiper-pagination-bullet { background-color: #6f87d0; opacity: 1; margin: 0 4px !important; } .gcpayGuide .swiper-pagination-bullet-active { background-color: #ffffff; } .gcpayGuide__wrap .infoBox { background-color: #ffffff; } .gcpayGuide__wrap .infoBox__list li { font-size: 12px; } .subList__banner { margin-bottom: 10px; border-radius: 4px; overflow: hidden; } .subList__productList { padding: 58px 0 40px; } .subList__productList .listTop { margin-bottom: 10px; } .subList__productList--searchResult { padding: 8px 0 40px; } .subList__productList--searchResult .searchPage__header { border-bottom: 0; } .subList__productList--searchResult .noResult { min-height: 44vh; padding-top: 14vh; } .subList__sort .select-box .nice-select { border: 0; font-size: 14px; } .subList__sort .select-box .nice-select .list { left: auto; right: -4px; } .productDetailImages .swiper-slide img { -o-object-fit: cover; object-fit: cover; max-height: 720px; width: 100%; height: 100%; } .productDetailImages .time-sale__top { z-index: 2; height: clamp(32px, 12%, 42px); } .productDetailImages .time-sale__top .time { font-size: 16px; } .productDetailImages .time-sale__top .left { font-size: 15px; } .productDetailInfo { padding: 16px; } .productDetailInfo .product-unit-rating { font-size: 15px; margin-top: 0; margin-bottom: 16px; } .productDetailInfo__titleWrap { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; } .productDetailInfo__title { display: block; font-size: 18px; line-height: 40px; font-weight: 700; color: #16191d; margin-right: auto; } .productDetailInfo__subTitle { display: block; width: 100%; line-height: 20px; margin-top: 10px; margin-bottom: -4px; font-size: 14px; color: #7e8282; } .productDetailInfo__subTitle ~ .productDetailInfo__miscControls { top: 24px; } .productDetailInfo__miscControls { display: inline-flex; flex-shrink: 0; align-items: center; padding-top: 4px; } .productDetailInfo__miscControls__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; } .productDetailInfo__price { display: flex; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; gap: 8px; } .productDetailInfo__price__sale { display: flex; flex-direction: column; color: #e34747; text-align: center; letter-spacing: -0.03em; margin-right: 10px; line-height: 1.2; } .productDetailInfo__price__sale > .percent { font-weight: 700; font-size: 24px; } .productDetailInfo__price__sale .priceUnit { position: relative; font-size: 18px; margin-left: 2px; top: -2px; } .productDetailInfo__price__price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .productDetailInfo__price__original { font-size: 18px; text-decoration: line-through; color: #adb5bd; letter-spacing: -0.03em; line-height: 1.2; } .productDetailInfo__price__current { font-size: 24px; font-weight: 700; color: #16191d; letter-spacing: -0.03em; line-height: 1.2; } .productDetailInfo__price__current .priceUnit { position: relative; font-size: 18px; font-weight: 500; margin-left: 1px; top: -2px; } .productDetailInfo__price .product-badge-container { margin-left: auto; } .productDetailInfo__info { padding: 0 0 8px 0; margin-bottom: 16px; } .productDetailInfo__info > dl { display: flex; align-items: flex-start; padding: 12px 0 12px 4px; border-top: 1px solid #f0f0f0; } .productDetailInfo__info > dl:last-of-type { border-bottom: 1px solid #f0f0f0; } .productDetailInfo__info > dl > dt { flex-shrink: 0; font-size: 13px; color: #666968; margin-right: 8px; font-weight: 400; width: 80px; } .productDetailInfo__info > dl > dd { font-size: 13px; color: #16191d; } .productDetailInfo__info > dl > dd > em { font-style: normal; font-weight: 700; font-size: 15px; } .productDetailInfo__info > dl > dd .misc { font-size: 12px; color: #7e8282; font-weight: 300; } .productDetailInfo__info > dl > dd .infoBtn { margin-top: -4px; margin-left: 2px; padding: 4px; } .productDetailInfo__option { margin-bottom: 16px; } .productDetailInfo__option__title { display: block; font-size: 18px; font-weight: 500; margin-bottom: 8px; padding-left: 8px; } .productDetailInfo__option__box { border: 1px solid #e9ecef; border-radius: 4px; padding: 8px 0; } .productDetailInfo__option__description { font-size: 16px; font-weight: 500; margin-bottom: 4px; } .productDetailInfo__option__item { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; min-height: 56px; cursor: pointer; } .productDetailInfo__option__item .control-label { line-height: 1.4; } .productDetailInfo__option__right { display: flex; flex-shrink: 0; text-align: center; align-items: flex-end; justify-content: center; flex-direction: column; line-height: 1.3; margin-left: 12px; } .productDetailInfo__option__price { font-size: 18px; font-weight: 700; color: #030507; letter-spacing: -0.03em; } .productDetailInfo__option__monthly-payment { font-size: 12px; color: #495057; } .productDetailInfo__option__gift { font-size: 12px; color: #e03131; } .productDetailInfo__additionalSelect { margin-bottom: 16px; } .productDetailInfo__additionalSelect__title { display: block; font-size: 18px; font-weight: 500; margin-bottom: 8px; padding-left: 8px; } .productDetailInfo__additionalSelect__inner { padding: 16px; border: 1px solid #e9ecef; border-radius: 5px; } .productDetailInfo__additionalSelect__item { display: flex; align-items: center; } .productDetailInfo__additionalSelect__item + .productDetailInfo__additionalSelect__item { margin-top: 8px; } .productDetailInfo__additionalSelect__category { font-size: 14px; margin-right: 8px; font-weight: 400; width: 120px; flex-shrink: 0; } .productDetailInfo__additionalSelect .select-box, .productDetailInfo__additionalSelect .nice-select { width: 100%; } .productDetailInfo__additionalSelect .select-box .nice-select { height: 48px; line-height: 46px; } .productDetailInfo__confirmOption { text-align: center; margin-bottom: 16px; } .productDetailInfo__count { background-color: #f9f9f9; padding: 20px 20px; border-radius: 4px; } .productDetailInfo__count + .productDetailInfo__count { margin-top: 8px; } .productDetailInfo__count__amountTop { position: relative; margin-bottom: 20px; padding-right: 24px; } .productDetailInfo__count__amountTitle { font-size: 16px; font-weight: 500; color: #16191d; word-break: keep-all; } .productDetailInfo__count__amountDelete { position: absolute; width: 16px; height: 16px; background-image: url(" ../images/icon_modal-close.png"); opacity: 0.75; background-repeat: no-repeat; background-size: cover; top: 4px; right: 2px; } .productDetailInfo__count__amountBottom { display: flex; justify-content: space-between; } .productDetailInfo__count__amountCounter { display: flex; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #e9ecef; min-width: 92px; height: 32px; border-radius: 100px; padding: 0 8px; } .productDetailInfo__count__amountCounter > * + * { margin-left: 4px; } .productDetailInfo__count__amountCounter + .btn { margin-top: 4px; } .productDetailInfo__count__amountNumber { font-weight: 500; text-align: center; min-width: 20px; } .productDetailInfo__count__amountBtn { width: 24px; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; } .productDetailInfo__count__amountBtn.plus { background-image: url('data:image/svg+xml;utf-8,'); } .productDetailInfo__count__amountBtn.minus { background-image: url('data:image/svg+xml;utf-8,'); } .productDetailInfo__count__amountPriceBox > * + * { margin-left: 4px; } .productDetailInfo__count__amountMonthlyPrice { font-size: 12px; color: #495057; } .productDetailInfo__count__amountPrice { font-size: 18px; font-weight: 700; color: #030507; letter-spacing: -0.03em; } .productDetailInfo__orderBtnContainer { display: flex; gap: 8px; } .productDetailInfo__orderBtnContainer > .btn { flex: 1; height: 64px; font-size: 18px; } .productDetailInfo__orderBtnContainer .gift-btn { width: 64px; height: 64px; gap: 4px; } .productDetailInfo__reservedDelivery { background-color: rgb(255, 246, 242); padding: 12px 0 12px 16px; border-radius: 5px; margin-bottom: 20px; } .productDetailInfo__reservedDelivery dl { display: flex; align-items: flex-start; } .productDetailInfo__reservedDelivery dl dt { font-size: 16px; color: rgb(255, 83, 0); margin-right: 8px; font-weight: 500; width: 80px; } .productDetailInfo__reservedDelivery__info { font-size: 16px; color: #16191d; font-weight: 700; margin-bottom: 6px; } .productDetailInfo__reservedDelivery__info .misc { font-size: 13px; color: #666968; font-weight: 400; } .productDetailInfo__reservedDelivery__num { font-size: 14px; color: #16191d; font-weight: 400; } .productDetailInfo__reservedDelivery__num em { font-style: normal; font-weight: 700; font-size: 16px; color: rgb(255, 83, 0); } .productDetailInfo__nonMember { display: flex; align-items: center; justify-content: center; padding: 20px 0; border: 1px solid #ebedef; background-color: #f8fafb; border-radius: 5px; margin-bottom: 20px; font-size: 16px; } .productDetailInfo__nonMember p { color: #16191d; font-weight: 500; } .productDetailInfo__nonMember p em { font-style: normal; font-weight: 700; color: #f03e3e; } .productDetailInfo__memberBenefits { margin-bottom: 20px; } .productDetailInfo__memberBenefits__title { font-size: 16px; font-weight: 400; margin-bottom: 8px; color: #0d0f12; padding-left: 8px; } .productDetailInfo__memberBenefits__title em { font-style: normal; font-weight: 700; color: #0d0f12; } .productDetailInfo__memberBenefits__inner { padding: 16px; border: 1px solid #e9ecef; border-radius: 5px; } .productDetailInfo__memberBenefits dl { display: flex; align-items: flex-start; margin-bottom: 20px; } .productDetailInfo__memberBenefits dl:last-of-type { margin-bottom: 0; } .productDetailInfo__memberBenefits dl > dt { font-size: 13px; color: #666968; margin-right: 8px; font-weight: 400; width: 80px; } .productDetailInfo__memberBenefits dl > dd { font-size: 13px; color: #16191d; } .productDetailInfo__memberBenefits__couponTitle { font-weight: 500; } .productDetailInfo__relatedProduct { padding: 20px 0; } .productDetailInfo__relatedProduct__title { display: block; font-size: 18px; font-weight: 500; margin-bottom: 8px; padding-left: 8px; } .productDetailInfo__relatedProduct__inner { padding: 16px; border: 1px solid #e9ecef; border-radius: 5px; } .productDetailInfo__relatedProduct__btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .productDetailInfo__relatedProduct .product-unit { position: relative; display: flex; align-items: flex-start; } .productDetailInfo__relatedProduct .product-unit + .product-unit { margin-top: 32px; } .productDetailInfo__relatedProduct .product-unit + .product-unit::before { position: absolute; content: ""; display: block; width: 100%; height: 1px; background-color: #f1f3f5; top: -16px; left: 0; } .productDetailInfo__relatedProduct .product-unit-info { margin-top: 0; } .productDetailInfo__relatedProduct .product-unit-image { width: 92px; height: 92px; margin-right: 12px; flex-shrink: 0; } .productDetailInfo__relatedProduct .product-unit-image:hover img { transform: none; } .productDetailInfo__relatedProduct .product-unit-title { padding-right: 100px; } .productDetailInfo__relatedProduct .product-unit-title > a { font-size: 14px; } .productDetailInfo__relatedProduct .product-unit-price { margin-top: 4px; } .productDetailInfo__relatedProduct .product-unit-price__original { font-size: 12px; } .productDetailInfo__relatedProduct .product-unit-price__current { font-size: 16px; } .productDetailInfo__relatedProduct .product-unit-price__sale > .percent { font-size: 15px; } .productDetailInfo__relatedProduct .product-unit-rating { font-size: 14px; margin-top: 6px; } .productCoupon { display: flex; width: 100%; min-height: 60px; margin-bottom: 20px; position: relative; } .productCoupon__left { flex-grow: 1; display: flex; align-items: center; padding: clamp(12px, 3%, 18px); border-radius: 8px; border: 1px solid #dee2e6; border-right: 1px dashed #dee2e6; } .productCoupon__right { max-width: 136px; flex-shrink: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px 24px; gap: 6px; border-radius: 8px; background-color: #868e96; border-left: 0; } .productCoupon__download { color: #ffffff; font-size: 14px; font-weight: 400; } .productCoupon__title { font-size: 16px; font-weight: 500; color: #f03e3e; margin-right: 8px; width: 120px; } .productCoupon__price { font-size: 26px; font-weight: 700; color: #f03e3e; } .productCoupon__price .priceUnit { position: relative; font-size: 19px; margin-left: 2px; top: -2px; } .productCoupon::after { content: ""; position: absolute; display: block; width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; right: -10px; top: 50%; transform: translateY(-50%); } .productCoupon .productDetailInfo__price__bottom { display: flex; align-items: center; flex-wrap: wrap; -moz-column-gap: 6px; column-gap: 6px; row-gap: 0; } .productCoupon .productDetailInfo__price__price { flex-direction: column; align-items: flex-start; gap: 2px; } .productCoupon .productDetailInfo__price__original { font-size: 13px; line-height: 13px; } .productCoupon .productDetailInfo__price__current { line-height: 24px; color: #979b9d; font-size: 18px; } .productCoupon .productDetailInfo__price__current.coupon { color: #16191d; } .productCoupon .productDetailInfo__price__current .priceUnit { font-size: 14px; top: -1px; } .productCoupon .productDetailInfo__price__price > * + * { margin-left: 0; } .productCoupon__text { font-size: 12px; color: #666968; font-weight: 500; } .microModal .deliveryFeeInfo { padding-top: 20px; } .microModal .deliveryFeeInfo__item { margin-bottom: 20px; } .microModal .deliveryFeeInfo__item:last-child { margin-bottom: 0; } .microModal .deliveryFeeInfo__item em { font-style: normal; font-size: 14px; color: #50514f; font-weight: 500; } .microModal .deliveryFeeInfo__item p { font-size: 13px; color: #7e8282; padding-left: 12px; font-weight: 300; } .microModal .deliveryFeeInfo__item table { width: 100%; border-collapse: collapse; margin-top: 4px; } .microModal .deliveryFeeInfo__item table th, .microModal .deliveryFeeInfo__item table td { border: 1px solid #e9ecef; padding: 8px; font-size: 13px; } .microModal .deliveryFeeInfo__item table td { color: #666968; } .microModal .deliveryFeeInfo__item table th { background-color: #f1f3f5; font-weight: 500; color: #3a3a37; } .microModal .deliveryFeeInfo__controls { display: flex; align-items: flex-end; justify-content: space-between; } .microModal .reviewBenefit { margin-top: 20px; border: 1px solid #f1f3f5; background-color: #f8f9fa; border-radius: 4px; padding: 8px; } .microModal .reviewBenefit dl { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 24px; } .microModal .reviewBenefit dl dt { flex-grow: 1; font-size: 13px; line-height: 18px; color: #0d0f12; font-weight: 500; } .microModal .reviewBenefit dl dd { flex-shrink: 0; font-size: 13px; line-height: 18px; color: #666968; } .microModal .reviewBenefit dl dd > em { font-weight: 500; font-style: normal; color: #1c7ed6; } .microModal .reviewBenefit dl:last-of-type { margin-bottom: 0; } .microModal .reviewBenefit__date { display: block; color: #979b9d; font-size: 12px; } .microModal .snsShare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; } .microModal .snsShare__item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; font-size: 12px; color: #16191d; } .microModal .snsShare__item .icon { border-radius: 50%; } .productDetailTab { position: sticky; display: flex; align-items: center; height: 50px; overflow-x: auto; scrollbar-width: none; background-color: #ffffff; top: 48px; z-index: 2; } .productDetailTab::-webkit-scrollbar { display: none; } .productDetailTab__item { font-size: 0; position: relative; flex: 1; text-align: center; height: 100%; } .productDetailTab__item::after { content: ""; position: absolute; left: 50%; bottom: 0; display: block; width: 100%; height: 1px; background-color: #dee2e6; transform: translateX(-50%); } .productDetailTab__item button, .productDetailTab__item a { font-size: 14px; display: inline-block; font-weight: 500; color: #868e96; word-break: keep-all; padding: 0 14px 0; width: 100%; height: 58px; margin-top: -8px; } .productDetailTab__item.active button, .productDetailTab__item.active a { color: #16191d; } .productDetailTab__item.active::after { content: ""; position: absolute; left: 50%; bottom: 0; display: block; width: 100%; height: 3px; background-color: #343a40; transform: translateX(-50%); } .productDetailTab__item.active .productDetailTab__num { color: #343a40; } .productDetailTab__content { display: none; } .productDetailTab__content.active { display: block; } .productDetailTab__num { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 10px; color: #979b9d; } .productDetailcontent { position: relative; } .productDetailcontent__imageDetails { position: relative; text-align: center; max-height: 1000px; overflow-y: hidden; } .productDetailcontent__imageDetails img { display: inline-block; } .productDetailcontent__imageDetails.opened { max-height: none; } .productDetailcontent__imageDetails.opened::after { display: none; } .productDetailcontent__imageDetails::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%); } .productDetailcontent__moreBtn { padding: 0 72px 0 78px !important; height: 60px !important; } .productDetailcontent__moreBtn::after { content: ""; display: block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-2px) rotate(135deg); margin-left: 6px; } .productDetailcontent__moreBtn.opened::after { transform: translateY(2px) rotate(-45deg); } .productDetailcontent__moreWrap { padding: 20px 0; text-align: center; } .productDetailcontent__folded { display: none; } .productDetailcontent__folded.opened { display: block; } .productReview__title { font-size: 28px; font-weight: 700; margin-bottom: 32px; } .productReview__subBox { padding-bottom: 20px; border-bottom: 2px solid #343a40; margin-bottom: 24px; } .productReview__subTitle { position: relative; margin-bottom: 20px; padding: 0 16px; } .productReview__subTitle__title { font-size: 20px; font-weight: 700; margin-right: 6px; } .productReview__subTitle__subText { font-size: 13px; color: #666968; } .productReview__subTitle__num { font-size: 20px; font-weight: 700; color: #343a40; } .productReview__subTitle__num .unit { position: relative; font-size: 16px; margin-left: 2px; top: -1px; } .productReview__text { font-size: 14px; color: #666968; margin-bottom: 4px; } .productReview__mileage { display: flex; align-items: center; } .productReview__mileage dl { position: relative; display: flex; align-items: center; margin-right: 16px; } .productReview__mileage dl::before { content: "·"; position: absolute; color: #979b9d; left: -9px; } .productReview__mileage dl:first-child::before { content: ""; } .productReview__mileage dl dt { font-size: 13px; color: #666968; margin-right: 4px; font-weight: 400; } .productReview__mileage dl dd { font-size: 13px; color: #121210; } .productReview__status { padding: 24px 12px 0; } .productReview__status__title { display: block; font-size: 16px; font-weight: 700; color: #16191d; margin-bottom: 24px; text-align: center; } .productReview__top { display: flex; align-items: flex-start; justify-content: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #f1f3f5; } .productReview__reviewNum__inner { padding-top: 12px; } .productReview__reviewNum__inner .icon { margin-bottom: 20px; } .productReview__reviewNum__num { display: block; font-size: 28px; font-weight: 700; color: #343a40; margin-left: 8px; line-height: 24px; } .productReview__rating { flex: 1; padding: 0 12px; } .productReview__ratingStats { position: relative; flex: 1; padding: 0 12px; } .productReview__ratingStats::before { left: -8px; position: absolute; content: ""; display: block; width: 1px; height: 160px; top: 34px; background-color: #e9ecef; } .productReview__ratingStats__star { font-size: 12px; color: #666968; margin-right: 14px; } .productReview__ratingStats__item { position: relative; display: flex; align-items: center; margin-bottom: 12px; padding-right: 24px; max-width: 240px; margin-inline: auto; } .productReview__ratingStats__bar { flex: 1; background-color: #e9ecef; height: 8px; border-radius: 12px; margin-right: 12px; overflow: hidden; } .productReview__ratingStats__fill { position: relative; height: 100%; background-color: #adb5bd; width: 0; } .productReview__ratingStats__num { position: absolute; top: 1px; right: -10px; display: inline-block; font-size: 11px; background-color: #fa5252; color: #fff; font-weight: 500; padding: 0px 4px; border-radius: 4px; line-height: 1.4; } .productReview__ratingStats__num::before { content: ""; display: block; position: absolute; top: 50%; left: -4px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #fa5252; transform: translateY(-50%); } .productReview__ratingStats__topRating .productReview__ratingStats__fill { background-color: #ff6b6b; } .productReview__reviewStats { margin-top: 20px; } .productReview__reviewStats .slick-arrow::before { content: ""; display: block; width: 16px; height: 16px; border-top: 1px solid #495057; border-right: 1px solid #495057; transform: rotate(-135deg); } .productReview__reviewStats .slick-prev { left: -44px; } .productReview__reviewStats .slick-next { right: -44px; } .productReview__reviewStats .slick-next::before { transform: rotate(45deg); } .productReview__reviewStats .slick-prev, .productReview__reviewStats .slick-next { transform: translate(0, calc(-50% + 20px)); } .productReview__reviewStats .slick-dots li { margin: 0; width: 18px; } .productReview__more { font-size: 14px; position: absolute; top: 4px; right: 18px; display: inline-flex; align-items: center; justify-content: center; color: #868e96; margin-left: auto; } .productReview__more::after { content: ""; display: inline-block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-left: 3px; } .otherReviews { padding-top: 14px; } .otherReviews__item { display: flex; align-items: center; max-width: 370px; margin-inline: auto; } .otherReviews__category { font-size: 13px; display: inline-block; padding: 2px 12px; border: 1px solid #ced4da; background-color: #ffffff; border-radius: 20px; min-width: 80px; text-align: center; margin-right: 8px; } .otherReviews__title { font-size: 14px; margin-right: 8px; } .otherReviews__line { display: block; border-top: 1px dashed #adb5bd; flex-grow: 1; margin-right: 8px; } .otherReviews__percent { font-size: 13px; color: #666968; } .otherReviews__wrap { margin-bottom: 36px; } .otherReviews__moreWrap { border-top: 1px solid #f1f3f5; } .otherReviews__moreBtn { display: flex; justify-content: center; align-items: center; width: 100%; padding: 12px 0; text-align: center; color: #212529; padding-left: 10px; } .otherReviews__moreBtn::after { content: ""; display: block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-2px) rotate(135deg); margin-left: 6px; } .otherReviews__moreBtn.opened::after { transform: translateY(2px) rotate(-45deg); } .otherReviewsDetail { display: none; padding-top: 16px; } .otherReviewsDetail.opened { display: block; } .otherReviewsDetail__title { font-size: 12px; color: #666968; margin-right: 8px; min-width: 76px; } .otherReviewsDetail__item { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 16px; max-width: 360px; margin-inline: auto; } .otherReviewsDetail__bar { flex-grow: 1; background-color: #e9ecef; height: 8px; border-radius: 12px; margin-right: 12px; overflow: hidden; } .otherReviewsDetail__fill { position: relative; height: 100%; background-color: #adb5bd; width: 0; } .otherReviewsDetail__num { position: relative; display: inline-block; font-size: 13px; padding: 0px 4px; border-radius: 4px; line-height: 1.4; color: #666968; width: 34px; } .allReviewStars { position: relative; display: inline-block; max-width: 160px; width: 100%; aspect-ratio: 180/36; background-color: #e3e3e3; } .allReviewStars__wrapper { padding-top: 6px; text-align: center; margin-bottom: 12px; } .allReviewStars__numWrap { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; } .allReviewStars__num { font-size: 42px; font-weight: 900; color: #343a40; margin-left: 8px; } .allReviewStars__allNum { font-size: 30px; color: #adb5bd; font-weight: 400; margin-left: 4px; } .allReviewStars::before { content: ""; position: absolute; display: block; top: 0; left: 0; width: 0; height: 100%; } .allReviewStars__fill { position: relative; height: 100%; background-color: #FFD43B; width: 0; } .allReviewStars::after { content: ""; position: absolute; top: 0; display: block; width: 100%; height: 100%; background-image: url(../images/icon_reviewStars--lg.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .storePick { padding: 16px 0; overflow: hidden; } .storePick__item { display: flex !important; } .storePick__box { flex: 1; border: 1px solid #dee2e6; min-height: 180px; border-radius: 6px; padding: 12px; cursor: pointer; } .storePick__top { display: flex; align-items: center; margin-bottom: 14px; } .storePick__userImage { width: 40px; height: 40px; margin-right: 6px; margin-top: 3px; } .storePick__userImage img { width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .storePick__misc { margin-left: 6px; font-size: 13px; } .storePick__misc__id { color: #7e8282; } .storePick__misc__date { color: #7e8282; } .storePick__misc > * { position: relative; } .storePick__misc > * + * { margin-left: 8px; } .storePick__misc > * + *::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .storePick__misc__badge { display: inline-block; font-size: 12px; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 40px; font-weight: 400; background-color: #ff6b6b; color: #ffffff; margin-left: 2px; } .storePick__body { display: flex; align-items: flex-start; } .storePick__reviewImage { position: relative; width: 80px; height: 80px; margin-right: 16px; margin-top: 4px; flex-shrink: 0; border-radius: 5px; overflow: hidden; } .storePick__reviewImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .storePick__reviewImage::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .storePick__reviewImage__num { position: absolute; display: inline-block; min-width: 24px; height: 24px; padding: 0 8px; text-align: center; background-color: rgba(0, 0, 0, 0.6); line-height: 24px; font-size: 14px; color: #fff; font-weight: 500; right: 0; bottom: 0; } .storePick__reviewText { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: #3a3a37; line-height: 1.6; letter-spacing: -0.01em; } .storePick__counter { font-size: 18px; color: #666968; } .storePick__counter em { font-weight: 500; color: #252521; font-style: normal; } .storePick__swiper { position: relative; overflow: visible !important; } .storePick .swiper-pagination-fraction { top: -48px; right: 20px; left: auto; bottom: auto; font-size: 20px; font-weight: 700; color: #979b9d; width: -moz-fit-content; width: fit-content; letter-spacing: -0.07em; } .storePick .swiper-pagination-fraction .swiper-pagination-current { color: #16191d; } .photoReview { padding: 16px 0; } .photoReview__thumbs { display: flex; overflow-x: auto; gap: 12px; padding: 0 16px; } .photoReview__thumbs::-webkit-scrollbar { display: none; } .photoReview__thumbs__image, .photoReview__thumbs__moreImage { flex-shrink: 0; display: block; position: relative; width: 128px; height: 128px; cursor: pointer; border-radius: 5px; overflow: hidden; } .photoReview__thumbs__image img, .photoReview__thumbs__moreImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photoReview__thumbs__image::before, .photoReview__thumbs__moreImage::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .photoReview__thumbs__image:hover::before, .photoReview__thumbs__moreImage:hover::before { background-color: rgba(0, 0, 0, 0.2); } .photoReview__thumbs__num { position: absolute; display: inline-block; min-width: 30px; height: 30px; padding: 0 8px; text-align: center; background-color: rgba(0, 0, 0, 0.6); line-height: 30px; font-size: 15px; color: #fff; font-weight: 500; right: 0; bottom: 0; } .photoReview__thumbs__more { position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; color: #ffffff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .userReview { padding: 16px 0; } .userReview__sort { position: absolute; top: -8px; right: 20px; display: flex; gap: 8px; } .userReview__sort .select-box .nice-select { border: 0; font-size: 14px; } .userReview__tab { display: flex; align-items: center; margin-bottom: 20px; } .userReview__tab__btn { position: relative; flex: 1; text-align: center; color: #979b9d; font-size: 16px; font-weight: 500; padding: 20px 0 16px; border-bottom: 2px solid #dee2e6; } .userReview__tab__btn:hover { color: #666968; text-decoration: underline; } .userReview__tab__btn.current { color: #16191d; border-bottom: 2px solid #495057; text-decoration: none; } .userReview__tab__btn + .userReview__tab__btn::before { position: absolute; content: ""; display: block; width: 1px; height: 24px; background-color: #dee2e6; top: 50%; left: 0; transform: translateY(calc(-50% + 2px)); } .userReview__hashtag { display: flex; align-items: center; margin-bottom: 20px; padding: 12px 16px; background-color: #f8fafb; border: 1px solid #e9ecef; border-width: 1px 0; overflow-x: auto; } .userReview__hashtag::-webkit-scrollbar { display: none; } .userReview__hashtag__btn { display: inline-block; padding: 4px 16px; border: 1px solid #ced4da; border-radius: 20px; font-size: 14px; color: #343a40; margin-right: 4px; background-color: #ffffff; white-space: nowrap; } .userReview__hashtag__btn:active { color: #0d0f12; background-color: #fafafa; } .userReview__hashtag__btn.selected { background-color: #495057; border-color: transparent; color: #ffffff; } .userReview .bottomBtnControls { padding: 0 16px; } .userReviewItem { border-bottom: 1px solid #e9ecef; margin-bottom: 20px; padding-left: 64px; padding-right: 16px; padding-bottom: 20px; } .userReviewItem__item { display: flex !important; gap: 20px; } .userReviewItem__box { flex: 1; border: 1px solid #ced4da; min-height: 200px; border-radius: 6px; padding: 24px; } .userReviewItem__top { display: flex; align-items: center; margin-bottom: 10px; margin-left: -48px; } .userReviewItem__userImage { width: 40px; height: 40px; margin-right: 6px; margin-top: 3px; } .userReviewItem__userImage img { width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .userReviewItem__misc { margin-left: 6px; font-size: 13px; } .userReviewItem__misc__id { color: #7e8282; } .userReviewItem__misc__date { color: #7e8282; } .userReviewItem__misc > * { position: relative; } .userReviewItem__misc > * + * { margin-left: 8px; } .userReviewItem__misc > * + *::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .userReviewItem__misc__badge { display: inline-block; font-size: 12px; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 40px; font-weight: 400; background-color: #ff6b6b; color: #ffffff; margin-left: 2px; } .userReviewItem__misc .icon_new-post, .userReviewItem__misc .icon_hot-post { vertical-align: top; margin-top: 2px; margin-left: 3px; } .userReviewItem__misc .icon_new-post::before, .userReviewItem__misc .icon_hot-post::before { display: none; } .userReviewItem__body { position: relative; margin-bottom: 20px; } .userReviewItem__reviewImage { position: relative; width: 120px; height: 120px; flex-shrink: 0; margin-right: 60px; cursor: pointer; border-radius: 5px; overflow: hidden; } .userReviewItem__reviewImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .userReviewItem__reviewImage::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .userReviewItem__reviewImage__num { position: absolute; display: inline-block; min-width: 30px; height: 30px; padding: 0 8px; text-align: center; background-color: rgba(0, 0, 0, 0.6); line-height: 30px; font-size: 15px; color: #fff; font-weight: 500; right: 0; bottom: 0; } .userReviewItem__reviewImage ~ .userReviewItem__reviewImage { display: none; } .userReviewItem__reviewText { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: #16191d; line-height: 24px; letter-spacing: -0.01em; margin-bottom: 20px; } .userReviewItem__like { position: absolute; bottom: -54px; right: 78px; flex-shrink: 0; display: inline-flex; align-items: center; font-size: 12px; color: #030507; border: 1px solid #ced4da; gap: 4px; padding: 6px 14px; border-radius: 20px; } .userReviewItem__like svg, .userReviewItem__like path { fill: #fa5252; } .userReviewItem__like em { font-style: normal; font-size: 13px; font-weight: 400; color: #3a3a37; margin-right: 4px; } .userReviewItem__like:active { background-color: #f7f7f7; } .userReviewItem__like.selected { background-color: #fa5252; color: #ffffff; border-color: transparent; } .userReviewItem__like.selected svg, .userReviewItem__like.selected path { fill: #ffffff; } .userReviewItem__like.selected em { color: #ffffff; } .userReviewItem__like--dislike { right: 0; } .userReviewItem__like--dislike svg, .userReviewItem__like--dislike path { fill: #7e8282 !important; } .userReviewItem__like--dislike svg { transform: rotate(180deg); } .userReviewItem__like--dislike em { color: #212529 !important; } .userReviewItem__like--dislike.selected { background-color: #909090 !important; color: #ffffff; border-color: transparent; } .userReviewItem__like--dislike.selected svg, .userReviewItem__like--dislike.selected path { fill: #ffffff !important; } .userReviewItem__like--dislike.selected em { color: #ffffff !important; } .userReviewItem__more { display: inline-flex; align-items: center; font-size: 15px; color: #16191d; padding: 6px 8px 6px 0; } .userReviewItem__more:after { content: ""; display: block; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-3px) rotate(135deg); margin-left: 8px; } .userReviewItem__more.opened:after { transform: translateY(3px) rotate(-45deg); } .userReviewItem.opened .userReviewItem__reviewImage { width: auto; height: auto; max-width: 480px; } .userReviewItem.opened .userReviewItem__reviewImage .userReviewItem__reviewImage__num { display: none; } .userReviewItem.opened .userReviewItem__reviewImage ~ .userReviewItem__reviewImage { display: block; margin-top: 20px; } .userReviewItem.opened .userReviewItem__reviewText { -webkit-line-clamp: unset; overflow: unset; margin-bottom: 20px; } .userReviewItem.opened .userReviewItem__body { flex-direction: column; } .userRefund { letter-spacing: 0; letter-spacing: -0.01em; } .userRefund__title { font-size: 18px; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid #e9ecef; } .userRefund__inner { padding: 12px 16px; } .userRefund__sectionTitle { position: relative; font-size: 16px; font-weight: 700; color: #50514f; margin-bottom: 10px; } .userRefund__sectionSubTitle { display: block; font-size: 14px; font-weight: 500; color: #50514f; margin-bottom: 4px; } .userRefund__list { margin-bottom: 28px; } .userRefund__list li { position: relative; font-size: 12px; color: #666968; margin-bottom: 4px; padding-left: 12px; } .userRefund__list li::before { position: absolute; content: "·"; display: block; left: 2px; top: 0; } .userRefund .table { margin-bottom: 12px; } .userRefund .table th, .userRefund .table td { font-size: 12px; height: 40px; line-height: 1.4; } .userRefund .table th { padding: 6px 12px; font-weight: 400; } .userRefund .table td { padding: 6px 8px; } .userRefund__paragraph { font-size: 12px; color: #3a3a37; margin-bottom: 4px; } .userRefund a { text-decoration: underline; } .photoReviewSlide, .storePickReviewSlide { padding-top: 48px; } .photoReviewSlide__imgList li, .storePickReviewSlide__imgList li { display: block; max-width: 100%; border-radius: 5px; overflow: hidden; } .photoReviewSlide__imgList li img, .storePickReviewSlide__imgList li img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photoReviewSlide__imgList li + li, .storePickReviewSlide__imgList li + li { margin-top: 16px; } .photoReviewSlide__fraction, .storePickReviewSlide__fraction { display: inline !important; position: static !important; font-size: 20px; font-weight: 500; margin-left: 3px; color: #979b9d !important; width: -moz-fit-content; width: fit-content; letter-spacing: -0.07em; } .photoReviewSlide__fraction .swiper-pagination-current, .storePickReviewSlide__fraction .swiper-pagination-current { font-weight: 700; color: #16191d; } .photoReviewSlide__content, .storePickReviewSlide__content { padding-bottom: 64px; } .photoReviewSlide .bottomBtnControls, .storePickReviewSlide .bottomBtnControls { padding: 8px 16px 8px; margin-top: 0; } .photoReviewDetail, .storePickDetail { position: relative; background-color: #ffffff; padding: 16px; min-height: 100%; } .photoReviewDetail__top, .storePickDetail__top { height: 60px; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; } .photoReviewDetail__top__text, .storePickDetail__top__text { margin-right: 12px; color: #16191d; } .photoReviewDetail__top__num, .storePickDetail__top__num { font-size: 22px; font-weight: 500; color: #666968; margin-bottom: 4px; } .photoReviewDetail__top__num .photoReviewDetail__currentIndex, .storePickDetail__top__num .photoReviewDetail__currentIndex { font-weight: 700; color: #16191d; } .photoReviewDetail__top__seeAll, .storePickDetail__top__seeAll { display: inline-flex; align-items: center; margin-left: auto; font-size: 16px; font-weight: 500; color: #3a3a37; gap: 2px; } .photoReviewDetail__top__seeAll::after, .storePickDetail__top__seeAll::after { content: ""; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #666968; border-right: 1px solid #666968; transform: translateY(1px) rotate(45deg); } .photoReviewDetail__top__seeAll:hover, .storePickDetail__top__seeAll:hover { text-decoration: underline; color: #3a3a37; } .photoReviewDetail__item, .storePickDetail__item { display: flex !important; align-items: flex-start; } .photoReviewDetail__rightTop, .storePickDetail__rightTop { display: flex; align-items: center; margin-bottom: 10px; } .photoReviewDetail__reviewText, .storePickDetail__reviewText { padding-bottom: 20px; margin-bottom: 20px; font-size: 14px; color: #3a3a37; line-height: 1.5; letter-spacing: -0.01em; overflow-y: auto; } .photoReviewDetail__reviewText::-webkit-scrollbar, .storePickDetail__reviewText::-webkit-scrollbar { width: 6px; } .photoReviewDetail__reviewText::-webkit-scrollbar-thumb, .storePickDetail__reviewText::-webkit-scrollbar-thumb { background-color: #a3a3a3; border-radius: 6px; } .photoReviewDetail__userImage, .storePickDetail__userImage { width: 44px; height: 44px; margin-right: 6px; margin-top: 3px; } .photoReviewDetail__userImage img, .storePickDetail__userImage img { width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .photoReviewDetail__rightBottom, .storePickDetail__rightBottom { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; padding: 14px 16px; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; background-color: #ffffff; } .photoReviewDetail__rightBottom .userReviewItem__like, .storePickDetail__rightBottom .userReviewItem__like { position: static; padding: 6px 16px; } .photoReviewDetail__rightBottom .userReviewItem__like + .userReviewItem__like, .storePickDetail__rightBottom .userReviewItem__like + .userReviewItem__like { margin-left: 4px; } .photoReviewDetail__reviewAsk, .storePickDetail__reviewAsk { margin-right: auto; font-size: 14px; color: #16191d; } .photoReviewDetail__misc, .storePickDetail__misc { margin-left: 6px; font-size: 13px; } .photoReviewDetail__misc__id, .storePickDetail__misc__id { color: #7e8282; } .photoReviewDetail__misc__date, .storePickDetail__misc__date { color: #7e8282; } .photoReviewDetail__misc > *, .storePickDetail__misc > * { position: relative; } .photoReviewDetail__misc > * + *, .storePickDetail__misc > * + * { margin-left: 8px; } .photoReviewDetail__misc > * + *::before, .storePickDetail__misc > * + *::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .photoReviewDetail__misc__badge, .storePickDetail__misc__badge { display: inline-block; font-size: 12px; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 40px; font-weight: 400; background-color: #ff6b6b; color: #ffffff; margin-left: 2px; } .photoReviewDetail__thumbs, .storePickDetail__thumbs { display: flex; margin-bottom: 16px; } .photoReviewDetail__thumbs__item, .storePickDetail__thumbs__item { position: relative; width: 48px; height: 48px; margin-right: 2px; cursor: pointer; } .photoReviewDetail__thumbs__item img, .storePickDetail__thumbs__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photoReviewDetail__thumbs__item::before, .storePickDetail__thumbs__item::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); } .photoReviewDetail__thumbs__item:hover::before, .storePickDetail__thumbs__item:hover::before { background-color: rgba(0, 0, 0, 0.3); } .photoReviewDetail__thumbs__item.current::before, .storePickDetail__thumbs__item.current::before { border: 3px solid #228be6; background-color: transparent; } .photoReviewGallery { display: none; } .photoReviewGallery.active { display: block; } .photoReviewGallery__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 16px; gap: 8px; overflow-y: auto; } .photoReviewGallery__image { display: block; position: relative; cursor: pointer; aspect-ratio: 1/1; } .photoReviewGallery__image::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.15); } .photoReviewGallery__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photoReviewGallery__image:hover::before { background-color: rgba(0, 0, 0, 0.3); } .photoReviewGallery__image.current::before { border: 4px solid #228be6; background-color: transparent; } .photoReviewGallery__num { position: absolute; display: inline-block; min-width: 30px; height: 30px; padding: 0 8px; text-align: center; background-color: rgba(0, 0, 0, 0.6); line-height: 30px; font-size: 15px; color: #fff; font-weight: 500; right: 0; bottom: 0; } .productQnaList__top { position: relative; display: flex; align-items: flex-start; -webkit-appearance: none; padding: 0 16px 14px; cursor: pointer; } .productQnaList__top::-webkit-details-marker { display: none; } .productQnaList__top__chevron { position: absolute; display: block; width: 12px; height: 12px; border-right: 1px solid #495057; border-bottom: 1px solid #495057; right: 26px; top: 50%; transform: translateY(calc(-50% - 14px)) rotate(45deg); } .productQnaList__item { position: relative; display: flex; align-items: flex-start; padding: 14px 0 0; border-bottom: 1px solid #e9ecef; -webkit-appearance: none; } .productQnaList__item[open] { padding-bottom: 0; } .productQnaList__item[open] .productQnaList__top__chevron { transform: translateY(calc(-50% - 10px)) rotate(-135deg); } .productQnaList__item:first-of-type { border-top: 1px solid #e9ecef; } .productQnaList:last-of-type { border-bottom: 0; } .productQnaList__image { flex-shrink: 0; position: relative; width: 76px; height: 76px; border-radius: 4px; overflow: hidden; } .productQnaList__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .productQnaList__image a { display: block; width: 100%; height: 100%; } .productQnaList__image a::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .productQnaList__right { flex-grow: 1; height: 76px; margin-left: 10px; padding-top: 1px; } .productQnaList__info__question { font-size: 14px; font-weight: 500; color: #0d0f12; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 36px; margin-bottom: 8px; } .productQnaList__info__question .icon_new-post, .productQnaList__info__question .icon_hot-post, .productQnaList__info__question .icon_lock { vertical-align: top; margin-top: 1px; margin-left: 1px; } .productQnaList__info__status { display: flex; align-items: center; font-size: 13px; color: #666968; line-height: 16px; font-weight: 400; } .productQnaList__info__date { position: relative; margin-left: 20px; } .productQnaList__info__date::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #d1d6d8; left: -10px; top: 2px; } .productQnaList__answer { position: relative; padding: 16px; border-top: 1px solid #f1f3f5; background-color: #fafafa; } .productQnaList__answer__badge { font-size: 13px; font-weight: 500; color: #ffffff; padding: 2px 6px; border-radius: 3px; background-color: #808080; display: inline-block; line-height: 18px; margin-right: 4px; } .productQnaList__answer__question { font-size: 14px; margin-top: 28px; margin-bottom: 12px; padding: 0 4px; } .productQnaList__answer__reply { background-color: #f2f2f2; border-radius: 5px; padding: 12px 14px; font-size: 14px; color: #50514f; } .productQnaList__answer__reply__text { line-height: 24px; } .productQnaList__answer .textBtns { position: absolute; top: 8px; right: 8px; } .productQnaList__controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; } .productQnaList__controls .select-box { display: flex; } .productQnaList__controls .select-box .nice-select { height: 40px; line-height: 38px; font-size: 14px; border: 0; } .productQnaList .fullBtnSection { padding: 16px; } .relatedProduct { padding: 0 6px; text-align: right; } .relatedProduct__btn { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: #1c7ed6; text-decoration: underline; } .relatedProduct__btn::after { content: ""; display: block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-left: 4px; } .relatedProduct__pop { padding-bottom: 100px; } .relatedProduct__inner { padding: 16px 0; } .relatedProduct__inner .product-list-type-1col .product-unit { padding: 0; } .relatedProduct__inner .product-list-type-1col .product-unit:first-of-type::before { display: none; } .relatedProduct__inner .product-list-type-1col .product-unit-image { width: 100px; } .relatedProduct__inner .product-unit-info__inner { padding-top: 0; } .relatedProduct__item { padding: 0 16px; } .relatedProduct__item .product-unit { margin-bottom: 12px; } .relatedProduct__optionBtn { display: inline-flex; align-items: center; margin-bottom: 12px; } .relatedProduct__optionBtn::after { content: ""; display: block; width: 7px; height: 7px; border-top: 2px solid #868e96; border-right: 2px solid #868e96; transform: translateY(-2px) rotate(135deg); margin-left: 4px; } .relatedProduct__optionBtn.opened::after { transform: translateY(2px) rotate(-45deg); } .relatedProduct__option { display: none; padding: 12px; border-radius: 6px; border: 1px solid #dee2e6; } .relatedProduct__option.opened { display: block; } .ddoOptionItem, .selectOptionItem { margin-bottom: 20px; } .ddoOptionItem .select-box, .selectOptionItem .select-box { display: flex; margin-bottom: 4px; } .inputOptionItem { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; } .inputOptionItem .btn { height: 48px; } .reviewBadge { display: inline-block; font-size: 12px; height: 20px; line-height: 18px; padding: 0 4px; border-radius: 2px; font-weight: 400; background-color: #ffffff; color: #228be6; border: 1px solid #228be6; margin-right: 2px; } .reviewBadge--red { color: #ffffff; border-color: transparent; background-color: #f54a4c; font-weight: 500; } .couponSelect { padding-bottom: 84px; } .couponSelect__title { text-align: center; font-size: 16px; font-weight: 500; color: #1c7ed6; margin-bottom: 24px; } .couponSelect__item { position: relative; display: flex; line-height: 1; margin-bottom: 28px; } .couponSelect__item::after { position: absolute; content: ""; width: 100%; height: 1px; background-color: #f1f3f5; bottom: -14px; left: 0; } .couponSelect__item__price { display: block; font-size: 18px; font-weight: 700; color: #16191d; margin-bottom: 10px; } .couponSelect__item__detail { color: #16191d; font-size: 13px; margin-bottom: 10px; } .couponSelect__item__date { color: #979b9d; font-size: 13px; } .couponSelect__item__checkAll { display: block; font-size: 15px; font-weight: 500; color: #16191d; } .couponSelect__item .b-checkbox-container { margin-top: 1px; } .couponSelect__item__right { flex-grow: 1; cursor: pointer; } .couponSelect__item__right > *:last-child { margin-bottom: 0; } .couponSelect__item--checkAll { align-items: center; } .couponSelect__item--checkAll .b-checkbox.checkbox:not(.button) { margin-right: 0.2rem; } .couponSelect__item.used { pointer-events: none; opacity: 0.5; } .couponSelect__item.used .b-checkbox.checkbox input[type=checkbox] + .check { background: transparent; } .couponSelect__item__usedText { font-size: 12px; font-weight: 400; margin-left: 4px; } .storeList { overflow: hidden; } .storeList__top { position: relative; display: flex; justify-content: center; align-items: center; height: 300px; } .storeList__topImage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .storeList__topImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .storeList__topText { position: relative; text-align: center; margin-bottom: 40px; } .storeList__title { font-size: 44px; font-weight: 700; color: #ffffff; } .storeList__subTitle { font-size: 28px; font-weight: 500; color: #ffffff; } .storeList__tab { position: relative; margin-top: -48px; overflow-x: auto; margin-inline: auto; white-space: nowrap; font-size: 0; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding: 0 16px; } .storeList__tab::-webkit-scrollbar { display: none; } .storeList__tab__wrapper { width: 100%; position: relative; } .storeList__tabBtn { background-color: rgba(0, 0, 0, 0.74); height: 48px; min-width: 108px; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.8); text-align: center; border-radius: 5px 5px 0 0; padding: 0 16px; white-space: nowrap; margin-right: 4px; } .storeList__tabBtn:active { background-color: rgba(0, 0, 0, 0.84); color: rgba(255, 255, 255, 0.92); } .storeList__tabBtn.current { background-color: #ffffff; color: #030507; } .storeList__tabBtn.current .storeList__tabText { position: relative; } .storeList__tabBtn.current .storeList__tabText::after { content: ""; position: absolute; height: 3px; width: 100%; background-color: currentColor; bottom: -8px; left: 0; } .storeList__content { background-color: #ffffff; padding: 40px 24px; } .storeList__subList { position: relative; margin-bottom: 80px; } .storeList__subList__top { margin-bottom: 24px; } .storeList__subList__title { font-size: 24px; font-weight: 700; color: #030507; } .storeList__subList__subTitle { font-size: 16px; font-weight: 400; color: #666968; } .storeList__subList__list { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 8px; column-gap: 8px; row-gap: 8px; } .storeList__subList__list li a { position: relative; display: flex; align-items: center; padding: 10px 2px; border-radius: 5px; transition: 0.3s all; } .storeList__subList__list li a::after { position: absolute; content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid #c0c0c0; border-right: 2px solid #c0c0c0; right: 16px; top: 50%; transform: translateY(0%) rotate(45deg); transition: 0.3s all; transition-delay: 150ms; opacity: 0; } .storeList__subList__list li a:active { background-color: #f5f5f5; } .storeList__subList__list li a:active::after { opacity: 1; transform: translateY(-50%) rotate(45deg); } .storeList__subList__name { font-size: 15px; font-weight: 500; color: #030507; margin-right: 8px; } .storeList__subList__store { font-size: 13px; font-weight: 400; color: #7e8282; } .storeList__subList + .storeList__subList::before { position: absolute; content: ""; display: block; width: 100%; height: 1px; background-color: #ededed; top: -40px; } .storeList__subList:last-of-type { margin-bottom: 0; } .storeList__section { display: none; } .storeList__section.current { display: block; } .storeList__searchInner .customer-search__controls { max-width: none; } .storeList__searchInner .customer-search .select-box { flex: 1; max-width: 200px; } .storeList__searchInner .customer-search .select-box .nice-select { width: 100%; } .storeList__storeLink { display: inline-flex; gap: 6px; align-items: center; } .storeSearchList__item { position: relative; padding: 16px; } .storeSearchList__item + .storeSearchList__item::before { position: absolute; content: ""; display: block; left: 16px; right: 16px; height: 1px; background-color: #e9ecef; top: 0; } .storeSearchList__storeName { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 500; color: #0d0f12; margin-bottom: 10px; } .storeSearchList__storeName img { width: 22px; height: 22px; -o-object-fit: cover; object-fit: cover; } .storeSearchList__address { color: #3a3a37; font-size: 14px; font-weight: 400; margin-bottom: 4px; } .storeSearchList__phone { color: #666968; font-size: 13px; font-weight: 400; margin-bottom: 10px; } .productDetailGallery { margin-bottom: 24px; } .productDetailGallery .swiper-slide img { -o-object-fit: contain; object-fit: contain; max-height: 400px; width: 100%; height: 100%; } .storeDetail { padding: 16px; } .storeDetail__top { margin-bottom: 32px; text-align: center; } .storeDetail__storeName { display: inline-block; position: relative; font-size: 24px; font-weight: 700; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 2px solid #979b9d; color: #16191d; } .storeDetail__text { font-size: 13px; font-weight: 400; color: #666968; } .storeDetail__table { margin-bottom: 52px; } .storeDetail__phoneBtn { margin-left: 4px; } .storeDetail__phoneBtn.btn { padding: 0 8px; gap: 4px; } .progressEvents { display: grid; } .progressEvents__item { position: relative; } .progressEvents__item > a { display: block; padding: 24px 16px 20px; } .progressEvents__item + .progressEvents__item::before { position: absolute; content: ""; display: block; left: 16px; right: 16px; height: 1px; background-color: #e9ecef; top: 0; } .progressEvents__title { font-size: 16px; font-weight: 700; color: #0d0f12; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .progressEvents__bottom { display: flex; align-items: center; } .progressEvents__bottom .eventList__list { margin-top: 0; } .progressEvents__bottom .eventList__list li { font-size: 13px; line-height: 22px; } .progressEvents__image { margin-bottom: 8px; width: 100%; } .progressEvents__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .progressEvents__dDay { flex-shrink: 0; display: inline-block; background-color: #e03131; color: #ffffff; font-size: 13px; font-weight: 700; padding: 0 10px; border-radius: 24px; margin-right: 8px; } .progressEvents__date { font-size: 14px; font-weight: 400; color: #7e8282; padding-bottom: 2px; } .progressEvents__no-result { grid-column: span 2; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .progressEvents__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .eventDetail { padding: 16px; } .eventDetail__top { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #dee2e6; } .eventDetail__title { font-size: 15px; font-weight: 700; color: #16191d; margin-bottom: 8px; } .eventDetail__date { font-size: 13px; font-weight: 400; color: #7e8282; } .eventDetail__image { position: relative; display: block; text-align: center; } .eventDetail__image img { display: inline-block; } .eventDetail__answer { border: 1px solid #dee2e6; padding: 24px 12px; border-radius: 12px; margin-inline: auto; margin-bottom: 40px; } .eventDetail__answer__nonMember { display: block; padding-bottom: 28px; margin-bottom: 28px; text-align: left; border-bottom: 1px solid #dee2e6; } .eventDetail__answer__nonMember .input-text { font-size: 16px; padding-left: 8px; margin-bottom: 4px; height: 48px; background-color: #f5f5f5; border: none; } .eventDetail__answer__nonMember .input-text:focus { background-color: #f0f0f0; } .eventDetail__answer__nonMember .signUp__inputBox__itemTitle { display: block; color: #212529; font-size: 14px; font-weight: 500; padding-left: 4px; margin-bottom: 3px; } .eventDetail__answer__nonMember .signUp__inputBox__alertText { font-size: 14px; color: #f03e3e; padding-left: 4px; } .eventDetail__answer__nonMember .signUp__inputBox__item { margin-bottom: 20px; } .eventDetail__answer__nonMember .signUpTerms__misc__item { text-align: right; } .eventDetail__answer__nonMember .signUpTerms__misc__item .b-checkbox-container { display: inline-block; text-align: left; } .eventDetail__answer__nonMember .signUpTerms__misc__item .signUpTerms__misc__detail { vertical-align: top; position: relative; right: auto; top: auto; margin-top: 1px; } .eventDetail__answer__inputWrapper { position: relative; width: 100%; } .eventDetail__answer__inputWrapper .signUp__inputBox__alertText { font-size: 14px; color: #f03e3e; padding-left: 4px; } .eventDetail__answer__input { width: 100%; height: 60px; padding: 0 8px; background-color: #f5f5f5; color: #030507; border-radius: 4px; font-size: 16px; font-weight: 400; color: #030507; outline: none; transition: all 0.2s ease-in-out; margin-bottom: 10px; } .eventDetail__answer__input:focus { background-color: #f0f0f0; } .eventDetail__answer__btn { display: block; text-align: center; height: 60px; width: 100%; background-color: #e03131; color: #ffffff; font-size: 20px; font-weight: 500; border-radius: 4px; padding: 0 16px; cursor: pointer; margin-bottom: 4px; } .eventDetail__content { min-height: 200px; } .eventDetail__list { display: flex; flex-wrap: wrap; padding-bottom: 2px; } .eventDetail__list li { font-size: 13px; font-weight: 400; color: #7e8282; } .eventDetail__list li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; background-color: currentColor; margin: 0 8px; opacity: 0.4; } .eventDetail .sub-bottom-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 20px; gap: 12px; } .eventDetail .main-section-header { padding: 0; } .eventDetail .product-list-vertical-twoAndaHalf .product-list-vertical-twoAndaHalf__swiper { padding-left: 0; padding-right: 0; } .prev-next .prev-next__item { display: flex; border-top: 1px solid #f1f3f5; } .prev-next .prev-next__item .prev-next__title { font-size: 13px; font-weight: 500; padding: 16px 16px 16px 24px; flex-shrink: 0; color: #666968; } .prev-next .prev-next__item .prev-next__link { font-size: 14px; padding: 16px 16px 16px 12px; flex-grow: 1; color: #0d0f12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prev-next .prev-next__item:last-child { border-bottom: 1px solid #f1f3f5; } .eventSurvey { padding: 16px; } .eventSurvey__item { margin-bottom: 48px; } .eventSurvey__question { display: flex; align-items: center; margin-bottom: 20px; } .eventSurvey__badge { display: inline-block; background-color: #f76707; color: #ffffff; font-size: 13px; font-weight: 700; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; margin-right: 8px; } .eventSurvey__questionText { font-weight: 500; font-size: 16px; } .eventSurvey__btn.btn { height: 60px; font-size: 18px; } .eventSurvey .custom-radio-container { flex-wrap: wrap; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; white-space: nowrap; } .eventComment { margin-bottom: 60px; } .eventComment .productReview__subTitle { padding-left: 0; } .comment-write { overflow: hidden; margin-bottom: 60px; } .comment-write__textarea-container { position: relative; flex-grow: 1; padding: 8px 10px; border: 1px solid #dee2e6; background-color: #ffffff; height: 120px; border-radius: 4px; } .comment-write__textarea-container:focus-within { border-color: #868e96; } .comment-write__textarea { resize: none; outline: none; width: 100%; height: 100%; font-size: 15px; } .comment-write__bottom { gap: 12px; width: 100%; } .comment-write__info { margin-top: 10px; } .comment-write__info-inner { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 4px; } .comment-write__info-item { position: relative; background-color: #ffffff; border: 1px solid #dee2e6; } .comment-write__info-item:first-child { border-radius: 4px 0 0 4px; } .comment-write__info-item:first-child .comment-write__info-input { border-radius: 4px 0 0 4px; } .comment-write__info-item:first-child .comment-write__info-input:focus { outline: 1px solid #868e96; } .comment-write__info-item:only-child { border-radius: 4px; } .comment-write__info-item + .comment-write__info-item { border-left: none; border-radius: 0 4px 4px 0; } .comment-write__info-item + .comment-write__info-item .comment-write__info-input { border-radius: 0 4px 4px 0; } .comment-write__info-item + .comment-write__info-item .comment-write__info-input:focus { outline: 1px solid #868e96; } .comment-write__info-input { width: 100%; height: 48px; padding: 0 8px; font-size: 14px; } .comment-write__info-input:focus { outline: 1px solid #868e96; } .comment-write__button { position: relative; z-index: 1; flex-shrink: 0; width: 120px; background-color: #212529; color: #ffffff; font-size: 16px; font-weight: 500; text-align: center; border-radius: 0 4px 4px 0; } .comment-write__button:hover { opacity: 0.9; } .comment-write__controls { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 10px; } .comment-write__controls .b-checkbox-container { margin-right: auto; } .comment-edit { overflow: hidden; } .comment-edit__textarea-container { position: relative; flex-grow: 1; padding: 8px; background-color: #f7f7f7; border-radius: 4px 0 0 4px; height: 120px; } .comment-edit__textarea-container:focus-within { border-color: #868e96; } .comment-edit__textarea { resize: none; outline: none; width: 100%; height: 100%; font-size: 15px; } .comment-edit__button { position: relative; z-index: 1; flex-shrink: 0; width: 120px; height: 48%; background-color: #212529; color: #ffffff; font-size: 16px; font-weight: 500; text-align: center; border-radius: 4px; font-weight: 400; } .comment-edit__button--remove { background-color: #7e8282; } .comment-edit__button:hover { opacity: 0.9; } .comment-edit__btnContainer { display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; } .comment-body__area { background-color: #ffffff; margin-bottom: 60px; } .comment-body__item { padding: 16px 0; border-top: 1px solid #e9ecef; } .comment-body__item:last-child { border-bottom: 1px solid #e9ecef; } .comment-body__nested-container { display: none; margin-top: 10px; border: 1px solid #eaeaea; } .comment-body__nested-container.opened { display: block; } .comment-body__nested-container .comment-body__item { position: relative; background-color: #fafafa; padding: 12px 12px 12px 32px; } .comment-body__nested-container .comment-body__item::before { content: ""; position: absolute; border: 1px solid #b0b0b0; border-width: 0 0 1px 1px; width: 10px; height: 10px; left: 12px; top: 15px; } .comment-body__nested-container .comment-body__item:first-child { border-top: none; } .comment-body__nested-container .comment-body__item + .comment-body__item { margin-top: 0; } .comment-body__nested-container .comment-body__item.close { padding: 8px 18px; text-align: center; color: #505050; font-size: 13px; cursor: pointer; } .comment-body__nested-container .comment-body__item.close::after { content: ""; position: relative; top: 1px; margin-left: 3px; display: inline-block; border-right: 2px solid #808080; border-bottom: 2px solid #808080; width: 8px; height: 8px; transform: rotate(-135deg); } .comment-body__nested-container .comment-body__item.close::before { content: none; } .comment-body__nested-container .comment-body__item .comment-like { justify-content: flex-end; margin-top: 8px; } .comment-body__nested-container .comment-write { margin-bottom: 0; } .comment-body__info { display: flex; margin-bottom: 12px; } .comment-body__info-left { margin-right: auto; } .comment-body__info-left > * + * { margin-left: 2px; } .comment-body__info-left .icon_comment-user { vertical-align: top; margin-top: 2px; } .comment-body__info-left .icon_new-post, .comment-body__info-left .icon_hot-post { vertical-align: top; margin-top: 4px; margin-left: 4px; width: 14px; height: 14px; } .comment-body__user { font-size: 14px; color: #0d0f12; font-weight: 500; } .comment-body__date { position: relative; font-size: 14px; color: #7e8282; margin-left: 8px; } .comment-body__date::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .comment-body__button { display: inline-block; vertical-align: middle; position: relative; color: #505050; } .comment-body__button + .comment-body__button { margin-left: 12px; } .comment-body__button + .comment-body__button::before { content: ""; position: absolute; display: inline-block; background-color: currentColor; width: 1px; height: 10px; left: -8px; top: 5px; opacity: 0.45; } .comment-body__button:hover { text-decoration: underline; } .comment-body__content { font-size: 14px; color: #0d0f12; min-height: 40px; line-height: 24px; letter-spacing: -0.01em; } .comment-body__content .icon_lock { vertical-align: top; margin-top: 4px; margin-right: 2px; } .comment-body__reply-container { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .comment-body__reply-button { color: #7e8282; font-weight: 500; padding: 4px 4px; font-size: 14px; border-radius: 2px; } .comment-body__reply-button em { color: #212529; font-style: normal; font-weight: 500; } .comment-body__privateComment { color: #7e8282; font-weight: 500; } .comment-like { display: flex; gap: 10px; margin-right: -6px; } .comment-like__btn { display: flex; align-items: center; padding: 4px; } .comment-like__btn svg, .comment-like__btn path { fill: #979b9d; } .comment-like__btn--dislike svg { transform: rotate(180deg); } .comment-like__btn:hover svg, .comment-like__btn:hover path { fill: #7e8282; } .comment-like__btn:hover .comment-like__number { color: #50514f; } .comment-like__number { font-size: 14px; color: #666968; font-weight: 500; margin-left: 3px; } .termsPage { padding: 16px; } .brandIntroImages { text-align: center; } .brandIntroImages img { display: inline-block; } .brandIntroMap { padding: 16px; } .brandIntroMap__top { margin-bottom: 32px; text-align: center; } .brandIntroMap__storeName { display: inline-block; position: relative; font-size: 24px; font-weight: 700; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 2px solid #979b9d; color: #16191d; } .brandIntroMap__text { font-size: 13px; font-weight: 400; color: #666968; } .cartItem--postItem { border-bottom: 1px solid #dee2e6; margin-bottom: 20px; padding-bottom: 20px; border-top: 1px solid #dee2e6; margin-top: 20px; padding-top: 20px; } .postQuestion { color: #16191d; font-size: 14px; margin-bottom: 40px; } .postAnswer { border-radius: 5px; padding: 12px 14px 20px; color: #16191d; background-color: #f7f7f7; } .postAnswer__top { display: flex; align-items: center; margin-bottom: 8px; } .postAnswer__admin { font-size: 15px; font-weight: 500; color: #7e8282; } .postAnswer__text { line-height: 24px; font-size: 14px; } .postAnswer__title { font-size: 16px; font-weight: 700; color: #212529; margin-bottom: 8px; } .postAnswer__badge { font-size: 13px; font-weight: 500; color: #ffffff; padding: 2px 6px; border-radius: 3px; background-color: #7e8282; display: inline-block; line-height: 18px; margin-right: 4px; } .postLikeBtn { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 400; color: #212529; padding: 8px 14px; border-radius: 4px; background-color: #ffffff; border: 1px solid #dee2e6; } .postLikeBtn:hover { background-color: #f7f7f7; } .postLikeBtn__text { display: inline-flex; align-items: center; gap: 3px; } .postLikeBtn svg, .postLikeBtn path { fill: #495057; } .postLikeBtn em { font-style: normal; font-weight: 500; color: #212529; } .postLikeBtn.clicked { background-color: #909090; border-color: transparent; color: #ffffff; } .postLikeBtn.clicked svg, .postLikeBtn.clicked path { fill: #ffffff; } .postLikeBtn.clicked em { color: #ffffff; } .postLikeBtn--dislike.postLikeBtn svg { transform: rotate(180deg); } .postLikeBtn--dislike.postLikeBtn svg, .postLikeBtn--dislike.postLikeBtn path { fill: #495057; } .postLikeBtn--dislike.postLikeBtn em { color: #212529; } .postLikeBtn--dislike.postLikeBtn.clicked { background-color: #909090; border-color: transparent; color: #ffffff; } .postLikeBtn--dislike.postLikeBtn.clicked svg, .postLikeBtn--dislike.postLikeBtn.clicked path { fill: #ffffff; } .postLikeBtn--dislike.postLikeBtn.clicked em { color: #ffffff; } .postEditBtns { margin-top: -2px; margin-bottom: 8px; } .postEditBtns .fullBtnSection { padding: 14px 16px; background: #ffffff; } .giftCardInform__inner { padding: 24px 16px 60px; } .giftCardInform__inner .customerMain__boardList li summary { position: relative; padding: 6px 0; font-size: 15px; } .giftCardInform__inner .customerMain__boardList li summary::after { position: absolute; content: ""; width: 10px; height: 10px; border: 2px solid #495057; border-width: 0 0 2px 2px; display: inline-block; top: 50%; right: 16px; transform: translateY(calc(-50% - 3px)) rotate(-45deg); } .giftCardInform__inner .customerMain__boardList li a { display: inline; color: #50514f; text-decoration: underline; text-decoration-color: #979b9d; } .giftCardInform__inner .customerMain__boardContent { padding: 20px 4px; margin-top: 12px; font-size: 14px; line-height: 24px; } .giftCardInform__top { margin-bottom: 36px; } .giftCardInform__title { font-size: 20px; font-weight: 700; color: #212529; margin-bottom: 16px; text-align: center; } .giftCardInform__subTitle { font-size: 14px; font-weight: 400; color: #7e8282; text-align: center; } .giftCardIntro { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 12px; column-gap: 12px; row-gap: 40px; max-width: 560px; margin-inline: auto; } .giftCardIntro__box { text-align: center; padding: 40px 7%; background-color: #f7f7f7; border-radius: 28px; margin-bottom: 12px; } .giftCardIntro__box img { display: inline-block; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .giftCardIntro__price { font-size: 15px; font-weight: 500; color: #212529; margin-left: 4px; } .wrap_error { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 80px 16px 20px; background-color: #f8f9fa; } .inner_error { text-align: center; } .inner_error img { margin-inline: auto; margin-bottom: 36px; } .tit_error { display: block; font-size: 26px; font-weight: 700; margin-bottom: 20px; color: #030507; } .tit_error em { font-style: normal; color: #1c7ed6; } .desc_error { font-size: 13px; line-height: 20px; color: #50514f; margin-bottom: 20px; } .desc_info { width: -moz-fit-content; width: fit-content; margin-inline: auto; text-align: left; font-size: 13px; line-height: 24px; color: #212529; border-top: 1px solid #e0e4e5; border-bottom: 1px solid #e0e4e5; margin-bottom: 20px; padding: 14px 28px; background-color: #ffffff; }/*# sourceMappingURL=default.css.map */