@charset "UTF-8"; body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { 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; 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%; -webkit-tap-highlight-color: transparent; } 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; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .justify-start { justify-content: flex-start !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .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:hover, .btn.outline.active { background-color: #fafafa !important; } .btn.dark { background-color: #343a40; color: #ffffff; } .btn.dark:hover, .btn.dark.active { background-color: #2b3035; } .btn.gray { background-color: #e0e4e5; color: #50514f; border: 1px solid #d8ddde; } .btn.gray:hover, .btn.gray.active { background-color: #d8ddde; } .btn.gray2 { background-color: #7e8282; color: #ffffff; } .btn.gray2:hover, .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: 44px; font-size: 16px; min-width: 92px; padding: 0 24px; font-weight: 500; } .btn.large, .btn.lg { min-width: 152px; height: 52px; padding: 0 42px; font-size: 17px; font-weight: 500; } .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; border: 1px solid #ced4da !important; pointer-events: none; } .btn.disabled { background-color: #dee2e6 !important; color: #495057 !important; border: 1px solid #ced4da !important; pointer-events: none; } .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; } .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; } .sub-bottom-btn-container { display: flex; justify-content: center; align-items: center; margin-bottom: 60px; } .sub-bottom-btn-container > * + * { margin-left: 12px; } .manage-btn-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; } .number-badge { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; padding: 0 5px; height: 16px; border-radius: 100px; background-color: #f03e3e; color: #ffffff; font-family: Arial; font-weight: 700; font-size: 11px; } .product-badge-container { display: flex; flex-wrap: wrap; min-height: 18px; margin-bottom: 6px; } .product-badge-container > * + * { margin-left: 4px; } .product-badge { display: inline-block; font-size: 11px; height: 20px; padding: 0 8px; border-radius: 40px; /*background-color: #b1b6b9;*/ color: #5c7cfa; background-color: #fcfdff; border: 1px solid #5c7cfa; 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-badge.hot-deal { color: #f06595; background-color: #fffafc; border: 1px solid #f06595; } .product-badge--lg { font-size: 14px; height: 24px; padding: 0 12px; } .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; } .icon { font-style: normal; display: inline-block; background-repeat: no-repeat; background-size: cover; } .icon_magazine-more-icon { width: 7px; height: 15px; margin-left: 4px; background-image: url(../images/icon_magazine-more-link.png); } .icon_prev01 { width: 80px; height: 80px; background-image: url(../images/icon_prev01.png); } .icon_next01 { width: 80px; height: 80px; background-image: url(../images/icon_prev01.png); transform: rotate(180deg); } .icon_prev02 { width: 60px; height: 60px; background-image: url(../images/icon_prev02.png); } .icon_next02 { width: 60px; height: 60px; background-image: url(../images/icon_prev02.png); transform: rotate(180deg); } .icon_prev03 { width: 40px; height: 40px; background-image: url(../images/icon_prev03.png); } .icon_next03 { width: 40px; height: 40px; background-image: url(../images/icon_prev03.png); transform: rotate(180deg); } .icon_prev04 { width: 40px; height: 40px; background-image: url(../images/icon_prev04.png); } .icon_next04 { width: 40px; height: 40px; background-image: url(../images/icon_prev04.png); transform: rotate(180deg); } .icon_product-image-badge01, .icon_product-image-badge02, .icon_product-image-badge03 { position: absolute; z-index: 1; } .icon_notice-chevron { width: 28px; height: 28px; background-image: url(../images/icon_notice-chevron.png); } .icon_notice-chevron2 { width: 28px; height: 28px; background-image: url(../images/icon_notice-chevron.png); transform: rotate(180deg); } .icon_top-banner-close { width: 20px; height: 20px; background-image: url(../images/icon_top-banner-close.png); } .icon_recent-search { width: 22px; height: 22px; background-image: url(../images/icon_recent-search.png); } .icon_qna-q { width: 20px; height: 20px; background-image: url(../images/icon_qna-q.png); } .icon_qna-a { width: 20px; height: 20px; background-image: url(../images/icon_qna-a.png); } .icon_notice-fixed { width: 18px; height: 18px; background-image: url(../images/icon_notice-fixed.png); } .icon_hot-post { width: 16px; height: 16px; background-image: url(../images/icon_hot-post.png); } .icon_new-post { width: 16px; height: 16px; background-image: url(../images/icon_new-post.png); } .icon_image-badge { width: 16px; height: 16px; background-image: url(../images/icon_image-badge.png); } .icon_manual-download { width: 18px; height: 18px; background-image: url(../images/icon_manual-download.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_textInfo--sm { width: 16px; height: 16px; background-image: url(../images/icon_textInfo--sm.png); } .icon_gcpay { width: 85px; height: 23px; background-image: url(../images/logo_gcpay.png); } .icon_info { background-image: url(../images/icon_info.png); width: 15px; height: 15px; } .icon_wish { background-image: url(../images/icon_wish.png); width: 24px; height: 24px; background-position: 0 0; } .icon_wish.active { background-position: -24px 0; } .icon_share { background-image: url(../images/icon_share.png); width: 24px; height: 24px; } .icon_review { background-image: url(../images/icon_review.png); width: 80px; height: 80px; } .icon_download { background-image: url(../images/icon_download.png); width: 32px; height: 32px; } .icon_question { background-image: url(../images/icon_question.png); width: 20px; height: 20px; } .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_comment-user { width: 14px; height: 14px; background-image: url(../images/icon_comment-user.png); } .icon_new-badge { width: 12px; height: 12px; background-image: url(../images/icon_new-badge.png); } .icon_reply { width: 12px; height: 12px; background-image: url(../images/icon_reply.png); } .product-list-type1__list { display: grid; grid-template-columns: repeat(4, 1fr); -moz-column-gap: 20px; column-gap: 20px; row-gap: 52px; } .product-list-type2__list { display: flex; justify-content: space-between; flex-wrap: wrap; } .product-list-type2 .product-unit { width: 232px; margin-top: 48px; } .product-list-type2 .product-unit-image { width: 232px; height: 232px; } .product-unit { position: relative; } .product-unit--relatedProduct { position: relative; display: flex; align-items: flex-start; margin-bottom: 16px; } .product-unit--relatedProduct .product-unit-info { margin-top: 0; } .product-unit--relatedProduct .product-unit-image { width: 80px; height: 80px; margin-right: 12px; flex-shrink: 0; } .product-unit--relatedProduct .product-unit-image:hover img { transform: none; } .product-unit--relatedProduct .product-unit-title { padding-right: 100px; } .product-unit--relatedProduct .product-unit-title > a { font-size: 14px; } .product-unit--relatedProduct .product-unit-price { margin-top: 4px; } .product-unit--relatedProduct .product-unit-price__original { font-size: 12px; } .product-unit--relatedProduct .product-unit-price__current { font-size: 16px; } .product-unit--relatedProduct .product-unit-price__sale > .percent { font-size: 15px; } .product-unit--relatedProduct .product-unit-rating { font-size: 14px; margin-top: 6px; } .product-unit-image { overflow: hidden; position: relative; border-radius: 6px; } .product-unit-image:hover img { transform: scale(1.08); } .product-unit-image:hover .product-unit-addToCart { display: block; } .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: 32px; 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: 12px; } .product-unit-title > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 22px; font-size: 16px; letter-spacing: -0.035em; color: #16191d; } .product-unit-price { display: flex; align-items: center; margin-top: 5px; flex-wrap: wrap; } .product-unit-price__sale { display: flex; flex-direction: column; color: #e34747; text-align: center; letter-spacing: -0.03em; } .product-unit-price__sale > .percent { font-weight: 700; font-size: 20px; } .product-unit-price__price { display: flex; align-items: center; } .product-unit-price__price > * + * { margin-left: 6px; } .product-unit-price__original { font-size: 14px; color: #343a40; text-decoration: line-through; color: #adb5bd; line-height: 16px; letter-spacing: -0.03em; } .product-unit-price__current { font-size: 20px; font-weight: 700; color: #16191d; letter-spacing: -0.03em; } .product-unit-price__monthly-payment { font-size: 12px; color: #495057; } .product-unit-price > * + * { margin-left: 6px; } .product-unit-price > .product-unit-price__sale + .product-unit-price__price { margin-left: 6px; } .product-unit-rating { display: flex; align-items: center; height: 20px; font-size: 15px; margin-top: 12px; } .product-unit-rating__score { margin-left: 4px; color: #343a40; } .product-unit-rating__count { margin-left: 2px; letter-spacing: -0.03em; } .product-unit-addToCart { font-size: 0; position: absolute; bottom: 12px; right: 14px; display: none; } .time-sale-slick .slick-slide { margin: 0 20px 0 0; } .time-sale-slick .slick-list { margin: 0 -20px 0 0; overflow: visible; padding-bottom: 28px; } .time-sale-slick .product-unit { width: 412px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); background-color: #ffffff; } .time-sale-slick .product-unit-image { width: 412px; height: 360px; } .time-sale-slick .product-unit-info { margin: 20px 0; padding: 0 20px; height: 156px; } .TwoXTwo-left-slick .slick-slide { margin: 0 12px; } .TwoXTwo-left-slick .slick-list { margin: 0 -12px; } .TwoXTwo-left-slick .product-unit { width: 240px; } .TwoXTwo-left-slick .product-unit-image { width: 240px; height: 240px; } .TwoXTwo-left-slick .product-unit-info { height: 156px; } .TwoXTwo-right-slick .slick-slide { margin: 0 12px; } .TwoXTwo-right-slick .slick-list { margin: 0 -12px; } .TwoXTwo-right-slick .product-unit { width: 240px; } .TwoXTwo-right-slick .product-unit-image { width: 240px; height: 240px; } .four-row-slick .slick-slide { margin: 0 20px 0 0; } .four-row-slick .slick-list { margin: 0 -20px 0 0; } .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 { 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__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; letter-spacing: -0.03em; } .product-option__monthly-payment { font-size: 12px; 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: 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-counter + .btn { margin-top: 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; } .product-total__container { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; border-top: 1px solid #e0e4e5; padding: 16px 0; margin-bottom: 8px; } .product-total__text { font-size: 14px; color: #666968; font-weight: 500; letter-spacing: -0.04em; } .product-total__price { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; } .product-total__price > .won { position: relative; bottom: 0.1em; font-size: 16px; font-weight: 700; margin-left: 2px; } .product-btn-container { display: flex; gap: 8px; } .product-btn-container > .btn { flex: 1; } .blocker { z-index: 99 !important; background-color: rgba(0, 0, 0, 0.35) !important; } .modal { box-shadow: 0 0 14px rgba(0, 0, 0, 0.45) !important; } .modal.default { padding: 24px 28px; } .modal.default .close-modal { top: 26px; right: 30px; background-image: url("../images/icon_modal-close.png"); width: 24px; height: 24px; } .modal.default .table-wrapper { margin-bottom: 14px; } .modal.default .modal-content { max-height: 520px; } .modal.default .modal-footer { display: flex; justify-content: center; padding: 24px 4px 0px; gap: 8px; } .modal.default:has(.gcpayGuide) { padding: 24px 0 8px; } .modal.default:has(.gcpayGuide) .modal-header { padding-bottom: 16px; border-bottom: 1px solid #e9ecef; padding: 0 28px 16px; } .modal.default:has(.gcpayGuide) .modal-content { padding: 0; max-height: none; } .modal.default:has(.gcpayGuide) .infoBox { background-color: #ffffff; } .modal.alert { padding: 18px 30px 12px; max-width: 400px; } .modal.alert .close-modal { display: none; } .modal.option { max-width: 520px; padding: 32px 30px; } .modal.option .close-modal { top: 34px; right: 32px; background-image: url("../images/icon_modal-close.png"); width: 24px; height: 24px; } .modal.option:has(.option-header + .option-content) .option-header__title { border-bottom: 0; } .modal.modal--reviewImage { width: 100%; padding: 0; background-color: transparent; box-shadow: none !important; } .modal.modal--reviewImage .close-modal { width: 72px; height: 72px; background: none; top: -60px; right: -28px; } .modal.modal--reviewImage .close-modal:hover { background-color: rgba(0, 0, 0, 0.15); border-radius: 50%; } .modal.modal--reviewImage .close-modal::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 44px; height: 2px; background-color: #ffffff; } .modal.modal--reviewImage .close-modal::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(225deg); width: 2px; height: 44px; background-color: #ffffff; } .modal.modal--reviewImage .modal-content { max-height: none; overflow-y: visible; } .modal.modal--photoReview { width: 100%; padding: 0; background-color: transparent; box-shadow: none !important; } .modal.modal--photoReview .close-modal { width: 72px; height: 72px; background: none; top: -60px; right: -28px; } .modal.modal--photoReview .close-modal:hover { background-color: rgba(0, 0, 0, 0.15); border-radius: 50%; } .modal.modal--photoReview .close-modal::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 44px; height: 2px; background-color: #ffffff; } .modal.modal--photoReview .close-modal::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(225deg); width: 2px; height: 44px; background-color: #ffffff; } .modal.modal--photoReview .modal-content { max-height: none; overflow-y: visible; } .modal.promotion { padding: 0; border-radius: 24px; overflow: hidden; } .modal.promotion .modal-content { padding: 0; } .modal.promotion a.close-modal { top: 18px; right: 18px; } .modal.promotion .modal-footer { justify-content: space-between; padding: 4px 8px; background-color: #f7f7f7; } .modal.promotion .modal-footer > .btn { height: 28px; font-size: 14px; background-color: transparent; color: #16191d; } .modal.promotion .modal-footer > .btn:hover { text-decoration: underline; } .modal.promotion .modal-footer .b-checkbox { margin-left: 12px; color: #16191d; } .blocker:has(.modal.modal--reviewImage) { background-color: rgba(0, 0, 0, 0.75) !important; } .blocker:has(.modal.modal--photoReview) { background-color: rgba(0, 0, 0, 0.7) !important; } .blocker:has(#product-option-popUp), .blocker:has(#related-product-popUp) { overflow: hidden; } .modal .alert-content { text-align: center; padding-top: 8px; min-height: 52px; } .modal .alert-content > p + p { margin-top: 16px; } .modal .alert-content__pwInput { width: 100%; max-width: none; text-align: left; height: 52px; margin-top: 28px; } .modal .alert-content__text { font-size: 18px; font-weight: 700; } .modal .alert-content__text--sm { font-size: 16px; } .modal .alert-btn-container { display: flex; justify-content: center; width: 100%; margin-top: 20px; padding: 16px 0; } .modal .alert-btn-container > * + * { margin-left: 8px; } .modal .alert-btn { display: inline-flex; justify-content: center; align-items: center; flex: 1; max-width: 160px; text-align: center; height: 52px; background-color: #f1f3f5; font-size: 16px; font-weight: 700; border-radius: 8px; } .modal .alert-btn--confirm { background-color: #343a40; color: #ffffff; } .modal .alert-btn--cancel { background-color: #7e8282; color: #ffffff; } .modal .alert-btn + .modal .alert-btn { margin-left: 10px; } .modal .alert-btn:hover { opacity: 0.92; } .modal .option-header { padding-bottom: 16px; } .modal .option-header__title { font-size: 20px; font-weight: 700; border-bottom: 1px solid #e9ecef; } .modal .option-content { height: 380px; overflow-y: auto; margin-bottom: 28px; padding-bottom: 12px; padding-right: 12px; } .modal .option-content::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; } .modal .option-content::-webkit-scrollbar-thumb { background-color: #b3b3b3; } .modal .option-content .productDetailInfo__count { padding: 12px 20px; margin-bottom: 8px; } .modal .option-content .productDetailInfo__option__title { font-size: 16px; } .modal .option-content .productDetailInfo__additionalSelect__title { font-size: 16px; } .modal .modal-header { padding-bottom: 16px; border-bottom: 1px solid #e9ecef; } .modal .modal-header__title { font-size: 20px; font-weight: 700; } .modal .modal-content { padding: 12px 0; overflow-y: auto; max-height: 640px; padding-right: 12px; } .modal .modal-content::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; } .modal .modal-content::-webkit-scrollbar-thumb { background-color: #b3b3b3; } .modal .modal-content__btn-controller { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 8px; } .modal .modal-footer { display: flex; justify-content: center; padding: 40px 4px 12px; gap: 4px; } .modal .content { height: 380px; overflow-y: auto; margin-bottom: 28px; padding-bottom: 12px; } .shipping-list__item { position: relative; border-radius: 4px; } .shipping-list__item + .shipping-list__item { margin-top: 20px; } .shipping-list__item + .shipping-list__item::before { content: ""; position: absolute; display: block; width: 100%; height: 1px; top: -6px; background-color: #e9ecef; } .shipping-list__item-top { display: flex; align-items: center; padding: 8px 0; } .shipping-list__item-top .custom-radio { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #16191d; } .shipping-list__item-top .custom-radio-container { margin-right: auto; } .shipping-list__item-inner { background-color: #fafafa; padding: 10px 6px 10px 10px; } .shipping-list__item-inner .name { font-weight: 500; } .shipping-list__item-inner .number { color: #666968; } .shipping-list__item-inner > p + p { margin-top: 4px; } .shipping-register-btn { display: inline-flex; align-items: center; gap: 3px; color: #228be6; font-weight: 500; padding: 6px 2px; border-radius: 4px; font-size: 14px; } .shipping-register-btn > svg { fill: #228be6; opacity: 0.9; } .shipping-apply-btn { background-color: #e0e4e5; color: #252521; border: 1px solid #e0e4e5; padding: 6px 14px; border-radius: 4px; margin-left: 4px; font-weight: 500; } .shipping-apply-btn:hover { background-color: #d8ddde; } .shipping-modify-btn { background-color: #ffffff; color: #252521; border: 1px solid #e0e4e5; padding: 6px 14px; border-radius: 4px; margin-left: 4px; font-weight: 500; } .shipping-modify-btn:hover { background-color: #f8fafb; } .shipping-remove-btn { background-color: #495057; color: #ffffff; padding: 6px 14px; border-radius: 4px; margin-left: 4px; font-weight: 500; } .shipping-remove-btn:hover { background-color: #343a40; } .shipping-register-bottom { padding: 12px 4px; margin-bottom: 30px; } .shipping-btn-container { display: flex; justify-content: center; gap: 8px; } .default-address { display: inline-block; color: #228be6; padding: 3px 4px; border-radius: 2px; font-weight: 500; font-size: 14px; border: 1px solid #228be6; } .table-address th, .table-address td { vertical-align: text-top; padding: 8px 4px; } .table-address th { font-size: 15px; font-weight: 500; color: #343a40; } .table-address .m-input { width: 100%; max-width: 212px; height: 44px; padding: 5px 6px; border: 1px solid #e5e5e5; outline: none; transition: border 0.2s ease-in-out; border-radius: 3px; } .table-address .m-input:focus { border-color: #aaaaaa; } .table-address .m-input.short { max-width: 140px; } .table-address .m-input.long { max-width: 408px; } .table-address .m-input:-moz-read-only { background-color: #f5f5f5; } .table-address .m-input:disabled, .table-address .m-input:read-only { background-color: #f5f5f5; } .table-address .m-input.my { margin: 12px 0; } .table-address .find-address-btn { background-color: #495057; color: #ffffff; padding: 6px 10px; border-radius: 4px; height: 44px; font-size: 13px; font-weight: 500; margin-left: 1px; } .table-address .find-address-btn:hover { background-color: #343a40; } .modalSectionTitle { font-size: 18px; font-weight: 700; color: #212529; margin-bottom: 8px; } .modalSectionTitle__sub { font-size: 14px; font-weight: 400; color: #7e8282; margin-bottom: 10px; margin-left: 10px; } .deliveryCyclePop__checkWrapper { background-color: #f7f7f7; padding: 16px 14px; border-radius: 4px; } .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; } /* 체크박스 */ .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.25em; height: 1.25em; 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.4em - 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-container--reviewRating { -moz-column-gap: 20px; column-gap: 20px; } .custom-radio-container--reviewRating .custom-radio { font-weight: 500; color: #7e8282; } .custom-radio-container--reviewRating .custom-radio input:checked + label { color: #212529; } .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: 10px; height: 10px; 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: 42px; line-height: 40px; border: 1px solid #dee2e6; border-radius: 4px; padding-left: 12px; padding-right: 34px; 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: 12px; } .select-box .nice-select.above .list { top: auto; bottom: 100%; margin-bottom: 4px; transform-origin: 50% 100%; } /* 텍스트 인풋 */ .input-text { height: 42px; border: 1px solid #dee2e6; border-radius: 4px; padding: 0 10px 0 12px; outline: none; transition: all 0.2s ease-in-out; width: 100%; max-width: 172px; background-color: #ffffff; min-width: 52px; font-size: 15px; } .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-container { position: relative; display: inline-flex; align-items: center; } .input-grow-container { display: flex; align-items: center; width: 100%; } .input-grow-container > .input-text { flex-grow: 1; } .input-grow-container > *:not(.input-text) { flex-shrink: 0; margin-left: 5px; } .table.vertical .input-text { text-align: left; } /* 데이트 피커 */ .datepicker { width: 140px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #ffffff; padding: 0 8px 0 16px; height: 52px; 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; } #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; } .textarea { border: 1px solid #dee2e6; border-radius: 4px; padding: 6px 10px 6px 12px; outline: none; width: 100%; background-color: #ffffff; resize: none; scrollbar-width: thin; } .textarea:focus { border-color: #868e96; } .textarea:-moz-read-only { background-color: #f1f3f5; } .textarea:disabled, .textarea:read-only { background-color: #f1f3f5; } .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; gap: 6px; flex-grow: 1; min-width: 400px; } .dateRange-btnContainer .dateRange-btn { position: relative; height: 52px; flex: 1; border: 1px solid #dee2e6; padding: 0 9px; text-align: center; background-color: #ffffff; color: #868e96; font-size: 15px; border-radius: 4px; } .dateRange-btnContainer .dateRange-btn.selected { color: #212529; font-weight: 500; border: 1px solid #495057; } .dateRange-btnContainer .dateRange-btn:disabled { color: #868e96; background-color: #f1f3f5; cursor: not-allowed; } .inputLimit { position: relative; } .inputLimit .input-text { max-width: none; padding-right: 68px; } .inputLimit__text { font-size: 13px; color: #868e96; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); } .inputLimit__divider { margin: 0 2px; } .table-wrapper { position: relative; margin-bottom: 40px; width: 100%; } .table { width: 100%; border-top: 1px solid #dee2e6; } .table tr { border-bottom: 1px solid #f1f3f5; } .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 16px; font-weight: 500; color: #50514f; background-color: #f8f9fa; height: 52px; word-break: keep-all; font-size: 16px; letter-spacing: -0.025em; } .table td { vertical-align: middle; padding: 10px 10px; height: 62px; background-color: #ffffff; font-size: 16px; letter-spacing: -0.025em; } .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 td .category { color: #868e96; font-weight: 500; } .table td .board-inner-product { display: flex; align-items: center; } .table td .board-inner-product__img { width: 62px; height: 62px; border-radius: 1px; } .table td .board-inner-product__name { font-weight: 500; } .table td .board-inner-product__right { margin-left: 6px; } .table td .board-inner-product__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .table td .inquiry-content { min-height: 200px; } .table td .board-paragraph { position: relative; font-size: 15px; } .table td .board-paragraph .icon_reply { position: absolute; left: -25px; top: 4px; } .table td .board-number { color: #707070; letter-spacing: -0.03em; } .table td .board-date { color: #707070; letter-spacing: -0.03em; } .table td .customer-name { color: #707070; letter-spacing: -0.03em; } .table td .ellipsis { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .table td .new-post { position: relative; } .table td .new-post::after { position: relative; content: ""; display: inline-block; background-image: url("../images/icon_new-post.png"); top: 2px; width: 16px; height: 16px; background-size: cover; background-repeat: no-repeat; margin-left: 2px; } .table td .custom-radio { font-size: 15px; } .table__board-title { display: flex; align-items: center; } .table__board-title > .icon { position: relative; top: 1px; flex-shrink: 0; margin-left: 6px; } .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 td { padding: 10px 5px; } .table.tight th, .table.tight td { font-size: 14px; height: 46px; } .table.transparent { border-top: none; } .table.transparent tr { border-bottom: none; } .table.transparent th { background-color: transparent; } .table.transparent td { background-color: transparent; } .table.deliveryInfo { border-top: none; } .table.deliveryInfo tr { border-bottom: none; } .table.deliveryInfo th, .table.deliveryInfo td { vertical-align: top; font-size: 13px; height: 30px; background-color: transparent; } .table.deliveryInfo th { padding: 4px 4px; } .table.deliveryInfo td { padding: 4px 4px; } .table.deliveryStatus th, .table.deliveryStatus td { font-size: 14px; height: 42px; text-align: center; } .table.deliveryStatus th.left, .table.deliveryStatus td.left { text-align: left; } .table.deliveryStatus th.right, .table.deliveryStatus td.right { text-align: right; } .table.deliveryStatus th { padding: 8px 16px; font-size: 13px; } .table.deliveryStatus td { padding: 8px 5px; } .table .tr-foldable { visibility: collapse; } .table .tr-foldable-trigger { cursor: pointer; } .table .tr-foldable__content { padding: 26px 32px 26px 44px; 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; margin-top: 2px; } .table .tr-foldable__qna-content { flex-grow: 1; margin-left: 8px; word-break: break-all; margin-top: -2px; color: #16191d; font-size: 15px; } .table .tr-foldable__qna-title { display: flex; align-items: flex-start; justify-content: space-between; font-weight: 500; font-size: 16px; margin-bottom: 10px; color: #030507; line-height: 26px; } .table .tr-foldable__qna-info { font-size: 14px; color: #7e8282; flex-shrink: 0; margin-left: 20px; } .table .tr-foldable__qna-info > span { position: relative; display: inline-block; } .table .tr-foldable__qna-info > span + span { padding-left: 16px; } .table .tr-foldable__qna-info > span + span::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #e0e4e5; top: 50%; left: 8px; transform: translateY(-50%); } .table .tr-foldable__btn-container { display: flex; justify-content: flex-end; align-items: center; } .table .tr-foldable__btn-container > * + * { margin-left: 8px; } .table .text-waiting { font-weight: 500; color: #666968; } .table .text-complete { font-weight: 500; color: #1c7ed6; } .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; } .table__badge { display: inline-block; flex-shrink: 0; background-color: #495057; color: #ffffff; font-size: 14px; font-weight: 700; padding: 2px 18px; line-height: 20px; text-align: center; border-radius: 24px; margin-right: 8px; } .table__badge--event { background-color: #f76707; } .pagination__container { display: flex; justify-content: center; } .pagination { display: flex; } .pagination > * { margin-right: 4px; } .pagination__number-group { display: flex; flex-wrap: wrap; } .pagination__number-group > li + li { margin-left: 4px; } .pagination__item { display: flex; justify-content: center; align-items: center; min-width: 26px; height: 26px; padding: 0 3px; font-size: 14px; font-variant-numeric: tabular-nums; background-color: #ffffff; color: #495057; border-radius: 3px; font-variant-numeric: tabular-nums; border: 1px solid #e9ecef; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); } .pagination__item:hover { background-color: #f1f3f5; color: #343a40; } .pagination__item.active { color: #ffffff; font-weight: 500; background-color: #212529; border-color: transparent; } .pagination__item:disabled { pointer-events: none; } .pagination__item.prev::before { content: ""; width: 13px; height: 13px; background-image: url(../images/icon_pagination-next.png); background-size: cover; transform: rotate(-180deg); } .pagination__item.prev:disabled::before { opacity: 0.45; } .pagination__item.first::before { content: ""; width: 13px; height: 13px; background-image: url(../images/icon_pagination-last.png); background-size: cover; transform: rotate(-180deg); } .pagination__item.first:disabled::before { opacity: 0.45; } .pagination__item.next::before { content: ""; width: 13px; height: 13px; background-image: url(../images/icon_pagination-next.png); background-size: cover; } .pagination__item.next:disabled::before { opacity: 0.45; } .pagination__item.last::before { content: ""; width: 13px; height: 13px; background-image: url(../images/icon_pagination-last.png); background-size: cover; } .pagination__item.last:disabled::before { opacity: 0.45; } .required-asterisk { color: #f03e3e; font-weight: 400; } .boxTab { position: relative; display: flex; margin-bottom: 36px; } .boxTab__tabBtn { flex: 1; text-align: center; height: 52px; color: #868e96; background-color: #f1f3f5; font-weight: 500; font-size: 16px; border: 2px solid transparent; } .boxTab__tabBtn:hover { background-color: #e9ecef; } .boxTab__tabBtn.current { position: relative; background-color: #ffffff; color: #16191d; border: 2px solid #ced4da; border-bottom: transparent; } .boxTab__tabBtn.current:after { position: absolute; content: ""; height: 2px; width: 100%; left: 0; bottom: 0; background-color: #ffffff; z-index: 1; } .boxTab__content { display: none; } .boxTab__content.current { display: block; } .boxTab::after { content: ""; display: block; width: 100%; height: 2px; background-color: #e9ecef; position: absolute; bottom: 0; left: 0; } .inputWithBtn { display: flex; gap: 8px; } .inputEmail { display: flex; align-items: center; gap: 6px; } .inputEmail__at { 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; } .textInfo { display: inline-flex; gap: 6px; color: #666968; font-size: 13px; word-break: keep-all; margin-bottom: 8px; } .textInfo .icon { flex-shrink: 0; margin-top: 2px; } .textInfo em { font-style: normal; font-weight: 500; color: #252521; } .textInfo em.blue { color: #228be6; } .textInfo--dot { position: relative; padding-left: 8px; } .textInfo--dot::before { position: absolute; content: "·"; display: inline-block; top: 50%; left: 0; transform: translateY(-50%); } .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: 20px; 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__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: 16px; margin-bottom: 24px; } .popModalContent__reviewBenefit dl dt { flex-grow: 1; font-size: 14px; line-height: 18px; color: #0d0f12; font-weight: 400; } .popModalContent__reviewBenefit dl dd { flex-shrink: 0; 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__reviewBenefit .date { display: block; color: #979b9d; font-size: 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; } .popModal .close { right: 26px !important; top: 24px !important; } .popModal .popModal_content { margin: 0 auto !important; } .reviewRating { background-color: #fff; width: 100%; padding: 30px; border-radius: 8px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; margin-inline: auto; } .reviewRating__title { font-size: 20px; font-weight: 700; margin-bottom: 12px; } .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%; transition: 0.3s; } .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:hover, .reviewRating__inner > input:not(:checked) ~ label:hover ~ 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; align-items: center; min-height: 100px; padding: 12px; border-top: 1px dashed #dee2e6; } .reviewRadio__item:last-child { border-bottom: 1px dashed #dee2e6; } .reviewRadio__item .custom-radio-container { flex-grow: 1; flex-wrap: wrap; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; } .reviewRadio__item .custom-radio-container .custom-radio { font-weight: 500; color: #7e8282; } .reviewRadio__item .custom-radio-container .custom-radio input:checked + label { color: #212529; } .reviewRadio__item .b-checkbox-container { flex-grow: 1; display: flex; flex-wrap: wrap; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; } .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__title { flex-shrink: 0; font-size: 18px; font-weight: 500; color: #16191d; min-width: 124px; } .reviewRadio__inputRow { padding-top: 12px; padding-bottom: 12px; flex-grow: 1; } .reviewRadio__inputRow .input-text { margin-bottom: 10px; } .reviewRadio__inputRow .input-text:last-of-type { margin-bottom: 0; } .reviewImageUpload__title { color: #212529; font-size: 16px; font-weight: 500; padding-left: 6px; } .reviewImageUpload .dropzone-wrapper { padding: 12px 0; } .reviewImageUpload .contact-upload-info { padding-left: 0; } .reviewStars { position: relative; width: 116px; height: 24px; background-color: #e3e3e3; } .reviewStars__wrapper { display: flex; align-items: center; margin-bottom: 12px; } .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; } .infoBtn { display: inline-flex; align-items: center; justify-content: center; } .file_attachments { display: flex; align-items: flex-start; margin-bottom: 40px; } .file_attachments__title { font-size: 15px; color: #343a40; font-weight: 700; padding: 4px 8px; } .eventDetail__top ~ .file_attachments { margin-top: -20px; } .file_attachments_inner { background-color: #fafafa; border: 1px solid #e9ecef; border-radius: 6px; width: 100%; padding: 8px; } .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: 14px; 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: 14px; 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: ""; } .customOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; z-index: 9999; } .customOverlay__inner { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } .customOverlay__inner img { width: 100%; height: 100%; } /* 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; } .header { min-width: 1336px; } .header__top { display: flex; width: 1276px; margin: 0 auto; align-items: center; padding: 25px 0; } .header__left { display: flex; align-items: center; } .header__right { display: flex; margin-left: auto; } .header__miscLink { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 1280px; margin-inline: auto; z-index: 1; margin-bottom: 16px; } .header--type01 .header__top { padding: 25px 0 4px; } .header--type02 .header__top { padding: 8px 0 25px; } .header--type04 .header-search-bar { width: 344px; } .header--type05 .header__left { margin-right: 244px; } .header--type05 .header__top { justify-content: center; padding: 8px 0 25px; } .header--type05 .header-search-bar { width: 480px; height: 54px; } .header-search-bar { position: relative; height: 50px; width: 302px; border: 2px solid #adb5bd; border-radius: 32px; padding: 0 48px 0 12px; margin-left: 24px; } .header-search-bar__wrapper { position: relative; } .header-search-bar input[type=search] { height: 100%; width: 100%; padding-left: 8px; outline: none; } .header-search-bar input[type=search]::-webkit-search-decoration, .header-search-bar input[type=search]::-webkit-search-cancel-button, .header-search-bar input[type=search]::-webkit-search-results-button, .header-search-bar input[type=search]::-webkit-search-results-decoration { display: none; } .header-search-bar button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .header-search-bar button svg { fill: #adb5bd; } .header-search-pop { position: absolute; top: 0; left: 24px; display: none; z-index: 11; width: 700px; background-color: #ffffff; border-radius: 12px; border: 1px solid #f1f3f5; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .header-search-pop.active { display: block; } .header-search-pop__header { position: relative; display: flex; align-items: center; flex-shrink: 0; border-bottom: 1px solid #f1f3f5; height: 52px; padding: 0 16px; } .header-search-pop__header > input[type=search] { outline: none; flex-grow: 1; font-weight: 500; font-size: 15px; margin-right: 12px; } .header-search-pop__header > input[type=search]::-webkit-search-decoration, .header-search-pop__header > input[type=search]::-webkit-search-cancel-button, .header-search-pop__header > input[type=search]::-webkit-search-results-button, .header-search-pop__header > input[type=search]::-webkit-search-results-decoration { display: none; } .header-search-pop__header > button { flex-shrink: 0; } .header-search-pop__text-delete-btn { display: none; position: absolute; justify-content: center; align-items: center; top: 50%; transform: translateY(-50%); right: 48px; width: 24px; height: 24px; border-radius: 50%; } .header-search-pop__text-delete-btn > svg { fill: #868e96; } .header-search-pop__text-delete-btn.active { display: flex; } .header-search-pop__text-delete-btn:hover { background-color: #f1f3f5; } .header-search-pop__body { display: none; } .header-search-pop__body.active { display: flex; } .header-search-pop__auto-complete { display: none; max-height: 384px; overflow-y: auto; } .header-search-pop__auto-complete.active { display: block; } .header-search-pop__auto-complete > ul { padding: 6px 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; } .header-search-pop__recent-search { position: relative; flex-shrink: 0; width: 312px; padding: 12px 12px 16px; border-right: 1px solid #f1f3f5; } .header-search-pop__recent-search-inner { height: 363px; overflow-y: auto; padding: 0 4px 0 8px; } .header-search-pop__recent-search-noResult { font-size: 15px; color: #666968; } .header-search-pop__recent-search-list > li { display: flex; align-items: center; } .header-search-pop__recent-search-list > li .icon_recent-search { margin-right: 6px; flex-shrink: 0; } .header-search-pop__recent-search-list > li a { flex-grow: 1; padding: 3.3px 0; color: #16191d; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 6px; } .header-search-pop__recent-search-list > li + li { margin-top: 8px; } .header-search-pop__recent-search-list > li:hover a { text-decoration: underline; } .header-search-pop__recent-search-delete { position: relative; width: 20px; height: 20px; } .header-search-pop__recent-search-delete:before, .header-search-pop__recent-search-delete:after { position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background-color: #b1b6b9; content: ""; } .header-search-pop__recent-search-delete::before { transform: translate(-50%, -50%) rotate(45deg); } .header-search-pop__recent-search-delete::after { transform: translate(-50%, -50%) rotate(-45deg); } .header-search-pop__recent-search-deleteAll { position: absolute; top: 16px; right: 16px; font-size: 13px; color: #7e8282; font-weight: 500; text-decoration: underline; } .header-search-pop__trend { flex-grow: 1; padding: 12px 12px 16px; } .header-search-pop__trend .search-trend { width: auto; padding: 0 8px; } .header-search-pop__trend .search-trend ul li .icon { flex-shrink: 0; } .header-search-pop__trend .search-trend ul li + li { margin-top: 12px; } .header-search-pop__trend .search-trend ul li:hover .search-trend__text { text-decoration: underline; } .header-search-pop__trend .search-trend__text { width: 292px; margin-right: auto; } .header-search-pop__sub-title { font-weight: 700; font-size: 18px; color: #0d0f12; margin-bottom: 12px; margin-left: 4px; } .header-misc-link ul { display: flex; } .header-misc-link ul li { position: relative; font-size: 14px; color: #666666; } .header-misc-link ul li + li { margin-left: 24px; } .header-misc-link ul li + li::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #dee2e6; top: 50%; transform: translateY(-50%); left: -12px; } .header-top-controls { display: flex; width: 1276px; margin: 0 auto; padding: 12px 0 4px; } .header-top-controls .header-misc-link ul li { font-size: 13px; } .header-sub-link ul { display: flex; } .header-sub-link ul li { position: relative; font-size: 16px; font-weight: 500; color: #212529; } .header-sub-link ul li + li { margin-left: 28px; } .header-sub-link ul li + li::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 12px; background-color: #ced4da; top: 50%; transform: translateY(-50%); left: -14px; } .header-nav { position: relative; min-width: 1336px; border-bottom: 1px solid #e9ecef; border-top: 1px solid #dee2e6; box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.1); } .header-nav::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 9px; background-color: #ffffff; } .header-nav__hamburger { height: 48px; padding: 0 16px; } .header-nav__hamburger > img { width: 28px; height: 28px; background-size: cover; } .header-nav__inner { position: relative; width: 1276px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .header-nav__list { display: flex; align-items: center; justify-content: center; } .header-nav__list > li { position: relative; font-size: 16px; font-weight: 500; } .header-nav__list > li + li { margin-left: 24px; } .header-nav__list > li > a { position: relative; display: inline-flex; align-items: center; height: 48px; line-height: 48px; padding: 0 12px; } .header-nav__list > li > a .icon { margin-right: 4px; } .header-nav__list > li:hover .header-nav__depth2 { display: block; } .header-nav__btn-container button { position: relative; display: inline-flex; } .header-nav__btn-container button + button { margin-left: 12px; } .header-nav__depth2 { display: none; position: absolute; z-index: 1; top: 48px; left: 50%; transform: translateX(-50%); min-width: 148px; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .header-nav__depth2 > ul { margin-top: 8px; margin-bottom: 8px; } .header-nav__depth2 > ul > li { padding: 0 12px; } .header-nav__depth2 > ul > li + li { margin-top: 6px; } .header-nav__depth2 > ul > li > a { display: block; font-size: 15px; white-space: nowrap; padding: 6px 8px; font-weight: 400; color: #212529; } .header-nav__depth2 > ul > li > a:hover { background-color: #f8f9fa; border-radius: 4px; color: #0d0f12; } .full-menu { display: none; top: 48px; left: 0; position: absolute; border: 1px solid #e9ecef; border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); background-color: #ffffff; z-index: 2; padding: 16px 20px; } .full-menu__container:hover .full-menu { display: block; } .full-menu__depth1 { display: flex; } .full-menu__depth1 > li { position: relative; } .full-menu__depth1 > li > a { display: block; min-width: 156px; text-align: center; background-color: #f1f3f5; font-size: 16px; font-weight: 500; padding: 6px 28px; border-radius: 4px; } .full-menu__depth1 > li + li { margin-left: 48px; } .full-menu__depth1 > li + li::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 100%; background-color: #f1f3f5; top: 50%; transform: translateY(-50%); left: -24px; } .full-menu__depth2 { padding: 12px 4px; } .full-menu__depth2 > li { color: #343a40; } .full-menu__depth2 > li > a { display: block; padding: 4px 6px; } .full-menu__depth2 > li + li { margin-top: 4px; } .full-menu__depth2 > li:hover { color: #121210; } .full-menu__depth2 > li:hover > a { text-decoration: underline; } .header-trend { position: relative; margin-left: 32px; display: flex; justify-content: center; align-items: center; padding: 0 2px 0 8px; height: 32px; border-bottom: 1px solid #dee2e6; overflow: hidden; } .header-trend .search-trend { margin-right: 5px; } .search-trend { width: 216px; } .search-trend a { display: flex; align-items: center; } .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; width: 172px; } .search-trend .icon { margin-left: 4px; margin-top: 1px; } .search-trend__drop-down { display: none; position: absolute; width: 280px; top: 46px; left: -12px; flex-grow: 1; padding: 12px 12px 16px; background-color: #ffffff; z-index: 2; border-radius: 12px; border: 1px solid #f1f3f5; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .search-trend__drop-down-trigger { position: relative; width: 20px; height: 20px; font-size: 18px; } .search-trend__drop-down-trigger::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -5px 0 0 -4px; border: solid #7e8282; border-width: 1px 1px 0 0; transform: rotate(135deg); } .search-trend__drop-down-trigger.active { transform: rotate(180deg); margin-left: 0; margin-right: 5px; } .search-trend__drop-down-title { font-weight: 700; font-size: 18px; color: #0d0f12; margin-bottom: 12px; margin-left: 4px; } .search-trend__drop-down.active { display: block; } .search-trend__drop-down .search-trend { width: auto; padding: 0 8px; } .search-trend__drop-down .search-trend ul li .icon { flex-shrink: 0; } .search-trend__drop-down .search-trend ul li + li { margin-top: 12px; } .search-trend__drop-down .search-trend ul li:hover .search-trend__text { text-decoration: underline; } .search-trend__drop-down .search-trend__text { width: 196px; margin-right: auto; } .top-banner { position: relative; } .top-banner__btn-container { position: absolute; width: 1280px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; } .top-banner__close { position: absolute; top: 15px; right: 0; opacity: 0.75; pointer-events: auto; } .top-banner-slick { width: 1280px; margin: 0 auto; height: 50px; overflow: hidden; } .top-banner-slick .top-banner__image { width: 1280px; height: 50px; } .top-banner-slick .top-banner__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .sub-wrapper { min-width: 1336px; } .sub-content { width: 1276px; margin: 0 auto; padding-top: 32px; padding-bottom: 60px; } .sub-content .main-section__container { min-width: 0; } .sub-rl { display: flex; } .sub-left-menu { flex-shrink: 0; width: 184px; padding-left: 4px; margin-right: 36px; } .sub-left-menu__title { position: relative; font-size: 32px; font-weight: 700; color: #030507; padding-bottom: 20px; margin-bottom: 26px; } .sub-left-menu__title::before { content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 3px; background-color: #e9ecef; } .sub-left-menu__title::after { content: ""; position: absolute; bottom: 0; right: 0; display: block; width: 0; height: 0; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; border-left: 2px solid transparent; border-bottom: 2px solid transparent; } .sub-left-menu__list { position: relative; margin-bottom: 36px; } .sub-left-menu__list + .sub-left-menu__list::before { content: ""; position: absolute; display: block; width: 100%; height: 1px; top: -18px; background-color: #efefef; } .sub-left-menu__list-title { font-size: 20px; letter-spacing: -0.03em; font-weight: 700; color: #16191d; } .sub-left-menu__sub-list { margin-top: 12px; } .sub-left-menu__sub-list > li > a { display: inline-block; color: #495057; letter-spacing: -0.03em; padding: 4px 0; font-size: 15px; } .sub-left-menu__sub-list > li > a:hover { color: #0d0f12; } .sub-left-menu__sub-list > li > a.current { position: relative; font-weight: 500; } .sub-left-menu__sub-list > li > a.current::after { position: absolute; content: ""; display: block; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; right: -14px; top: 50%; transform: translateY(calc(-50% + 0px)) rotate(45deg); opacity: 0.75; } .sub-left-menu__sub-list.customer > li > a { font-size: 16px; } .sub-left-menu__sub-list.customer > li > a.current { position: relative; font-weight: 700; } .sub-left-menu__sub-list.customer > li > a.current::after { position: absolute; content: ""; display: block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; right: -15px; top: 50%; transform: translateY(calc(-50% + 1px)) rotate(45deg); opacity: 0.75; } .sub-left-menu__sub-list.customer > li + li { margin-top: 10px; } .sub-right-content { padding-top: 8px; flex-grow: 1; } .sub-right-content__title { font-size: 26px; font-weight: 700; padding-bottom: 54px; line-height: 1.3; letter-spacing: -0.03em; color: #16191d; } .sub-right-content__innerTitle { display: flex; align-items: center; font-size: 22px; font-weight: 700; padding-bottom: 20px; color: #16191d; } .sub-right-content__innerTitle__sub { font-size: 16px; font-weight: 500; color: #495057; margin-left: 4px; } .sub-right-content__innerTitleBtn { margin-left: 10px; } .sub-right-content__section { position: relative; margin-bottom: 56px; } .sub-right-content__section__btn { position: relative; display: flex; align-items: center; justify-content: space-between; } .sub-right-content__halfSection { position: relative; margin-bottom: 56px; display: flex; gap: 20px; } .sub-right-content__halfSection__section { position: relative; flex: 1; } .sub-right-content__more { position: absolute; display: inline-flex; align-items: center; color: #495057; top: 8px; right: 0; padding-right: 4px; font-size: 16px; font-weight: 400; } .sub-right-content__more::after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("../images/icon_subRightContent_more.png"); background-size: cover; background-repeat: no-repeat; margin-left: 3px; } .sub-right-content__more:hover { text-decoration: underline; text-decoration-color: #868e96; } .sub-board__top-btn-container { position: absolute; top: -10px; right: 2px; transform: translateY(-100%); display: flex; justify-content: flex-end; } .form-control-container { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 16px; padding: 0 2px; } .form-control-container .left, .form-control-container .center, .form-control-container .right { display: flex; justify-content: center; align-items: center; gap: 4px; } .form-control-container .center { margin: 0 auto; } .form-control-container__top-right { position: absolute; top: 20px; right: 30px; } .form-control-container--subList { margin-bottom: 32px; } .search-number__text { color: #343a40; margin-right: 5px; font-size: 16px; } .search-number__text strong { font-weight: 700; color: #228be6; } .search-number__text em { font-style: normal; font-weight: 500; color: #212529; } .page-title { margin-bottom: 60px; margin-top: 16px; letter-spacing: -0.01em; } .page-title__title { font-size: 36px; color: #16191d; font-weight: 700; margin-bottom: 20px; } .page-title__title--searchResult { font-weight: 500; } .page-title__title--searchResult em { font-style: normal; font-weight: 700; color: #212529; } .page-title__subTitle { font-size: 14px; color: #7e8282; } .page-title__logo { display: inline-block; } .page-title.center { text-align: center; } .upperFooter { min-width: 1336px; } .upperFooter__inner { display: flex; justify-content: center; align-items: center; width: 1276px; height: 40px; margin-inline: auto; text-align: center; background-color: #f1f3f5; border: 1px solid #e9ecef; margin-bottom: 20px; border-radius: 4px; color: #495057; gap: 8px; } .upperFooter__info { text-decoration: underline; text-decoration-color: #868e96; } .footer { min-width: 1336px; } .footer-top { min-width: 1336px; border-top: 2px solid #868e96; background-color: #f8f9fa; } .footer-top__inner { display: flex; align-items: center; width: 1276px; height: 56px; margin: 0 auto; } .footer-top__link { display: flex; height: 100%; align-items: center; margin-right: auto; } .footer-top__link li + li { margin-left: 100px; } .footer-top__link a { display: block; font-size: 16px; color: #495057; height: 56px; line-height: 56px; } .family-site-link li.disabled { display: none; } .family-site-link.nice-select .list { top: auto; 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; } .footer-body { border-top: 1px solid #dee2e6; } .footer-body__inner { position: relative; width: 1276px; margin: 0 auto; padding: 40px 0; } .footer-body__text01 { font-weight: 500; color: #495057; font-size: 15px; } .footer-body__text02 { font-size: 14px; color: #495057; font-weight: 300; line-height: 2; margin-top: 12px; } .footer-body__text02 a { font-weight: 400; text-decoration: underline; } .footer-body__text03 { font-size: 13px; color: #868e96; font-weight: 300; margin-top: 12px; } .footer-body__text03 a { font-weight: 400; text-decoration: underline; margin-left: 8px; } .footer-image-container { position: absolute; top: 36px; right: 0; } .footer-image-container__misc { display: flex; align-items: center; margin-top: 20px; justify-content: flex-end; gap: 12px; } main { padding-bottom: 72px; position: relative; } .main-section { position: relative; padding: 48px 0; } .main-section .main-banner__btn-container { pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: flex; justify-content: space-between; width: 1492px; } .main-section .main-banner__btn-container button { pointer-events: auto; } .main-section .main-banner .slick-dots li button:before { font-size: 12px; } .main-section .main-banner .slick-dots li:not(.slick-active) button:hover:before, .main-section .main-banner .slick-dots li:not(.slick-active) button:focus:before { opacity: 0.35; } .main-section__main-banner { padding: 30px 0 0; height: 580px; overflow: hidden; } .main-section__main-banner .slick-slide { padding: 0 0 40px; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .main-section__main-banner .slick-slide img { border-radius: 15px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); -o-object-fit: cover; object-fit: cover; width: 1280px; height: 480px; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .main-section__main-banner .slick-slide.slick-center { position: relative; z-index: 13; } .main-section__main-banner .slick-slide img, .main-section__main-banner .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] img { filter: blur(2px) grayscale(0.2); transition: all 0.3s ease-in-out; transform: scale(0.8); } .main-section__main-banner .slick-center img, .main-section__main-banner .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] img { transform: scale(1); filter: none; } .main-section__main-banner .slide-track, .main-section__main-banner .slick-list { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .main-section__main-banner .slick-list { width: 1336px; margin: 0 auto; overflow: visible; } .main-section__container { min-width: 1336px; } .main-section__container > .main-section { width: 1276px; margin: 0 auto; } .main-section__container.time-sale { background-repeat: no-repeat; background-position: top center; margin: 48px 0 0; } .main-section__container.time-sale .main-section__time-sale { position: relative; } .main-section__container.time-sale .main-section__time-sale .main-section-header { position: absolute; top: 28px; left: 0; } .main-section__container.time-sale .main-section-header { opacity: 0; } .main-section__container.time-sale.no-bg { background-image: none; } .main-section__container.time-sale.no-bg .main-section-header { opacity: 1; } .main-section__container.TwoXTwo-type { background-repeat: no-repeat; background-position: top center; height: 320px; margin: 48px 0 364px; } .main-section__container.TwoXTwo-type.no-bg { background-image: none; } .main-section__container.product-banner { background-repeat: no-repeat; background-position: top center; margin-top: 48px; } .main-section__container.product-banner.no-bg { background-image: none; } .main-section__container.magazine { margin-top: 48px; background-color: #f8f9fa; } .main-section__small-banner01 { padding: 24px 0; } .main-section__small-banner02 { padding: 24px 0; } .main-section__TwoXTwo-type { display: flex; justify-content: space-between; } .main-section__TwoXTwo-type > .TwoXTwo-left { width: 628px; } .main-section__TwoXTwo-type > .TwoXTwo-right { width: 628px; } .main-section__product-banner { padding: 48px 0 82px; } .main-section__magazine { position: relative; padding: 48px 0 52px; } .main-section .product-list-type1__list { padding-top: 32px; } .main-section-header { display: flex; align-items: flex-start; margin-bottom: 40px; position: relative; } .main-section-title__description { display: block; font-size: 18px; color: #7e8282; letter-spacing: -0.035em; line-height: 26px; } .main-section-title__title { display: flex; align-items: flex-end; font-size: 36px; font-weight: 700; letter-spacing: -0.035em; line-height: 44px; gap: 4px; color: #16191d; } .main-section-title__title > .icon { flex-shrink: 0; margin-bottom: 3px; } .category-type-tab { position: absolute; top: 0; right: 0; } .category-type-tab__list { display: flex; } .category-type-tab__list li + li { margin-left: 28px; } .category-type-tab__btn { display: flex; flex-direction: column; align-items: center; min-width: 92px; } .category-type-tab__btn.active .category-type-tab__name { color: #1a1a1a; font-weight: 500; } .category-type-tab__name { margin-top: 12px; font-size: 15px; letter-spacing: -0.03em; color: #979b9d; line-height: 16px; text-align: center; } .brand-link { display: flex; justify-content: space-between; } .brand-link img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .brand-link .left { width: 620px; height: 400px; overflow: hidden; border-radius: 6px; } .brand-link .right { width: 620px; height: 400px; display: flex; flex-direction: column; justify-content: space-between; } .brand-link .right .first { width: 100%; height: 180px; border-radius: 6px; overflow: hidden; } .brand-link .right .second { width: 100%; height: 180px; border-radius: 6px; overflow: hidden; } .time-sale { margin-top: 84px; } .time-sale .wrapper { width: calc(100% + 30px); padding: 0 15px; margin-left: -15px; overflow: hidden; -webkit-clip-path: inset(0 0 0 3px); clip-path: inset(0 0 0 3px); } .time-sale__top { background-color: #212529; position: absolute; height: 40px; width: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 1; } .time-sale__top .time { font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; } .time-sale__top .left { margin-left: 12px; margin-top: 2px; font-size: 16px; } .time-sale-slick__btn-container { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: flex; justify-content: space-between; width: 1336px; z-index: 11; pointer-events: none; } .time-sale-slick__btn-container button { pointer-events: auto; } .small-banner01 { width: 100%; height: 130px; border-radius: 7px; overflow: hidden; } .small-banner01 .slick-dots { bottom: 4px; } .small-banner01 .slick-dots li:not(.slick-active) button:hover:before, .small-banner01 .slick-dots li:not(.slick-active) button:focus:before { opacity: 0.35; } .small-banner01__btn-container { top: 70px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 1268px; z-index: 11; pointer-events: none; } .small-banner01__btn-container button { pointer-events: auto; opacity: 0.8; } .small-banner02 { overflow: hidden; } .small-banner02 .slick-dots { bottom: 4px; } .small-banner02 .slick-list { width: 1920px; height: 160px; margin: 0 auto; } .small-banner02 .slick-dots li:not(.slick-active) button:hover:before, .small-banner02 .slick-dots li:not(.slick-active) button:focus:before { opacity: 0.35; } .small-banner02__btn-container { top: 84px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 1268px; z-index: 11; pointer-events: none; } .small-banner02__btn-container button { pointer-events: auto; opacity: 0.8; } .product-tab { box-shadow: inset 0 -2px 0 0 #dee2e6; margin-bottom: 32px; } .product-tab ul { display: flex; } .product-tab__btn { height: 60px; padding: 0 20px; min-width: 100px; text-align: center; font-size: 18px; font-weight: 500; color: #868e96; } .product-tab__btn.active { color: #212529; border-bottom: 2px solid #868e96; } .TwoXTwo-left__container, .TwoXTwo-right__container { position: relative; background-color: #ffffff; width: 100%; height: 468px; border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); padding: 34px 72px; } .TwoXTwo-left-slick__btn-container, .TwoXTwo-right-slick__btn-container { top: 140px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 608px; z-index: 11; pointer-events: none; } .TwoXTwo-left-slick__btn-container button, .TwoXTwo-right-slick__btn-container button { pointer-events: auto; } .exhibition { display: flex; justify-content: space-between; } .exhibition__left { width: 510px; } .exhibition__right { width: 732px; } .exhibition__image { width: 100%; height: 700px; border-radius: 8px; overflow: hidden; } .exhibition__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .exhibition .product-list-type2 { margin-top: -48px; } .exhibition__description { margin-top: 16px; } .exhibition__description-title { font-size: 24px; letter-spacing: -0.035em; color: #0d0f12; font-weight: 700; line-height: 32px; } .exhibition__description-subtitle { display: block; font-size: 18px; letter-spacing: -0.035em; color: #7e8282; line-height: 24px; margin-top: 12px; } .product-banner { display: flex; justify-content: space-between; } .product-banner__left { width: 410px; } .product-banner__right { position: relative; width: 848px; } .product-banner__image { width: 100%; height: 410px; border-radius: 8px; overflow: hidden; } .product-banner__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-banner-slick { padding: 0 52px; } .product-banner-slick .slick-slide { margin: 0 8px; } .product-banner-slick .slick-list { margin: 0 -8px; } .product-banner-slick__btn-container { top: 104px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 856px; z-index: 11; pointer-events: none; } .product-banner-slick__btn-container button { pointer-events: auto; } .four-row-slick__btn-container { top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 20px)); position: absolute; display: flex; justify-content: space-between; width: 1336px; z-index: 11; pointer-events: none; } .four-row-slick__btn-container button { pointer-events: auto; } .best-review__item { width: 380px; } .best-review__product { display: flex; align-items: center; padding: 20px 0; border: 1px solid #dee2e6; border-width: 1px 0; margin-top: 28px; width: 380px; } .best-review__product .product-unit-info { margin-top: 0; margin-left: 12px; } .best-review__title { display: block; font-size: 24px; line-height: 36px; color: #030507; font-weight: 700; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .best-review__paragraph { font-size: 17px; color: #343a40; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 24px; height: 72px; margin-top: 8px; } .best-review__review-image { width: 380px; height: 380px; } .best-review__review-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px; } .best-review__product-image { width: 100px; height: 100px; } .best-review__product-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .best-review .product-unit-title { width: 268px; } .best-review-slick .slick-slide { margin: 0 68px 0 0; } .best-review-slick .slick-list { margin: 0 -68px 0 0; } .best-review-slick__btn-container { top: 332px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 1336px; z-index: 11; pointer-events: none; } .best-review-slick__btn-container button { pointer-events: auto; } .quick-menu { position: sticky; top: 40px; display: flex; flex-direction: column; align-items: center; } .quick-menu__wrapper { position: absolute; top: 780px; left: 50%; transform: translateX(720px); bottom: 0; padding-bottom: 116px; } .quick-menu__group { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 312px; border-radius: 72px; border: 1px solid #dee2e6; background-color: #ffffff; } .quick-menu__group button { display: flex; flex-direction: column; text-align: center; align-items: center; font-weight: 500; letter-spacing: -0.035em; color: #343a40; font-size: 13px; } .quick-menu__group button span { margin-top: 8px; } .quick-menu__group button + button { margin-top: 16px; } .quick-menu__group button .icon { position: relative; } .quick-menu__recentProduct { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 110px; padding: 20px 0 40px; border-radius: 16px; border: 1px solid #dee2e6; background-color: #ffffff; min-height: 120px; } .quick-menu__recentProduct__title { font-size: 13px; font-weight: 400; color: #0d0f12; margin-bottom: 12px; } .quick-menu__customer-service { position: relative; } .quick-menu__customer-service__num { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 24px; line-height: 1; font-weight: 700; color: #212529; } .quick-menu > * + * { margin-top: 16px; } .recentProductSlick { width: 100%; } .recentProductSlick .slick-slide > a { display: block; margin-bottom: 10px !important; border-radius: 4px; overflow: hidden; width: 56px; height: 56px; margin-inline: auto; } .recentProductSlick__next, .recentProductSlick__prev { font-size: 0; } .recentProductSlick__next .icon, .recentProductSlick__prev .icon { width: 20px; height: 20px; } .recentProductSlick__index { font-size: 13px; } .recentProductSlick__btn-container { display: flex; align-items: center; position: absolute; bottom: 12px; gap: 6px; } .magazine { position: relative; } .magazine__more-link { top: 88px; right: 0; position: absolute; font-size: 18px; } .magazine-slick { padding: 30px 0 0; } .magazine-slick .slick-slide { margin: 0 -22px; } .magazine-slick .slick-slide { padding: 0 0 40px; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .magazine-slick .slick-slide img { border-radius: 15px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); -o-object-fit: cover; object-fit: cover; width: 500px; height: 360px; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .magazine-slick .slick-slide img, .magazine-slick .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] img { opacity: 0.4; transition: all 0.3s ease-in-out; transform: scale(0.72); } .magazine-slick .slick-center img, .magazine-slick .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] img { transform: scale(1); opacity: 1; } .magazine-slick .slide-track, .magazine-slick .slick-list { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .magazine-slick__btn-container { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: flex; justify-content: space-between; width: 1336px; z-index: 11; pointer-events: none; } .magazine-slick__btn-container button { pointer-events: auto; } .sns { display: flex; justify-content: space-between; flex-wrap: wrap; } .sns__image { width: 412px; height: 412px; border-radius: 6px; overflow: hidden; } .sns__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .notice { display: flex; justify-content: space-between; flex-wrap: wrap; } .notice__box { width: 412px; height: 372px; border-radius: 10px; border: 1px solid #e9ecef; text-align: center; padding-top: 44px; } .notice__title { font-size: 36px; font-weight: 700; color: #343a40; line-height: 36px; margin-top: 16px; } .notice__title.customer-service { font-size: 32px; } .notice__description { display: block; font-size: 16px; letter-spacing: -0.035em; color: #868e96; margin-top: 12px; } .notice__number { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 36px; } .notice__paragraph { font-size: 15px; margin-top: 12px; } .notice__text01 { font-weight: 500; color: #1971c2; } .notice__text02 { color: #868e96; } .notice__text03 { color: #495057; } .notice-line { display: flex; align-items: center; width: 592px; height: 44px; background-color: #eeeeee; border-radius: 5px; padding: 0 12px; margin-left: 36px; margin-top: 4px; } .notice-line .text { font-size: 16px; letter-spacing: -0.035em; color: #030507; margin-right: auto; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice-line .date { font-size: 16px; font-weight: 300; letter-spacing: -0.035em; flex-shrink: 0; } .notice-line .btn-container { display: flex; margin-left: 8px; margin-top: 4px; } .notice-line > .icon { flex-shrink: 0; } .notice-line-slick { width: 480px; } .notice-line-slick .slick-slide { display: flex !important; gap: 8px; } .product-bundle-list { display: flex; justify-content: space-between; } .product-bundle-list__left { width: 412px; } .product-bundle-list__right { position: relative; width: 844px; } .product-bundle-list__image { width: 100%; height: 388px; } .product-bundle-list__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-bundle-list__category { display: inline-block; border-radius: 10px; width: 304px; margin-left: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); background-color: #f9f9f9; } .product-bundle-list__category li { width: 100%; } .product-bundle-list__category li:first-child button { border-radius: 10px 10px 0 0; } .product-bundle-list__category li:last-child button { border-radius: 0 0 10px 10px; } .product-bundle-list__category button { width: 100%; font-size: 18px; font-weight: 500; letter-spacing: -0.035em; color: #979b9d; min-height: 58px; padding: 0 40px; background-color: #f9f9f9; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; line-height: 1.2; } .product-bundle-list__category button:hover { background-color: #f5f5f5; } .product-bundle-list__category button.active { width: 332px; position: relative; left: -12px; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); padding-left: 50px; } .product-bundle-list__category button.active:hover { background-color: #ffffff; } .product-bundle-list.category-select .product-bundle-list__right { width: 910px; } .product-bundle-list.category-select .product-list-type2 { display: none; } .product-bundle-list.category-select .product-list-type2.active { display: block; } .product-bundle-list.category-select .product-bundle-list-slick__btn-container { width: 920px; } .product-bundle-list.category-select .product-bundle-list-slick .slick-slide { margin: 0 24px; } .product-bundle-list.category-select .product-bundle-list-slick .slick-list { margin: 0 -24px; } .product-bundle-list-slick { padding: 0 60px; } .product-bundle-list-slick .slick-slide { margin: 0 12px; } .product-bundle-list-slick .slick-list { margin: 0 -12px; } .product-bundle-list-slick__btn-container { top: 104px; left: 50%; transform: translateX(-50%); position: absolute; display: flex; justify-content: space-between; width: 852px; z-index: 11; pointer-events: none; } .product-bundle-list-slick__btn-container button { pointer-events: auto; } .product-bundle-list-slick .product-unit-info { height: 156px; } .member-rank-summary { margin-bottom: 40px; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 5px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05); } .member-rank-summary__top { display: flex; align-items: center; min-height: 70px; padding: 14px 28px; } .member-rank-summary__bottom { display: flex; align-items: center; min-height: 108px; padding-right: 28px; border-top: 1px solid #e9ecef; } .member-rank-summary__user { display: inline-flex; align-items: center; margin-right: auto; } .member-rank-summary__rank { display: inline-flex; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.035em; margin-right: 10px; color: #666968; } .member-rank-summary__rank::before { content: ""; display: inline-block; width: 35px; height: 35px; background-size: cover; margin-right: 8px; } .member-rank-summary__rank.gold { color: #fab005; } .member-rank-summary__rank.gold:before { background-image: url("../images/icon_member-gold.png"); } .member-rank-summary__rank.silver { color: #BDCACF; } .member-rank-summary__rank.silver:before { background-image: url("../images/icon_member-silver.png"); } .member-rank-summary__rank.vip { color: #4dabf7; } .member-rank-summary__rank.vip:before { background-image: url("../images/icon_member-vip.png"); } .member-rank-summary__rank.premium { color: #862e9c; } .member-rank-summary__rank.premium:before { background-image: url("../images/icon_member-premium.png"); } .member-rank-summary__rank.welcome { color: #78B857; } .member-rank-summary__rank.welcome:before { background-image: url("../images/icon_member-welcome.png"); } .member-rank-summary__rank2 { display: inline-flex; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.035em; margin-right: 10px; color: #16191d; } .member-rank-summary__rank2 img { display: inline-block; width: 35px; height: 35px; background-size: cover; margin-right: 8px; } .member-rank-summary__name { font-size: 22px; font-weight: 700; letter-spacing: -0.035em; color: #0d0f12; } .member-rank-summary__name .append { font-size: 17px; font-weight: 500; } .member-rank-summary__benefit-link { color: #343a40; font-weight: 500; font-size: 16px; letter-spacing: -0.035em; padding: 2px 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; padding-right: 16px; } .member-rank-summary__summary-item { display: flex; align-items: center; padding: 0 32px; } .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-description { margin-left: 16px; } .member-rank-summary__summary-name { font-weight: 500; color: #343a40; } .member-rank-summary__summary-numberContainer { display: flex; align-items: center; line-height: 1.2; } .member-rank-summary__summary-number { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: #16191d; } .member-rank-summary__summary-numberUnit { font-size: 16px; color: #495057; margin-left: 2px; margin-top: 3px; } .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; background-color: #f9f9f9; border-radius: 4px; min-height: 128px; } .orderProgress__list { display: flex; gap: 120px; } .orderProgress__list li { text-align: center; position: relative; } .orderProgress__list li + li::before { position: absolute; content: ""; display: inline-block; width: 12px; height: 12px; border-top: 1px solid #979b9d; border-right: 1px solid #979b9d; top: 16px; left: -68px; transform: rotate(45deg); } .orderProgress__list li.current .orderProgress__text { font-weight: 500; color: #252521; } .orderProgress__num { display: block; font-size: 40px; line-height: 1; margin-bottom: 16px; font-weight: 700; color: #7e8282; } .orderProgress__text { display: block; font-size: 16px; color: #50514f; } .orderList { padding-top: 20px; margin-bottom: 56px; } .orderList__item { border: 1px solid #f1f3f5; border-radius: 6px; overflow: hidden; padding: 20px 20px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04); } .orderList__item + .orderList__item { margin-top: 16px; } .orderList__item__top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .orderList__item__inner { display: flex; align-items: center; gap: 14px; } .orderList__image { border-radius: 4px; overflow: hidden; width: 96px; height: 96px; flex-shrink: 0; } .orderList__description { display: flex; align-items: center; width: 100%; gap: 4px; } .orderList__description__first { width: 52%; margin-bottom: 15px; } .orderList__description__second { flex: 1; text-align: center; } .orderList__description__third { flex: 1; text-align: center; } .orderList__description__fourth { flex: 1; text-align: center; } .orderList__description:has(.orderList__btnControls) .orderList__description__first { width: 48%; } .orderList__description:has(.orderList__btnControls):has(.orderList__regularDelivery) .orderList__description__first { width: 52%; } .orderList__orderNum { font-size: 15px; color: #7e8282; } .orderList__date { font-size: 15px; color: #7e8282; } .orderList__productTitle { display: block; font-size: 18px; font-weight: 500; color: #030507; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .orderList__option { display: block; font-size: 13px; line-height: 20px; color: #868e96; } .orderList__price { margin-right: 8px; font-size: 18px; font-weight: 500; color: #212529; } .orderList__mileage { font-size: 14px; color: #495057; } .orderList__refundCategory { font-size: 15px; font-weight: 500; color: #343a40; } .orderList__status { font-size: 16px; font-weight: 500; color: #343a40; } .orderList__status.delivery { color: #1971c2; } .orderList__status.complete { color: #2f9e44; } .orderList__status.cancel { color: #979b9d; } .orderList__status + .orderList__btnControls { margin-top: 8px; } .orderList__dot { color: #7e8282; } .orderList__orderQuantity { font-size: 15px; color: #50514f; } .orderList__reviewDeadline { font-size: 14px; color: #f03e3e; } .orderList__regularDelivery { font-size: 15px; color: #212529; font-weight: 500; } .orderList__regularDelivery .misc { font-size: 14px; font-weight: 400; color: #666968; } .orderList__btnControls { display: flex; flex: 1; flex-direction: column; align-items: flex-end; gap: 5px; margin-inline: auto; } .orderList__btnControls .btn { width: 114px; height: 34px; } .orderList__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .orderList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .mypagePostList { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e9ecef; border-radius: 6px; padding: 20px 16px; min-height: 300px; } .mypagePostList__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .mypagePostList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .mypagePostList__item { display: flex; gap: 8px; } .mypagePostList__item + .mypagePostList__item { border-top: 1px solid #f1f3f5; padding-top: 18px; } .mypagePostList__text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 26px; text-overflow: ellipsis; margin-right: auto; } .mypagePostList__text .category { color: #868e96; font-weight: 500; } .mypagePostList__badge { flex-shrink: 0; font-size: 13px; display: inline-block; color: #868e96; font-weight: 500; height: 26px; line-height: 26px; padding: 0 10px; border-radius: 32px; border: 1px solid #868e96; } .mypagePostList__badge.complete { color: #1c7ed6; border-color: #1c7ed6; } .orderDetail__title { display: flex; align-items: center; min-height: 48px; font-size: 20px; font-weight: 700; color: #343a40; letter-spacing: -0.03em; padding: 12px; border-radius: 6px; background-color: #f8f9fa; border: 1px solid #f1f3f5; margin-bottom: 10px; } .orderDetail__titleNum { font-size: 16px; font-weight: 400; margin-left: 10px; color: #666968; } .orderDetail__table { padding: 16px 0; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .orderDetail__table > .table { border-top: none; } .orderDetail__table > .table tr { border-bottom: none; } .orderDetail__table > .table th { background-color: transparent; height: 40px; padding: 6px 16px; vertical-align: top; } .orderDetail__table > .table td { background-color: transparent; height: 40px; padding: 6px 10px; vertical-align: top; } .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 .textInfo { margin-top: 20px; margin-left: 16px; } .orderDetail__table .textInfo ~ .textInfo { margin-top: 10px; } .orderDetail__thText { display: flex; align-items: center; height: 100%; max-height: 48px; } .orderDetail__paymentTable { display: flex; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .orderDetail__paymentTable > .table { display: block; width: 50%; border-top: none; margin-top: 20px; margin-bottom: 20px; } .orderDetail__paymentTable > .table tr { border-bottom: none; } .orderDetail__paymentTable > .table th { background-color: transparent; height: 40px; padding: 6px 16px; vertical-align: top; } .orderDetail__paymentTable > .table td { background-color: transparent; height: 40px; padding: 6px 10px; vertical-align: top; } .orderDetail__paymentTable .textInfo { margin-top: 20px; margin-left: 16px; } .orderDetail__orderPrice { width: 50%; padding: 28px 24px; background-color: #f8fafb; } .orderDetail__orderPrice .cartOrderBox__list > li.cartOrderBox__miscItem { background-color: transparent; padding: 2px 0px; } .orderDetail__orderPrice .cartOrderBox__list > li.cartOrderBox__miscItem.first { padding-top: 0; border-radius: 0; } .orderDetail__orderPrice .cartOrderBox__list > li.cartOrderBox__miscItem.last { padding-bottom: 0; border-radius: 0; } .orderDetail__orderPrice .cartOrderBox__total { margin-bottom: 0; } .orderDetail__orderPrice .cartOrderBox__totalTh { font-size: 20px; font-weight: 700; } .orderDetail__date { color: #868e96; } .orderDetail__deduction { font-size: 13px; color: #7e8282; margin-left: 4px; margin-right: 12px; } .orderDetail__waiting { font-size: 14px; font-weight: 500; color: #50514f; margin-right: 4px; } .orderRefundPop { padding-right: 8px; } .orderRefundPop__orderNum { font-size: 15px; font-weight: 500; color: #16191d; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 12px; border-radius: 6px; margin-bottom: 40px; } .orderRefundPop__table td .select-box { display: inline-block; } .orderRefundPop .table-wrapper { margin-bottom: 40px !important; } .cartOrder__list .table.vertical.orderRefundPop__table td { padding: 16px 5px; } .orderRefundReason { border-top: 1px solid #868e96; padding-top: 24px; margin-bottom: 32px; } .orderRefundReason__title { font-size: 16px; margin-bottom: 10px; font-weight: 700; color: #16191d; } .orderRefundReason__item { margin-bottom: 24px; } .orderRefundReason__item .select-box { height: 50px; } .orderRefundReason__item .nice-select { height: 50px; line-height: 48px; } .orderRefundReason__itemTitle { display: block; color: #666968; font-size: 15px; font-weight: 500; padding-left: 6px; margin-bottom: 6px; } .orderRefundSubAsk { display: flex; background-color: #e7f5ff; padding: 12px; border-radius: 6px; margin-bottom: 20px; } .orderRefundSubAsk__title { font-size: 16px; font-weight: 500; color: #1971c2; margin-right: 12px; } .infoBox { background-color: #f8f9fa; border-radius: 6px; padding: 16px 18px; 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: 14px; color: #50514f; margin-bottom: 12px; } .infoBox__list { margin-bottom: 16px; } .infoBox__list li { position: relative; font-size: 14px; color: #50514f; margin-bottom: 8px; 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: #666968; } .infoBox em { font-style: normal; color: #f03e3e; font-weight: 500; } .infoBox i { font-style: normal; color: #3a3a37; font-weight: 500; } .couponList { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 20px; column-gap: 20px; row-gap: 26px; padding: 20px 0; margin-bottom: 40px; } .couponList__item { display: flex; width: 100%; min-height: 188px; } .couponList__left { width: 296px; padding: 20px 32px; flex-shrink: 0; border-radius: 8px; border: 1px solid #dee2e6; border-right: 1px dashed #dee2e6; } .couponList__title { font-size: 18px; font-weight: 700; color: #1971c2; margin-bottom: 16px; } .couponList__subTitle { font-size: 14px; color: #343a40; } .couponList__date { font-size: 15px; color: #868e96; margin-bottom: 28px; } .couponList__dayLeft { font-size: 13px; color: #e03131; } .couponList__checkBtn { font-size: 15px !important; font-weight: 500; } .couponList__right { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 32px; gap: 18px; border-radius: 8px; border: 1px solid #dee2e6; border-left: 0; } .couponList__image { width: 96px; height: 96px; 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: 15px; 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; } .passwordCheck { display: flex; flex-direction: column; align-items: center; padding: 52px 0; border: 1px solid #e9ecef; border-radius: 6px; } .passwordCheck__title { font-size: 24px; font-weight: 700; color: #212529; margin-bottom: 20px; } .passwordCheck__text { font-size: 16px; color: #50514f; text-align: center; margin-bottom: 40px; } .passwordCheck .input-text { width: 100%; max-width: 360px; height: 56px; font-size: 16px; padding-left: 12px; margin-bottom: 40px; } .passwordCheck__btn { width: 100%; max-width: 360px; } .editAccount__table { padding: 16px 0; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .editAccount__table > .table { border-top: none; } .editAccount__table > .table tr { border-bottom: none; } .editAccount__table > .table th { background-color: transparent; height: 40px; padding: 12px 16px; vertical-align: top; } .editAccount__table > .table td { background-color: transparent; height: 40px; padding: 12px 10px; vertical-align: top; } .editAccount__table > .table .inputWithBtn .btn { flex-shrink: 0; height: 48px; } .editAccount__table > .table .inputHalf { max-width: 320px; } .editAccount__table > .table .inputHalf .nice-select { height: 48px; line-height: 46px; font-size: 16px; } .editAccount__table > .table .inputAddress .input-text { max-width: 420px; } .editAccount__table > .table .inputAddress__postalCode { max-width: 320px; } .editAccount__table > .table .inputAddress__postalCode .input-text { margin-bottom: 0; } .editAccount__table > .table .inputAddress__postalCode .btn { height: 48px; flex-shrink: 0; } .editAccount__table .textInfo { margin-top: 20px; margin-left: 16px; } .editAccount__table .input-text { font-size: 16px; padding-left: 12px; height: 48px; max-width: 320px; } .editAccount__table .phoneAuth { max-width: 420px; margin-top: 16px; } .editAccount__table .phoneAuth .input-text { margin-bottom: 0px; height: 48px; width: 100%; padding-left: 10px; } .editAccount__table .phoneAuth .inputWithBtn { margin-bottom: 4px; } .editAccount__table .phoneAuth .inputWithBtn .btn { height: 48px; } .editAccount__table .phoneAuth .inputTimer { flex-grow: 1; } .editAccount__table .phoneAuth .btn.lg { height: 50px; } .editAccount__table .infoBox { margin-top: 16px; } .editAccount__title { display: flex; align-items: center; height: 100%; max-height: 48px; } .editAccount__text { display: inline-flex; height: 100%; max-height: 48px; align-items: center; margin-right: 8px; } .editAccount__innerBox { max-width: 420px; display: flex; flex-direction: column; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 16px; border-radius: 4px; } .editAccount__innerBox .input-text { margin-bottom: 8px; height: 48px; font-size: 14px; padding-left: 10px; max-width: none; } .editAccount__innerBox .btn.lg { height: 50px; } .editAccount__innerBox:has(.inputEmail) { max-width: 500px; } .editAccount__editContent { margin-top: 16px; } .editAccount__innerBtnContainer { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; } .editAccount__switch { display: flex; gap: 16px; } .editAccount__switch .toggle-switchy .label { font-size: 14px; } .editAccount__switch .toggle-switchy.kakao > input:checked + .toggle { background: #FEE500; } .editAccount__switch .toggle-switchy.kakao > input:checked + .toggle > .switch { border: 3px solid #FEE500; } .editAccount__switch .toggle-switchy.kakao > input + .toggle:before { color: #191919; } .editAccount__switch .toggle-switchy.naver > input:checked + .toggle { background: #03c75a; } .editAccount__switch .toggle-switchy.naver > input:checked + .toggle > .switch { border: 3px solid #03c75a; } .editAccount__check { margin-top: 12px; } .editAccount__bottom { margin-top: 48px; padding-right: 12px; padding-bottom: 12px; text-align: right; } .editAccount__deleteLink { position: relative; display: inline-block; font-size: 16px; margin-top: 8px; color: #50514f; font-weight: 500; padding: 8px 16px; background-color: #ffffff; border: 1px solid #ced4da; border-radius: 4px; } .editAccount__deleteLink:hover { background-color: #fafafa; } .editAccount__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; } .editAccount .inputEmail .select-box { margin-bottom: 8px; } .editAccount .inputEmail .nice-select { width: 142px; height: 48px; line-height: 46px; } .multiDeliveryStatus { display: flex; align-items: flex-end; margin-bottom: 24px; border-bottom: 1px solid #495057; padding: 0 2px 16px; } .multiDeliveryStatus__title { font-size: 20px; font-weight: 500; color: #16191d; margin-right: auto; } .multiDeliveryStatus__title em { font-style: normal; color: #1c7ed6; font-weight: 700; } .modal-content .multiDeliveryStatus { padding: 0 2px 10px; } .modal-content .multiDeliveryStatus__title { font-size: 14px; color: #7e8282; } .modal-content .multiDeliveryStatus__title em { font-style: normal; color: #1c7ed6; font-weight: 500; } .modal-content .multiDeliveryStatus__numTitle { font-size: 18px; color: #16191d; font-weight: 700; margin-right: 8px; } .multiDeliveryInfo { padding: 20px 2px 20px; border-bottom: 1px solid #868e96; margin-bottom: 20px; } .multiDeliveryInfo__info { margin-bottom: 10px; } .multiDeliveryInfo__title { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #16191d; padding-bottom: 16px; padding-left: 2px; } .multiDeliveryInfo__description { display: flex; align-items: center; padding-left: 4px; } .multiDeliveryInfo__name { font-size: 18px; font-weight: 500; color: #16191d; } .multiDeliveryInfo__address { position: relative; font-size: 14px; color: #495057; padding-left: 20px; margin-right: 12px; } .multiDeliveryInfo__address::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 14px; background-color: #dee2e6; top: 50%; left: 10px; transform: translateY(-50%); } .multiDeliveryInfo__detailBtn::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1px solid #495057; border-bottom: 1px solid #495057; transform: rotate(45deg); margin-left: 4px; margin-bottom: 3px; } .multiDeliveryInfo__detailBtn.opened::after { transform: rotate(-135deg); margin-bottom: 0; margin-top: 3px; } .multiDeliveryInfo__table { padding: 14px 8px; border: 1px solid #ededed; border-radius: 6px; width: 680px; margin-top: 10px; margin-bottom: 20px; } .multiDeliveryInfo__table > .table { border-top: none; } .multiDeliveryInfo__table > .table tr { border-bottom: none; } .multiDeliveryInfo__table > .table th { background-color: transparent; height: 32px; padding: 4px 16px; vertical-align: top; font-size: 14px; } .multiDeliveryInfo__table > .table td { background-color: transparent; height: 32px; padding: 4px 10px; vertical-align: top; font-size: 14px; } .multiDeliveryInfo__table .textInfo { margin-top: 20px; margin-left: 16px; } .multiDeliveryInfo__subTitle { font-size: 18px; font-weight: 700; color: #212529; margin-bottom: 12px; padding-bottom: 12px; padding-left: 10px; border-bottom: 1px solid #ededed; } .multiDeliveryInfo .textInfo { margin-top: 20px; margin-left: 16px; } .addressManage__header { display: flex; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid #495057; } .addressManage__title { font-size: 20px; font-weight: 700; color: #212529; margin-right: auto; } .addressManage__btnContainer { text-align: right; } .addressManage__list { border-bottom: 1px solid #dee2e6; } .addressManage__item { 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: 18px; 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: 15px; color: #868e96; margin-bottom: 10px; } .addressManage__itemAddress { font-size: 16px; color: #212529; } .addressManage__itemControls { display: inline-flex; gap: 4px; } .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; } .mileageStatus { border: 1px solid #e9ecef; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; padding: 32px 0 32px; margin-bottom: 32px; } .mileageStatusCurrent { display: flex; align-items: flex-end; margin-bottom: 24px; } .mileageStatusCurrent svg { width: 62px; margin-right: 10px; } .mileageStatusCurrent__title { display: inline-block; font-size: 20px; font-weight: 500; color: #16191d; margin-bottom: 10px; margin-right: 6px; } .mileageStatusCurrent__number { display: inline-block; font-size: 40px; font-weight: 700; color: #16191d; letter-spacing: -0.032em; margin-right: 4px; } .mileageStatusCurrent__unit { display: inline-block; font-size: 16px; font-weight: 500; color: #50514f; margin-bottom: 13px; } .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 { 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: 15px; font-weight: 500; color: #7e8282; margin-bottom: 10px; } .mileageStatusMisc__number { font-size: 22px; font-weight: 700; color: #666968; letter-spacing: -0.032em; } .mileageStatusMisc__unit { font-size: 14px; font-weight: 500; color: #666968; } .mileageList { margin-bottom: 40px; padding: 20px 0; } .mileageList__item { position: relative; padding: 16px 20px; border: 1px solid #e9ecef; border-radius: 6px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04); } .mileageList__item + .mileageList__item { margin-top: 20px; } .mileageList__itemHeader { display: flex; flex-direction: column; margin-bottom: 6px; } .mileageList__itemHeaderMisc { margin-bottom: 6px; } .mileageList__itemDate { font-size: 15px; color: #7e8282; margin-right: 1px; } .mileageList__itemDot { color: #7e8282; margin-right: 1px; } .mileageList__itemBrand { font-size: 14px; color: #7e8282; } .mileageList__itemTitle { font-size: 18px; font-weight: 700; color: #495057; } .mileageList__itemBody { display: flex; align-items: center; } .mileageList__itemDescription { margin-right: 6px; color: #343a40; } .mileageList__itemNumber { font-size: 16px; font-weight: 700; color: #495057; margin-bottom: 2px; } .mileageList__item--saveUp .mileageList__itemTitle { color: #1c7ed6; } .mileageList__item--saveUp .mileageList__itemNumber { color: #1c7ed6; } .mileageList__orderNum { position: absolute; top: 23px; right: 28px; color: #666968; font-weight: 500; font-size: 14px; } .mileageList__orderNum em { font-style: normal; font-weight: 400; color: #16191d; 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; } .deleteAccount { border-top: 1px solid #868e96; padding-top: 24px; margin-bottom: 40px; } .deleteAccount__image { border-radius: 20px; overflow: hidden; margin-bottom: 80px; } .deleteAccount__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .deleteAccount__title { font-size: 20px; 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: #666968; font-size: 15px; font-weight: 500; padding-left: 6px; margin-bottom: 6px; } .deleteAccount .b-checkbox-container { margin-left: 2px; } .refundSum td { background-color: #f0f8ff; padding: 14px 5px !important; } .refundSum__inner { display: flex; justify-content: flex-end; padding: 0 18px; align-items: center; } .refundSum__title { font-size: 18px; font-weight: 700; color: #16191d; margin-right: 16px; } .refundSum__content { display: flex; gap: 18px; align-items: center; padding-top: 2px; } .refundSum__content dl { position: relative; display: flex; } .refundSum__content dl dt { font-size: 15px; font-weight: 500; color: #495057; margin-right: 6px; } .refundSum__content dl dd { font-size: 15px; font-weight: 700; color: #1c7ed6; } .refundSum__content dl + dl::before { position: absolute; content: "·"; left: -11px; top: 50%; transform: translateY(-50%); display: inline-block; color: #868e96; } .refundProcess { display: flex; justify-content: center; align-items: center; background-color: #f8fafb; padding: 52px 108px; border-radius: 6px; margin-bottom: 56px; } .refundProcess__list { display: flex; justify-content: center; gap: 240px; width: 100%; } .refundProcess__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .refundProcess__item + .refundProcess__item::before { position: absolute; content: ""; display: block; width: 26px; height: 26px; border-top: 2px solid #b1b6b9; border-right: 2px solid #b1b6b9; left: -144px; top: 50%; transform: translateY(-50%) rotate(45deg); } .refundProcess__num { display: inline-block; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background-color: #666968; font-size: 18px; color: #ffffff; font-weight: 700; margin-bottom: 22px; } .refundProcess__title { font-size: 20px; font-weight: 700; color: #3a3a37; margin-bottom: 4px; } .refundProcess__text { width: 168px; font-size: 15px; color: #7e8282; word-break: keep-all; } .priceSum { display: flex; justify-content: center; align-items: center; background-color: #fafafa; border: 2px solid #dedede; padding: 44px 20px; } .priceSum__inner { display: flex; gap: 24px; align-items: center; } .priceSum__item { display: flex; flex-direction: column; align-items: center; text-align: center; } .priceSum__itemTitle { font-size: 18px; font-weight: 700; color: #212529; } .priceSum__itemPrice { line-height: 1.35; font-size: 22px; font-weight: 700; color: #212529; letter-spacing: -0.03em; } .priceSum__itemPrice .priceUnit { position: relative; top: -2px; margin-left: -3px; font-size: 16px; font-weight: 500; color: #343a40; } .priceSum__item--misc .priceSum__itemPrice { color: #666968; } .priceSum__item--misc .priceSum__itemPrice .priceUnit { color: #7e8282; } .priceSum__operator svg, .priceSum__operator path { fill: #adb5bd; } .priceSum__equals { margin: 0 10px 0 18px; } .priceSum__equals svg, .priceSum__equals path { fill: #343a40; } .priceSum__total { display: flex; align-items: center; } .priceSum__totalTitle { font-size: 18px; font-weight: 700; color: #212529; margin-right: 14px; } .priceSum__totalPrice { font-size: 30px; font-weight: 700; color: #f03e3e; letter-spacing: -0.035em; padding-bottom: 5px; margin-right: 10px; } .priceSum__totalPrice .priceUnit { position: relative; top: -2px; margin-left: -4px; font-size: 20px; font-weight: 500; color: #f03e3e; } .priceSum__totalDetail { font-size: 14px; color: #666968; } .myWishlist .cartItem__beforePrice { font-size: 14px; margin-top: -18px; } .myWishlist .cartItem__afterPrice { font-size: 22px; } .myWishlist__bottomBtnWrapper { display: flex; justify-content: flex-end; gap: 4px; } .personalPayment { display: grid; grid-template-columns: repeat(4, 1fr); -moz-column-gap: 20px; column-gap: 20px; row-gap: 52px; margin-bottom: 80px; padding-top: 24px; border-top: 1px solid #495057; } .personalPayment__period { font-size: 14px; 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; } .myMemberRank { position: relative; display: flex; align-items: center; height: 300px; border-radius: 20px; overflow: hidden; margin-bottom: 60px; } .myMemberRank img { position: absolute; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .myMemberRank__inner { position: relative; z-index: 1; padding-left: 56px; margin-bottom: 24px; } .myMemberRank__title { font-size: 54px; font-weight: 700; color: #ffffff; letter-spacing: -0.03em; margin-bottom: 10px; } .myMemberRank__text { font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.72); letter-spacing: -0.025em; } .myMemberRankInfo { margin-bottom: 40px; } .myMemberRankInfo__item { position: relative; overflow: hidden; padding: 28px 0 32px 60px; border-bottom: 1px solid #e0e0e0; } .myMemberRankInfo__item:first-child { border-top: 2px solid #606060; } .myMemberRankInfo__top { display: flex; align-items: center; position: relative; } .myMemberRankInfo__top img { margin-bottom: 12px; } .myMemberRankInfo__topDescription { margin-left: 36px; 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: 15px; 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(4, 1fr); gap: 12px; position: relative; padding-left: 128px; } .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__boxText { font-size: 15px; font-weight: 500; color: #16191d; } .myMemberRankInfo__boxText em { font-style: normal; font-weight: 700; color: #1c7ed6; } .orderReviewPop .infoBox { padding: 10px 12px; } .orderReviewPop__product { padding: 16px 0 16px; border-top: 2px solid #e9ecef; border-bottom: 2px solid #e9ecef; } .orderReviewPop__product .cartItem { align-items: center; } .orderReviewPop__product .cartItem__productTitle { margin-bottom: 10px; } .orderReviewPop .orderRefundReason { border-top: none; padding-top: 0; } .orderReviewPop .orderRefundReason__itemTitle { color: #212529; font-size: 16px; margin-bottom: 8px; } .myReview { padding-top: 20px; margin-bottom: 56px; } .myReview__item { padding: 24px 0; border-bottom: 1px solid #dee2e6; } .myReview__item:first-child { border-top: 1px solid #dee2e6; } .myReview__date { font-size: 13px; font-weight: 400; color: #7e8282; line-height: 24px; } .myReview__top { display: flex; } .myReview__thumbs { display: flex; gap: 5px; margin-left: auto; } .myReview__thumbs img { width: 80px; height: 80px; -o-object-fit: cover; object-fit: cover; cursor: pointer; } .myReview__body { position: relative; padding: 16px 0px 0; } .myReview__content { font-size: 15px; color: #16191d; letter-spacing: 0; margin-bottom: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .myReview__content.opened { display: block; } .myReview__btnWrapper { text-align: center; height: 52px; } .myReview__btnControls { position: absolute; bottom: 8px; right: 0; display: flex; justify-content: flex-end; align-items: center; } .myReview__btnControls > * + * { margin-left: 4px; } .myReview__moreBtn::after { content: ""; display: block; width: 9px; height: 9px; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 3px; } .myReview__moreBtn.opened::after { transform: translateY(2px) rotate(-135deg); } .myReview__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .myReview__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .reviewImage__current { margin-bottom: 32px; } .reviewImage__current .slick-slider { width: 610px; height: 610px; margin-inline: auto; background-color: #000000; } .reviewImage__current .slick-slider .slick-list { height: 100%; } .reviewImage__current .slick-slider .slick-track { height: 100%; } .reviewImage__current .slick-slider .slick-slide { display: flex; align-items: center; justify-content: center; } .reviewImage__current .slick-slider .slick-slide img { max-height: 100%; } .reviewImage__current .slick-arrow { width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .reviewImage__current .slick-arrow.slick-prev { left: -120px; } .reviewImage__current .slick-arrow.slick-prev::before { transform: translate(calc(-50% + 6px), -50%) rotate(-135deg); } .reviewImage__current .slick-arrow.slick-next { right: -120px; } .reviewImage__current .slick-arrow.slick-next::before { transform: translate(calc(-50% - 6px), -50%) rotate(45deg); } .reviewImage__current .slick-arrow.slick-disabled { display: none !important; } .reviewImage__current .slick-arrow:hover { background-color: rgba(0, 0, 0, 0.2); } .reviewImage__current .slick-arrow::before { content: ""; display: block; width: 36px; height: 36px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .reviewImage__thumbs { width: 610px; margin-inline: auto; } .reviewImage__thumbs .slick-track { left: 0 !important; } .reviewImage__thumbs .slick-slide { position: relative; width: 84px !important; height: 84px; cursor: pointer; } .reviewImage__thumbs .slick-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; } .reviewImage__thumbs .slick-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .reviewImage__thumbs .slick-slide.slick-current::before { content: ""; display: block; width: 100%; height: 100%; border: 3px solid #228be6; position: absolute; top: 0; left: 0; z-index: 2; } .reviewImage__thumbs .slick-slide.slick-current::after { background-color: rgba(0, 0, 0, 0); } .eventBadge { font-size: 13px; font-weight: 500; color: #16191d; padding: 2px 5px; border-radius: 3px; border: 1px solid #495057; background-color: #f7f7f7; display: inline-block; line-height: 20px; margin-right: 4px; flex-shrink: 0; min-width: 86px; text-align: center; } .eventBadge--progress { color: #339af0; background-color: #f6fbff; border: 1px solid #339af0; } .eventBadge--closed { color: #7e8282; background-color: white; border: 1px solid #7e8282; } .customer-search { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fafafa; padding: 32px 32px; min-height: 110px; border-radius: 5px; margin-bottom: 32px; } .customer-search__row { display: flex; justify-content: center; align-items: center; width: 100%; gap: 10px; } .customer-search__row + .customer-search__row { margin-top: 14px; } .customer-search__row .nice-select { height: 52px; line-height: 50px; font-size: 15px; } .customer-search__search { max-width: 720px; height: 52px; } .customer-search__search::-webkit-search-decoration, .customer-search__search::-webkit-search-cancel-button, .customer-search__search::-webkit-search-results-button, .customer-search__search::-webkit-search-results-decoration { display: none; } .customer-search__controls { display: flex; max-width: 720px; width: 100%; justify-content: space-between; gap: 12px; } .customer-search .btn { height: 50px; font-size: 17px; min-width: 120px; border-radius: 4px; } .sub-tab__trigger { display: flex; margin-bottom: 20px; } .sub-tab__btn { min-height: 40px; border-radius: 32px; min-width: 88px; padding: 0 24px; font-size: 15px; 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__content { display: none; } .sub-tab__content.current { display: block; } .sub-tab__trigger.type02 .sub-tab__btn { border-radius: 0; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; border-bottom: 1px solid #e9ecef; background-color: #f1f3f5; min-height: 50px; color: #868e96; padding: 0 32px; flex: 1; white-space: nowrap; } .sub-tab__trigger.type02 .sub-tab__btn + .sub-tab__btn { margin-left: 0; } .sub-tab__trigger.type02 .sub-tab__btn:hover { background-color: #ebeef1; } .sub-tab__trigger.type02 .sub-tab__btn.current { background-color: #ffffff; color: #16191d; font-weight: 500; border-left: 1px solid #e9ecef; border-right: 1px solid #e9ecef; border-bottom-color: transparent; } .request-radio-container { padding: 8px 2px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; width: 100%; } .dropzone-wrapper { padding: 12px; width: 100%; } .dropzone-wrapper #contact-dropzone { display: inline-flex; align-items: center; border: 2px dashed #dee2e6; border-radius: 6px; min-width: 178px; min-height: 178px; gap: 10px; flex-wrap: wrap; } .dropzone-wrapper #contact-dropzone .dz-message { margin: 0; width: 100%; font-size: 15px; font-weight: 500; color: #979b9d; } .dropzone-wrapper #contact-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 #contact-dropzone .dz-preview .dz-image { width: 100px; height: 100px; border-radius: 0; } .dropzone-wrapper #contact-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 #contact-dropzone .dz-preview .dz-remove:hover { opacity: 0.9; } .dropzone-wrapper #contact-dropzone .dz-preview .dz-progress { margin-top: 13px; } .dropzone-wrapper #contact-dropzone .dz-default { order: 1; width: 132px; display: block; } .contact-upload-info { padding-left: 10px; } .contact-upload-info li { position: relative; color: #868e96; font-size: 15px; margin-bottom: 8px; padding-left: 12px; } .contact-upload-info li::before { position: absolute; content: ""; display: inline-block; width: 3px; height: 3px; background-color: #adb5bd; border-radius: 50%; top: 50%; left: 2px; transform: translateY(-50%); } .b-checkbox.checkbox .inner-product { display: inline-flex; align-items: center; } .b-checkbox.checkbox .inner-product img { width: 68px; border-radius: 2px; margin-left: 6px; } .b-checkbox.checkbox .inner-product__info { display: block; margin-left: 8px; } .b-checkbox.checkbox .inner-product__info-title { display: block; font-weight: 500; } .b-checkbox.checkbox .inner-product__info-option { display: block; color: #666968; } .use-guide { padding: 16px; font-size: 16px; color: #50514f; } .use-guide__title { font-size: 22px; font-weight: 700; margin-bottom: 20px; color: #3a3a37; } .use-guide__title ~ .use-guide__title { margin-top: 40px; } .use-guide__sub-title { font-size: 18px; font-weight: 700; color: #50514f; margin-bottom: 4px; } .use-guide p { margin-bottom: 16px; } .use-guide ul, .use-guide ol { margin-bottom: 16px; } .use-guide ul li, .use-guide ol li { margin-bottom: 4px; } .use-guide em { font-style: normal; font-weight: 700; } .use-guide em.blue { color: #228be6; } .productManual { display: flex; align-items: center; width: 100%; background-color: #fafafa; min-height: 136px; padding: 18px 20px; border-radius: 4px; margin-bottom: 12px; } .productManual__wrapper { margin-bottom: 40px; } .productManual__left { display: flex; margin-right: auto; align-items: center; } .productManual__left img { width: 100px; height: 100px; border-radius: 2px; border-radius: 4px; margin-right: 16px; } .productManual__info-title { font-size: 16px; font-weight: 500; margin-bottom: 12px; } .productManual__info-download { color: #50514f; } .suggestionImage { margin-bottom: 20px; } .suggestionImage img { width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .login { max-width: 520px; margin-inline: auto; } .login .input-text { height: 60px; } .login__inputBox { margin-bottom: 30px; } .login__inputBox > * { margin-bottom: 5px; } .login__inputBox .input-text { font-size: 16px; padding-left: 12px; } .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; height: 60px; width: 142px; } .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__misc__link:hover { text-decoration: underline; } .login__loginBtn.btn { margin-bottom: 10px; font-size: 20px; } .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 { display: flex; gap: 10px; } .login__sns__btn { display: inline-flex; 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__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; } .pwChange { border: 1px solid #dee2e6; padding: 60px 88px; border-radius: 10px; } .pwChange__wrapper { display: flex; justify-content: center; align-items: center; padding-top: 60px; } .pwChange__tit { display: flex; align-items: center; margin-inline: auto; margin-bottom: 60px; gap: 48px; } .pwChange__img { margin-top: 24px; } .pwChange__txt__top { font-size: 18px; font-weight: 500; margin-bottom: 8px; color: #1971c2; line-height: 1.2; } .pwChange__txt__title { font-size: 36px; font-weight: 700; margin-bottom: 24px; line-height: 1.2; color: #212529; } .pwChange__txt__text { font-size: 16px; font-weight: 400; color: #495057; line-height: 1.6; } .pwChange__txt__text em { font-style: normal; font-weight: 500; color: #1c7ed6; } .pwChange__btn { display: flex; gap: 8px; justify-content: center; } .pwChange__btn .btn { line-height: 1; } .pwChange__btn .btn em { font-style: normal; font-size: 12px; color: #868e96; } .signUpTerms { max-width: 560px; margin-inline: auto; padding-top: 20px; } .signUpTerms__agreeText { font-size: 16px; 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 .control-label { padding-left: 10px; } .signUpTerms__all__description { margin-top: 6px; font-size: 13px; 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: 3px; } .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: inline-flex; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #343a40; margin-bottom: 8px; } .signUpTerms__gcone__link svg { display: inline-block; width: 15px; height: 15px; fill: #b1b6b9; margin-left: 10px; margin-top: 2px; } .signUpTerms__gcone__link em { font-style: normal; color: #3053bc; } .signUpTerms__gcone__text { font-size: 13px; color: #50514f; } .signUpTerms__misc { border: 1px solid #e9ecef; padding: 18px 12px 18px 18px; 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__detail { position: absolute; display: inline-block; right: 12px; padding-right: 10px; top: 3px; 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; border-radius: 4px; padding: 4px 8px; } .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 { position: relative; max-width: 520px; margin-inline: auto; padding-top: 36px; border-top: 2px solid #495057; margin-top: 100px; } .signUp__required { position: absolute; top: -28px; right: 2px; color: #7e8282; } .signUp .input-text { height: 52px; } .signUp__inputBox { margin-bottom: 30px; } .signUp__inputBox > * { margin-bottom: 28px; } .signUp__inputBox .input-text { font-size: 16px; padding-left: 12px; margin-bottom: 4px; } .signUp__inputBox .nice-select { height: 52px; line-height: 50px; } .signUp__inputBox__alertText { color: #f03e3e; padding-left: 6px; font-size: 13px; } .signUp__inputBox .inputWithBtn .btn { flex-shrink: 0; height: 52px; width: 142px; } .signUp__inputBox .inputTimer { width: 100%; } .signUp__inputBox .inputEmail { margin-bottom: 4px; } .signUp__inputBox .inputEmail .input-text { margin-bottom: 0; } .signUp__inputBox .inputEmail .nice-select { width: 142px; } .signUp__inputBox__itemTitle { display: block; color: #212529; font-size: 14px; font-weight: 500; padding-left: 4px; margin-bottom: 3px; } .signUp__inputBox .custom-radio-container { height: 52px; gap: 28px; } .signUp__inputBox .inputAddress .inputAddress__postalCode { margin-bottom: 10px; } .signUp__inputBox .inputAddress .inputAddress__postalCode .input-text { margin-bottom: 0; } .signUp__inputBox .inputAddress .input-text { margin-bottom: 10px; } .signUp__inputBox .inputAddress__postalCode .btn { height: 52px; } .signUp__inputBox .phoneAuth { max-width: 380px; margin-top: 20px; } .signUp__inputBox .phoneAuth .input-text { margin-bottom: 0; height: 44px; } .signUp__inputBox .phoneAuth .inputWithBtn { margin-bottom: 4px; } .signUp__inputBox .phoneAuth .inputWithBtn .btn { width: auto; height: 44px; } .signUp__inputBox .textInfo { margin-top: 4px; font-size: 12px; } .signUp__signInBtn.btn { margin-bottom: 10px; font-size: 20px; } .signUp__btnContainer-half { display: flex; gap: 8px; } .signUp__btnContainer-half .btn { flex-grow: 1; font-size: 18px; } .signUp--nonMemberSurvey { margin-top: 0; max-width: none; border-top: 0; padding-top: 20px; } .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 { cursor: pointer; } .signUp-promotion__introBox { text-align: center; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 32px; border-radius: 4px; margin-bottom: 20px; } .signUp-promotion__introBox__title { color: #212529; font-size: 20px; font-weight: 700; } .signUp-promotion__introBox__subTitle { color: #495057; font-size: 14px; margin-bottom: 12px; } .signUp-promotion__introBox.second { margin-bottom: 60px; } .signUp-promotion__introBox.second .signUp-promotion__introBox__title { font-size: 18px; color: #343a40; } .signUp-promotion__introBox.second em { font-style: normal; color: #3053bc; } .signUp-promotion__col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .signUp-promotion__col-2 .btn { height: 64px; } .signUp-promotion__col-2 .login__sns__btn { height: 64px; } .signUp-promotion__col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .signUp-promotion__col-3 .btn { height: 64px; } .signUp-promotion__col-3 .login__sns__btn { height: 64px; } .signUp-promotion__col-3.signUpLink { margin-bottom: 40px; } .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: 20px; font-weight: 700; color: #343a40; margin-bottom: 20px; } .signUp-promotion__benefitBox { text-align: center; border-radius: 4px; border: 1px solid #e9ecef; padding: 40px; } .signUp-promotion__benefitBox svg { margin-inline: auto; margin-bottom: 20px; } .signUp-promotion__benefitBox__title { font-size: 18px; font-weight: 500; color: #212529; margin-bottom: 20px; } .signUp-promotion__benefitBox__subTitle { font-size: 15px; color: #7e8282; } .signUp-promotion__gcone { display: flex; align-items: center; justify-content: center; background-image: url(../images/image_signUp-gconeBg.png); height: 234px; overflow: hidden; border-radius: 4px; margin-bottom: 40px; } .signUp-promotion__gcone__inner { margin-left: 360px; } .signUp-promotion__gcone__text { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: #343a40; margin-bottom: 28px; line-height: 1.4; } .signUp-promotion__gcone__text em { font-style: normal; color: #3053bc; font-size: 30px; font-weight: 700; margin-right: 4px; } .signUp-promotion__gcone__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #ffffff; background-color: #343a40; height: 56px; font-size: 18px; font-weight: 500; border-radius: 100px; min-width: 300px; } .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 0; min-height: 192px; } .signUp-promotion__brandBox img { margin-inline: auto; margin-bottom: 16px; } .signUp-promotion__brandBox__subTitle { font-size: 13px; color: #7e8282; } .signUp-promotion__brandBox__title { font-size: 16px; font-weight: 500; color: #343a40; } .signUpComplete { max-width: 860px; margin-inline: auto; text-align: center; } .signUpComplete__inner { text-align: center; margin-bottom: 40px; } .signUpComplete__inner img { margin-inline: auto; margin-bottom: 16px; } .signUpComplete__box { background-color: #f8fafb; border: 1px solid #f2f4f6; padding: 28px; border-radius: 4px; margin-bottom: 6px; } .signUpComplete__box__title { font-size: 32px; color: #0d0f12; font-weight: 700; margin-bottom: 24px; } .signUpComplete__box__text { color: #16191d; } .subList__banner { margin-bottom: 60px; border-radius: 4px; overflow: hidden; } .subList__title { font-size: 40px; font-weight: 700; color: #030507; margin-bottom: 24px; text-align: center; } .subList__content { margin-bottom: 120px; } .subList__list { margin-bottom: 60px; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 4px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05); padding: 32px 32px; } .subList__list__inner { width: 1080px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .subList__list__item { font-size: 16px; color: #7e8282; padding: 8px 14px; border-radius: 4px; } .subList__list__item:hover { background-color: #f8f9fa; color: #666968; } .subList__list__item.current { font-weight: 500; color: #252521; text-decoration: underline; text-underline-offset: 4px; } .subList__sort { display: flex; gap: 28px; } .subList__sort__item { font-size: 16px; position: relative; color: #979b9d; } .subList__sort__item:hover { color: #666968; } .subList__sort__item.current { font-weight: 700; color: #252521; } .subList__sort__item + .subList__sort__item::before { content: ""; display: inline-block; width: 1px; height: 12px; background-color: #d1d6d8; position: absolute; left: -14px; top: 7px; } .subList__no-result { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .subList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .cartOrder { padding-top: 20px; } .cartOrder__title { font-size: 32px; font-weight: 700; color: #16191d; margin-bottom: 52px; } .cartOrder__inner { display: flex; margin-bottom: 80px; } .cartOrder__left { width: 100%; margin-right: auto; } .cartOrder__right { margin-left: 48px; width: 356px; flex-shrink: 0; } .cartOrder__sticky { position: sticky; top: 20px; } .cartOrder__control { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cartOrder__control .b-checkbox { font-weight: 500; font-size: 18px; color: #212529; } .cartOrder__control__btnContainer { display: flex; align-items: center; gap: 4px; } .cartOrder__list .table-wrapper { margin-bottom: 16px; } .cartOrder__list .table.vertical th { font-size: 13px; font-weight: 400; height: 46px; background-color: #fbfcfc; } .cartOrder__list .table.vertical td { padding: 20px 5px; } .cartOrder__list .table.vertical tfoot td { padding: 8px 5px; } .cartOrder__list .textInfo { font-size: 14px; } .cartOrder__info { text-align: right; } .cartOrder .main-section { padding: 0; } .cartOrder .main-section-header { margin-bottom: 28px; } .cartOrder .main-section-title__title { font-size: 28px; } .cartOrder__message { display: flex; align-items: center; width: 100%; } .cartOrder__messageTitle { flex-shrink: 0; margin-right: 8px; min-width: 100px; font-size: 15px; font-weight: 500; } .cartOrderBox { border: 1px solid #dee2e6; min-height: 564px; padding: 24px 18px; border-radius: 8px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08); } .cartItem { display: flex; } .cartItem__image { flex-shrink: 0; width: 88px; height: 88px; border-radius: 4px; overflow: hidden; } .cartItem__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cartItem__productInfo { margin-left: 10px; padding-top: 1px; text-align: left; } .cartItem__productTitle { display: block; font-size: 16px; margin-bottom: 6px; line-height: 20px; } .cartItem__productOption { display: block; font-size: 13px; color: #50514f; margin-bottom: 8px; } .cartItem__productOption .option-badge { display: inline-block; padding: 0 5px; border-radius: 2px; font-size: 12px; background-color: #7e8282; color: #ffffff; } .cartItem__discountPrice { display: inline-flex; align-items: baseline; font-size: 16px; font-weight: 500; color: #212529; letter-spacing: -0.03em; } .cartItem__discountPrice > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; } .cartItem__discountMinus { position: relative; font-size: 13px; margin-right: 4px; top: -1px; font-weight: 400; color: #495057; } .cartItem__beforePrice { display: block; font-size: 13px; color: #979b9d; text-decoration: line-through; margin-top: -18px; letter-spacing: -0.03em; } .cartItem__afterPrice { display: inline-flex; align-items: baseline; font-size: 20px; font-weight: 700; color: #16191d; letter-spacing: -0.03em; } .cartItem__afterPrice > .priceUnit { position: relative; font-size: 14px; margin-left: 2px; top: -1px; font-weight: 500; color: #343a40; } .cartItem__shippingFee { display: inline-flex; align-items: baseline; color: #666968; font-weight: 500; font-size: 16px; letter-spacing: -0.03em; } .cartItem__shippingFee > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; } .cartItem__normalPrice { display: inline-flex; align-items: baseline; color: #212529; font-weight: 500; font-size: 16px; letter-spacing: -0.03em; } .cartItem__normalPrice > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; } .cartItem__mileage { display: inline-flex; align-items: baseline; color: #666968; font-weight: 500; font-size: 16px; letter-spacing: -0.03em; } .cartItem__mileage > .priceUnit { position: relative; font-size: 13px; margin-left: 2px; top: -1px; } .cartItem__delete { position: relative; width: 28px; height: 28px; margin-top: 2px; } .cartItem__delete:before, .cartItem__delete:after { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background-color: #b1b6b9; content: ""; } .cartItem__delete::before { transform: translate(-50%, -50%) rotate(45deg); } .cartItem__delete::after { transform: translate(-50%, -50%) rotate(-45deg); } .cartItem__date { line-height: 18px; font-size: 15px; color: #50514f; } .cartItem__footer { display: flex; align-items: center; } .cartItem__giftSelect { display: flex; justify-content: flex-end; gap: 16px; margin-left: auto; } .cartItem__giftSelectName { font-size: 14px; color: #495057; font-weight: 500; } .cartOrderBox__title { font-size: 22px; font-weight: 700; margin-bottom: 32px; } .cartOrderBox__list { margin-bottom: 16px; padding-bottom: 24px; border-bottom: 1px solid #868e96; } .cartOrderBox__list > li { display: flex; margin-bottom: 12px; } .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__discountMinus { position: relative; font-size: 14px; margin-right: 4px; top: -1px; font-weight: 400; color: #495057; } .cartOrderBox__th { margin-right: auto; font-size: 15px; color: #212529; } .cartOrderBox__td { font-size: 18px; font-weight: 700; color: #212529; letter-spacing: -0.03em; } .cartOrderBox__td > .priceUnit { position: relative; font-size: 14px; margin-left: 2px; top: -1px; color: #343a40; font-weight: 500; } .cartOrderBox__miscTh { position: relative; align-items: center; margin-right: auto; font-size: 13px; color: #495057; padding-left: 18px; } .cartOrderBox__miscTh::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__miscTd { font-size: 15px; font-weight: 500; color: #343a40; letter-spacing: -0.03em; } .cartOrderBox__miscTd > .priceUnit { position: relative; font-size: 12px; margin-left: 2px; top: -1px; } .cartOrderBox__total { display: flex; align-items: center; margin-bottom: 20px; } .cartOrderBox__totalTh { font-size: 16px; font-weight: 500; color: #16191d; margin-right: auto; } .cartOrderBox__totalTd { font-size: 25px; font-weight: 700; color: #0d0f12; letter-spacing: -0.034em; } .cartOrderBox__totalTd > .priceUnit { position: relative; font-size: 18px; margin-left: 2px; top: -1px; color: #16191d; font-weight: 500; } .cartOrderBox__buyBtn { width: 100%; margin-bottom: 16px; } .cartOrderBox .product-btn-container { gap: 6px; } .cartOrderBox .product-btn-container .gift-btn { font-size: 13px; } .cartOrderBox .product-btn-container .btn { padding: 0 12px; font-size: 16px; min-width: 0; } .orderInfo__section { margin-bottom: 72px; } .orderInfo__sectionHeader { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; } .orderInfo__sectionHeader .orderInfo__sectionTitle { margin-bottom: 0; } .orderInfo__sectionTitle { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #16191d; } .orderInfo__table { padding: 18px 0; border-top: 1px solid #495057; margin-bottom: 20px; } .orderInfo__table > .table { border-top: none; } .orderInfo__table > .table tr { border-bottom: none; height: 60px; } .orderInfo__table > .table th { background-color: transparent; height: 40px; padding: 6px 16px; vertical-align: top; } .orderInfo__table > .table td { background-color: transparent; height: 40px; padding: 6px 10px; vertical-align: top; } .orderInfo__table > .table .inputWithBtn { width: 360px; } .orderInfo__table > .table .inputWithBtn .btn { flex-shrink: 0; height: 48px; } .orderInfo__table > .table .inputHalf { max-width: 360px; } .orderInfo__table > .table .nice-select { height: 48px; line-height: 46px; font-size: 16px; } .orderInfo__table > .table .inputAddress .input-text { max-width: 420px; } .orderInfo__table > .table .inputAddress__postalCode { max-width: 360px; } .orderInfo__table > .table .inputAddress__postalCode .input-text { margin-bottom: 0; } .orderInfo__table > .table .inputAddress__postalCode .btn { height: 48px; flex-shrink: 0; } .orderInfo__table > .table .custom-radio-container { display: inline-flex; margin-right: 8px; } .orderInfo__table .textInfo { margin-top: 20px; margin-left: 16px; } .orderInfo__table .input-text { font-size: 16px; padding-left: 12px; height: 48px; max-width: 360px; } .orderInfo__table .phoneAuth { max-width: 420px; margin-top: 16px; } .orderInfo__table .phoneAuth .input-text { margin-bottom: 0px; height: 48px; width: 100%; padding-left: 10px; } .orderInfo__table .phoneAuth .inputWithBtn { margin-bottom: 4px; } .orderInfo__table .phoneAuth .inputWithBtn .btn { height: 48px; } .orderInfo__table .phoneAuth .inputTimer { flex-grow: 1; } .orderInfo__table .phoneAuth .btn.lg { height: 50px; } .orderInfo__table .infoBox { margin-top: 16px; } .orderInfo__table .inputLimit .input-text { max-width: none; } .orderInfo__title { display: flex; align-items: center; height: 100%; max-height: 48px; } .orderInfo__text { display: inline-flex; height: 100%; max-height: 48px; align-items: center; margin-right: 8px; } .orderInfo__innerBox { max-width: 420px; display: flex; flex-direction: column; background-color: #f8f9fa; border: 1px solid #f1f3f5; padding: 16px; border-radius: 4px; } .orderInfo__innerBox .input-text { margin-bottom: 8px; height: 48px; font-size: 14px; padding-left: 10px; max-width: none; } .orderInfo__innerBox .btn.lg { height: 50px; } .orderInfo__editContent { margin-top: 16px; } .orderInfo__innerBtnContainer { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; } .orderInfo__switch { display: flex; gap: 16px; } .orderInfo__switch .toggle-switchy .label { font-size: 14px; } .orderInfo__switch .toggle-switchy.kakao > input:checked + .toggle { background: #FEE500; } .orderInfo__switch .toggle-switchy.kakao > input:checked + .toggle > .switch { border: 3px solid #FEE500; } .orderInfo__switch .toggle-switchy.kakao > input + .toggle:before { color: #191919; } .orderInfo__switch .toggle-switchy.naver > input:checked + .toggle { background: #03c75a; } .orderInfo__switch .toggle-switchy.naver > input:checked + .toggle > .switch { border: 3px solid #03c75a; } .orderInfo__check { margin-top: 12px; } .orderInfo__bottom { margin-top: 48px; padding-right: 12px; padding-bottom: 12px; text-align: right; } .orderInfo__deleteLink { position: relative; display: inline-block; font-size: 16px; margin-top: 8px; color: #50514f; font-weight: 500; padding: 8px 16px; background-color: #ffffff; border: 1px solid #ced4da; border-radius: 4px; } .orderInfo__deleteLink:hover { background-color: #fafafa; } .orderInfo__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; } .orderInfo__deliveryRequest { display: flex; flex-direction: column; gap: 10px; } .orderInfo__deliveryRequest .select-box .nice-select { width: 100%; max-width: 360px; } .orderInfo__cartCoupon .nice-select { width: 100%; max-width: 360px; } .orderInfo__mileage { display: flex; align-items: center; } .orderInfo__mileage .input-text { background-color: #f5f5f5; } .orderInfo__mileageText { font-size: 146x; color: #0d0f12; margin-left: 20px; } .orderInfo__mileageText em { font-style: normal; font-weight: 700; } .orderInfo__btnContainer { display: flex; justify-content: flex-end; align-items: center; gap: 5px; } .orderInfo__orderInfoTop { padding-top: 16px; border-top: 1px solid #495057; margin-bottom: 28px; } .orderInfo .cartOrder__list .table { border-top: 1px solid #495057; } .order-method { padding: 12px; border-top: 1px solid #495057; } .order-method > .custom-radio { padding: 24px 0; border-top: 1px solid #e3e3e3; } .order-method > .custom-radio:first-child { border-top: none; } .order-method-normal { padding-top: 12px; } .order-method-normal__btn { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; font-size: 14px; color: #7e8282; min-height: 60px; border: 1px solid #dee2e6; border-radius: 5px; font-weight: 500; padding: 12px; gap: 4px; } .order-method-normal__btn.active { color: #ffffff; border-color: transparent; background-color: #707070; } .order-method-normal__btn.active .order-method-normal__icon { background-position: 40px 0; } .order-method-normal__btn.active .order-method-normal__icon--payco { background-position: 80px 0; } .order-method-normal__btn.active .order-method-normal__icon--toss { background-position: 88px 0; } .order-method-normal__btn-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 32px; } .order-method-normal__content-inner { background-color: #f8f9fa; padding: 20px 32px; border-radius: 5px; border: 1px solid #eaeced; margin-bottom: 10px; } .order-method-normal__nextTimeCheck { margin-bottom: 12px; } .order-method-normal__icon { width: 40px; height: 40px; 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: 80px; background-image: url("../images/icon_payment-payco.png"); } .order-method-normal__icon--toss { width: 88px; 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 12px 8px 12px; word-break: keep-all; vertical-align: middle; color: #495057; line-height: 1.4; } .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; } .table-innerAddress th, .table-innerAddress td { vertical-align: top; } .table-innerAddress th { padding: 16px 4px 8px; } .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: 20px 32px; border-radius: 5px; border: 1px solid #eaeced; } .easyPayCashReceipt .custom-radio-container { margin-bottom: 12px; } .gcpayEvent { background-color: #f0f8ff; border-radius: 6px; padding: 24px 18px; margin-bottom: 20px; } .gcpayEvent__icon { margin-inline: auto; } .gcpayEvent__title { font-size: 18px; font-weight: 700; color: #1c7ed6; text-align: center; margin-bottom: 8px; } .gcpayEvent__title .misc { font-size: 14px; color: #1c7ed6; font-weight: 400; } .gcpayEvent__content { font-size: 14px; color: #343a40; font-weight: 500; text-align: center; } .multiDelivery .table-wrapper { margin-bottom: 16px; } .multiDelivery .table { border-top: 1px solid #495057; } .multiDelivery .table.vertical th { font-weight: 400; height: 46px; background-color: #fbfcfc; } .multiDelivery__name { font-weight: 500; } .order-payment { display: flex; align-items: flex-start; gap: 20px; } .order-payment__left { flex-grow: 1; } .order-payment__right { position: sticky; top: 78px; left: 0; flex-shrink: 0; padding-bottom: 22px; } .order-payment__price { border-radius: 4px; background-color: #f9f9f9; border: 1px solid #ededed; padding: 16px 20px; width: 360px; margin-bottom: 12px; } .order-payment__price-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; } .order-payment__price-row { display: flex; align-items: center; } .order-payment__price-row + .order-payment__price-row { margin-top: 8px; } .order-payment__price-row.sum { position: relative; margin-top: 24px; } .order-payment__price-row.sum::before { content: ""; position: absolute; display: inline-block; width: 100%; height: 1px; background-color: #dedede; left: 0; top: -9px; } .order-payment__price-row.sum .order-payment__price-th { font-weight: 700; font-size: 20px; } .order-payment__price-row.sum .order-payment__price-td { font-weight: 700; font-size: 24px; } .order-payment__price-th { font-weight: 500; font-size: 16px; letter-spacing: -0.03em; margin-right: auto; } .order-payment__price-th.sub { font-weight: 400; color: #666968; } .order-payment__price-th.sub::before { position: relative; content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid #dedede; border-width: 0 0 2px 2px; margin-right: 4px; top: -3px; } .order-payment__price-td { font-size: 18px; letter-spacing: -0.03em; font-weight: 500; } .order-payment__price-td.sub { font-weight: 400; color: #666968; } .order-payment__section { position: relative; border-radius: 4px; border: 1px solid #ededed; margin-bottom: 20px; padding: 16px 20px; } .order-payment__section .form-control-container { margin-bottom: 10px; } .order-payment__section .table.vertical th + th, .order-payment__section .table.vertical td + th { border-left: none; } .order-payment__section .table.vertical th + td, .order-payment__section .table.vertical td + td { border-left: none; } .order-payment__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: #212529; padding-bottom: 14px; border-bottom: 1px solid #ededed; } .order-payment__term { padding: 8px; font-size: 15px; margin-bottom: 12px; } .order-payment__term .b-checkbox-container { row-gap: 12px; } .order-payment__term-link { color: #666968; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: #979b9d; margin-left: 2px; } .order-payment__term-link:hover { color: #3a3a37; } .order-payment__term-agree-all { font-weight: 500; } .order-payment__btn { text-align: center; width: 100%; color: #ffffff; background-color: #228be6; font-size: 18px; height: 54px; font-weight: 500; border-radius: 5px; } .order-payment__btn-container { padding: 0 4px; } .order-payment__btn:hover { background-color: #1983df; } .order-payment__recipient { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .order-payment__recipient-name { position: relative; font-size: 18px; font-weight: 500; padding-right: 20px; color: #0d0f12; } .order-payment__recipient-name:after { content: ""; position: absolute; display: inline-block; width: 1px; height: 14px; background-color: #dee2e6; top: 50%; right: 10px; transform: translateY(calc(-50% + 1px)); } .order-payment__recipient-address { font-size: 15px; color: #343a40; margin-right: 10px; } .order-payment__recipient-wrapper { position: relative; border-top: 1px solid #495057; padding-top: 18px; margin-bottom: 60px; } .order-payment__recipient-wrapper .cartOrder__list .table { border-top: 1px solid #dee2e6; } .order-payment__recipient-wrapper + .orderInfo__sectionTitle { position: relative; } .order-payment__recipient-wrapper + .orderInfo__sectionTitle::before { content: ""; position: absolute; display: inline-block; width: 100%; height: 1px; border-top: 1px dashed #dee2e6; left: 0; top: -30px; } .order-payment__recipient-wrapper:not(:has(~ .order-payment__recipient-wrapper)) { margin-bottom: 0; } .order-payment__deliveryCycle { border: 1px solid #e0e0e0; padding: 20px 24px 14px; 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 { margin-bottom: 16px; -moz-column-gap: 16px !important; column-gap: 16px !important; } .order-payment__deliveryCycleWrapper { border-top: 1px solid #495057; padding-top: 16px; } .order-payment__multiDelivery-address { padding: 20px; background-color: #fafafa; border: 2px solid #ededed; border-radius: 5px; margin-bottom: 20px; } .order-payment__infoBtnContainer { position: absolute; display: flex; gap: 4px; top: 13px; right: 24px; } .btn.address-detail:after { position: relative; top: 3px; content: ""; display: inline-block; color: #495057; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 5px solid; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; } .btn.address-detail.opened:after { transform: rotate(180deg); top: -3px; } .deliveryProductSelect__wrap { display: flex; align-items: center; margin-bottom: 8px; } .giftAddressInput__title { color: #212529; margin-right: 4px; } .giftAddressInput .input-text { margin-right: 12px; } .orderCompletedTop { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px 0 48px; border-bottom: 1px dashed #dee2e6; margin-bottom: 48px; } .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; } .orderCompletedTop__subTitle em { font-style: normal; font-weight: 500; } .nonMemberTerms { padding-top: 12px; border-top: 1px solid #868e96; margin-bottom: 20px; } .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: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 dashed #dee2e6; left: 0; bottom: -8px; } .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; } .orderFailed { padding: 32px 0; text-align: center; } .orderFailed__inner { margin-bottom: 60px; } .orderFailed img { display: inline-block; margin-bottom: 20px; } .orderFailed__title { font-size: 32px; 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; margin-bottom: 28px; border-radius: 4px; } .gcpayGuide { background: #3053bc; padding: 40px 0 30px; } .gcpayGuideSlick__item img { margin: 0 auto; } .gcpayGuideSlick.slick-dotted.slick-slider { margin-bottom: 0; } .gcpayGuideSlick .slick-dots { position: relative; margin: 15px 0 0 0 !important; bottom: 0; } .gcpayGuideSlick .slick-dots.slick-dotted { bottom: 0; } .gcpayGuideSlick .slick-dots li { margin: 0; width: 17px; height: 17px; } .gcpayGuideSlick .slick-dots li button:before { display: none; } .gcpayGuideSlick .slick-dots li button:after { content: "●"; display: inline-block; font-size: 10px; color: #6f87d0; } .gcpayGuideSlick .slick-dots li.slick-active button:after { color: #fff; } .productDetail { padding: 20px 0 0; } .productDetailTop { display: flex; margin-bottom: 92px; } .productDetailTop__left { margin-right: 80px; } .productDetailTop__right { width: 100%; } .productDetailGallery__current { position: relative; width: 580px; height: 580px; margin-bottom: 20px; } .productDetailGallery__current img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .productDetailGallery__current::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.04); } .productDetailGallery__thumbs { width: 552px; display: flex; justify-content: space-between; margin-inline: auto; align-items: center; } .productDetailGallery__slider { width: 492px; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: hidden; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .productDetailGallery__item { position: relative; width: 92px; height: 92px; flex-shrink: 0; cursor: pointer; } .productDetailGallery__item:hover img { opacity: 1; } .productDetailGallery__item.active img { opacity: 1; } .productDetailGallery__item.active::before { border: 2px solid #212529; } .productDetailGallery__item::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.05); } .productDetailGallery__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.5; } .productDetailGallery__arrow { width: 16px; height: 16px; cursor: pointer; border-top: 2px solid #495057; border-right: 2px solid #495057; transform: rotate(-135deg); } .productDetailGallery__arrow--right { transform: rotate(45deg); } .productDetailGallery__arrow.hidden { opacity: 0; pointer-events: none; } .productDetailInfo__titleWrap { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; } .productDetailInfo__title { display: block; font-size: 28px; line-height: 40px; font-weight: 700; color: #16191d; margin-right: auto; width: 530px; } .productDetailInfo__subTitle { display: block; width: 100%; line-height: 20px; 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; gap: 16px; padding-top: 8px; } .productDetailInfo__miscControls__btn { display: inline-flex; align-items: center; justify-content: center; } .productDetailInfo__price { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .productDetailInfo__price__sale { display: flex; flex-direction: column; color: #e34747; text-align: center; letter-spacing: -0.03em; margin-right: 10px; } .productDetailInfo__price__sale > .percent { font-weight: 700; font-size: 28px; } .productDetailInfo__price__sale .priceUnit { position: relative; font-size: 20px; margin-left: 2px; top: -2px; } .productDetailInfo__price__price { display: flex; align-items: center; } .productDetailInfo__price__price > * + * { margin-left: 6px; } .productDetailInfo__price__original { font-size: 20px; color: #343a40; text-decoration: line-through; color: #adb5bd; letter-spacing: -0.03em; } .productDetailInfo__price__current { font-size: 28px; font-weight: 700; color: #16191d; letter-spacing: -0.03em; } .productDetailInfo__price__current .priceUnit { position: relative; font-size: 20px; font-weight: 500; margin-left: 1px; top: -2px; } .productDetailInfo__price .product-badge-container { margin-left: auto; margin-bottom: 0; } .productDetailInfo__price__arrow { position: relative; font-size: 20px; font-weight: 500; color: #979b9d; } .productDetailInfo__info { padding: 0 0 8px 0; margin-bottom: 20px; } .productDetailInfo__info > dl { display: flex; align-items: flex-start; padding: 20px 0 20px 16px; border-top: 1px solid #f0f0f0; } .productDetailInfo__info > dl:last-of-type { border-bottom: 1px solid #f0f0f0; } .productDetailInfo__info > dl > dt { font-size: 15px; color: #666968; margin-right: 8px; font-weight: 400; width: 120px; } .productDetailInfo__info > dl > dd { font-size: 15px; color: #16191d; } .productDetailInfo__info > dl > dd > em { font-style: normal; font-weight: 700; font-size: 18px; } .productDetailInfo__info > dl > dd .misc { font-size: 14px; color: #7e8282; font-weight: 300; } .productDetailInfo__info > dl > dd .infoBtn { margin-top: -4px; margin-left: 2px; } .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: 4px 0; } .productDetailInfo__option__description { font-size: 16px; font-weight: 500; margin-bottom: 4px; } .productDetailInfo__option__item { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 18px; min-height: 54px; cursor: pointer; } .productDetailInfo__option__item .control-label { line-height: 1.4; } .productDetailInfo__option__item .custom-radio input { cursor: pointer; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .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; gap: 4px; } .productDetailInfo__additionalSelect__item .btn { flex-shrink: 0; } .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: auto; } .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__count__additionalSelect { font-size: 14px; color: #7e8282; margin-top: 2px; } .productDetailInfo__priceTotal { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ced4da; padding: 20px 0 20px 16px; margin-bottom: 24px; } .productDetailInfo__priceTotal__text { font-size: 16px; color: #3a3a37; font-weight: 500; letter-spacing: -0.04em; } .productDetailInfo__priceTotal__price { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; } .productDetailInfo__priceTotal__price > .won { position: relative; bottom: 0.1em; font-size: 26px; font-weight: 700; margin-left: 2px; } .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: 120px; } .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: 15px; color: #666968; margin-right: 8px; font-weight: 400; width: 120px; } .productDetailInfo__memberBenefits dl > dd { font-size: 15px; 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; } .productDetailTab__list { display: flex; width: 1276px; margin-inline: auto; text-align: center; } .productDetailTab__item { flex: 1; } .productDetailTab__item a { display: block; width: 100%; font-size: 16px; font-weight: 500; background-color: #f1f3f5; color: #495057; height: 48px; line-height: 48px; border-bottom: 1px solid #dee2e6; border-left: 1px solid #dee2e6; border-top: 2px solid #343a40; } .productDetailTab__item a.active { color: #16191d; font-weight: 500; background-color: #ffffff; color: #16191d; border-bottom: 1px solid #ffffff; } .productDetailTab__item:last-child a { border-right: 1px solid #dee2e6; } .productDetailTab.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: #fff; height: 140px; min-width: 1336px; border-bottom: 1px solid #dee2e6; } .productDetailTab.fixed .productDetailTab__item a { border-bottom: 1px solid #dee2e6; } .productDetailTab.fixed .productDetailTab__item a.active { border-bottom: 1px solid #ffffff; } .productDetailcontent__item { padding: 60px 0 40px; } .productDetailcontent__imageDetails { position: relative; text-align: center; max-height: 1600px; 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: 28px 0; text-align: center; } .productDetailcontent__totalNum { display: flex; margin-bottom: 24px; } .productDetailcontent__totalNum dl { display: flex; align-items: center; } .productDetailcontent__totalNum dl dt { font-size: 16px; color: #212529; margin-right: 12px; font-weight: 400; } .productDetailcontent__totalNum dl dd { font-size: 28px; color: #0d0f12; font-weight: 700; margin-bottom: 2px; } .productDetailcontent__totalNum dl + dl::before { content: ""; display: block; width: 1px; height: 20px; background-color: #dee2e6; margin: 0 24px; } .fixedProduct { display: none; width: 1276px; margin-inline: auto; justify-content: space-between; align-items: center; padding: 16px 0; } .fixedProduct__left { display: flex; align-items: center; } .fixedProduct__right .btn { min-width: 172px; } .fixedProduct__product { margin-left: 14px; } .fixedProduct__title { font-size: 15px; font-weight: 500; } .fixedProduct__price { font-size: 20px; font-weight: 700; color: #16191d; letter-spacing: -0.03em; } .fixedProduct__price .priceUnit { position: relative; font-size: 16px; font-weight: 500; margin-left: 1px; top: -1px; } .fixedProduct__image { position: relative; width: 60px; height: 60px; } .fixedProduct__image::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.03); } .fixedProduct.fixed { display: flex; } .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; } .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__subTitle__more { position: absolute; right: 4px; bottom: 0; font-size: 14px; padding-right: 12px; color: #212529; cursor: pointer; } .productReview__subTitle__more::after { content: ""; position: absolute; display: inline-block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; top: 50%; right: 0; transform: translateY(-50%) rotate(45deg); } .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 { display: flex; align-items: flex-start; justify-content: center; padding: 40px 0 32px; border-radius: 8px; background-color: #f8f9fb; margin-bottom: 40px; } .productReview__status__title { display: block; font-size: 16px; font-weight: 700; color: #16191d; margin-bottom: 24px; text-align: center; } .productReview__reviewNum { margin-left: 88px; } .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__ratingStats { margin-left: 88px; } .productReview__ratingStats__star { font-size: 13px; color: #666968; margin-right: 8px; } .productReview__ratingStats__item { display: flex; align-items: center; margin-bottom: 12px; } .productReview__ratingStats__bar { background-color: #e9ecef; height: 8px; width: 212px; border-radius: 12px; margin-right: 12px; overflow: hidden; } .productReview__ratingStats__fill { position: relative; height: 100%; background-color: #adb5bd; width: 0; } .productReview__ratingStats__num { position: relative; display: inline-block; font-size: 13px; 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 { width: 288px !important; margin-left: 88px; } .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; } .otherReviews { padding-top: 14px; } .otherReviews__item { display: flex; align-items: center; margin-bottom: 22px; } .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; } .allReviewStars { position: relative; width: 180px; height: 36px; background-color: #e3e3e3; margin-bottom: 42px; } .allReviewStars__wrapper { padding-top: 32px; text-align: center; margin-bottom: 12px; } .allReviewStars__num { font-size: 28px; font-weight: 700; color: #343a40; margin-left: 8px; line-height: 24px; } .allReviewStars__allNum { font-size: 28px; color: #adb5bd; font-weight: 300; 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; } .otherReviewsDetail { padding-top: 20px; } .otherReviewsDetail__title { font-size: 13px; color: #666968; margin-right: 8px; min-width: 88px; } .otherReviewsDetail__item { display: flex; align-items: center; margin-bottom: 24px; } .otherReviewsDetail__bar { background-color: #e9ecef; height: 8px; width: 144px; 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; } .storePick, .photoPick { margin-bottom: 20px; } .storePick__item, .photoPick__item { display: flex !important; gap: 20px; } .storePick__box, .photoPick__box { flex: 1; border: 1px solid #ced4da; min-height: 200px; border-radius: 6px; padding: 24px; cursor: pointer; } .storePick__top, .photoPick__top { display: flex; align-items: center; margin-bottom: 20px; } .storePick__userImage, .photoPick__userImage { width: 40px; height: 40px; margin-right: 6px; margin-top: 3px; } .storePick__userImage img, .photoPick__userImage img { width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .storePick__misc, .photoPick__misc { margin-left: 6px; font-size: 13px; } .storePick__misc__id, .photoPick__misc__id { color: #7e8282; } .storePick__misc__date, .photoPick__misc__date { color: #7e8282; } .storePick__misc > *, .photoPick__misc > * { position: relative; } .storePick__misc > * + *, .photoPick__misc > * + * { margin-left: 8px; } .storePick__misc > * + *::before, .photoPick__misc > * + *::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .storePick__misc__badge, .photoPick__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, .photoPick__body { display: flex; align-items: flex-start; } .storePick__reviewImage, .photoPick__reviewImage { position: relative; width: 80px; height: 80px; margin-right: 20px; margin-top: 4px; flex-shrink: 0; } .storePick__reviewImage img, .photoPick__reviewImage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .storePick__reviewImage::before, .photoPick__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, .photoPick__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, .photoPick__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; word-break: break-all; } .storePick__counter, .photoPick__counter { font-size: 18px; color: #666968; } .storePick__counter em, .photoPick__counter em { font-weight: 500; color: #252521; font-style: normal; } .storePick__controls, .photoPick__controls { position: relative; display: flex; justify-content: center; align-items: center; padding: 28px 0; } .storePick__controls__btn, .photoPick__controls__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .storePick__controls__btn.prev, .photoPick__controls__btn.prev { left: 0; } .storePick__controls__btn.prev::before, .photoPick__controls__btn.prev::before { display: block; content: ""; width: 12px; height: 12px; border-top: 1px solid #868e96; border-right: 1px solid #868e96; transform: rotate(-135deg); } .storePick__controls__btn.next, .photoPick__controls__btn.next { right: 0; } .storePick__controls__btn.next::before, .photoPick__controls__btn.next::before { display: block; content: ""; width: 12px; height: 12px; border-top: 1px solid #868e96; border-right: 1px solid #868e96; transform: rotate(45deg); } .storePick__controls__btn.disabled, .photoPick__controls__btn.disabled { pointer-events: none; opacity: 0.5; } .storePick__controls__btn:hover::before, .photoPick__controls__btn:hover::before { border-color: #343a40; } .storePick__controls__btnContainer, .photoPick__controls__btnContainer { position: absolute; top: 50%; transform: translateY(calc(-50% + 6px)); width: 140px; height: 38px; margin-inline: auto; } .photoReview { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #343a40; } .photoReview__thumbs { display: grid; grid-template-columns: repeat(9, 128px); justify-content: space-between; } .photoReview__thumbs__image, .photoReview__thumbs__moreImage { position: relative; width: 128px; height: 128px; cursor: pointer; } .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__sort { position: absolute; top: 0; right: 0; display: flex; align-items: center; } .userReview__sort li { position: relative; display: inline-block; } .userReview__sort li button { padding: 4px 6px; color: #666968; font-size: 15px; } .userReview__sort li button.current { color: #252521; font-weight: 700; } .userReview__sort li button:hover { color: #3a3a37; } .userReview__sort li + li { margin-left: 8px; } .userReview__sort li + li::before { position: absolute; content: "·"; color: #979b9d; left: -6px; top: 50%; transform: translateY(-50%); } .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 { margin-bottom: 40px; } .userReview__hashtag__btn { display: inline-block; padding: 4px 16px; border: 1px solid #ced4da; border-radius: 20px; font-size: 14px; color: #343a40; margin-right: 4px; } .userReview__hashtag__btn:hover { color: #0d0f12; background-color: #fafafa; } .userReview__hashtag__btn.selected { background-color: #495057; border-color: transparent; color: #ffffff; } .userReviewItem { border-bottom: 1px solid #e9ecef; margin-bottom: 20px; padding-left: 48px; 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: 20px; 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__body { position: relative; display: flex; align-items: flex-start; margin-bottom: 20px; } .userReviewItem__reviewImage { position: relative; width: 120px; height: 120px; flex-shrink: 0; cursor: pointer; margin-left: 60px; } .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 { max-width: 1048px; 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; flex-grow: 1; } .userReviewItem__likeContainer { display: flex; flex-direction: column; gap: 8px; margin-left: 60px; } .userReviewItem__like { flex-shrink: 0; display: inline-flex; justify-content: flex-end; align-items: center; font-size: 12px; color: #030507; border: 1px solid #dee2e6; gap: 4px; padding: 8px 16px; border-radius: 20px; min-width: 148px; } .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:hover { 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 { top: 48px; } .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: 4px 8px 4px 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__more:hover { text-decoration: underline; } .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__reviewImage { margin-left: 0; } .userReviewItem.opened .userReviewItem__body { flex-direction: column; } .userReviewItem.opened .userReviewItem__likeContainer { position: absolute; top: 0; right: 0; } .userReviewItem.opened:not(:has(.userReviewItem__likeContainer)) .userReviewItem__reviewText { max-width: none; } .userQnA__title { font-size: 28px; font-weight: 700; margin-bottom: 32px; } .userQnA__controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .userQnA__controls__btnControls { display: flex; gap: 4px; } .userQnA__controls .select-box .nice-select { height: 44px; line-height: 42px; } .userQnA .table { border-top: 2px solid #343a40; } .userQnA .table td, .userQnA .table th { font-size: 15px; } .userQnA .table .tr-foldable-trigger td, .userQnA .table .tr-foldable-trigger th { background-color: #ffffff; } .userQnA .tr-foldable__content { padding: 26px 32px; } .qnaWritePop .table th, .qnaWritePop .table td { height: 44px; } .qnaWritePop .table th { padding: 8px 16px; font-size: 14px; } .qnaWritePop .table td { padding: 8px 10px; font-size: 14px; } .qnaWritePop .input-text { font-size: 14px; padding: 0px 10px 0px 10px; } .qnaWritePop .textarea { padding: 6px 8px 6px 8px; } .qnaWritePop .select-box .nice-select { padding-left: 10px; font-size: 14px; } .qnaWritePop .select-box .nice-select .option { padding-left: 10px; } .userRefund { letter-spacing: 0; letter-spacing: -0.01em; } .userRefund__title { font-size: 28px; font-weight: 700; border-bottom: 2px solid #343a40; padding-bottom: 12px; margin-bottom: 32px; } .userRefund__sectionTitle { position: relative; font-size: 18px; font-weight: 700; color: #50514f; margin-bottom: 10px; } .userRefund__sectionSubTitle { display: block; font-size: 15px; font-weight: 500; color: #50514f; margin-bottom: 4px; } .userRefund__list { margin-bottom: 28px; } .userRefund__list li { position: relative; font-size: 13px; 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: 14px; height: 62px; } .userRefund .table th { padding: 8px 16px; font-weight: 400; } .userRefund .table td { padding: 8px 10px; } .userRefund__paragraph { font-size: 14px; color: #3a3a37; margin-bottom: 4px; } .userRefund a { text-decoration: underline; } .productCoupon { display: flex; width: 100%; min-height: 60px; margin-bottom: 20px; position: relative; } .productCoupon__left { display: flex; align-items: center; width: 480px; padding: 20px 16px 22px 26px; flex-shrink: 0; border-radius: 8px; border: 1px solid #dee2e6; border-right: 1px dashed #dee2e6; } .productCoupon__right { 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; gap: 6px; } .productCoupon .productDetailInfo__price__price { flex-direction: column; align-items: flex-start; } .productCoupon .productDetailInfo__price__original { font-size: 15px; line-height: 15px; } .productCoupon .productDetailInfo__price__current { line-height: 36px; color: #979b9d; font-size: 26px; } .productCoupon .productDetailInfo__price__current.coupon { color: #16191d; } .productCoupon .productDetailInfo__price__price > * + * { margin-left: 0; } .productCoupon__text { font-size: 16px; color: #666968; font-weight: 500; } .photoReviewDetail, .storePickDetail, .photoPickDetail { background-color: #ffffff; width: 960px; height: 620px; margin-inline: auto; border-radius: 8px; padding: 0 20px 20px 20px; box-shadow: 0 0 14px rgba(0, 0, 0, 0.45) !important; } .photoReviewDetail__top, .storePickDetail__top, .photoPickDetail__top { height: 60px; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; } .photoReviewDetail__top__text, .storePickDetail__top__text, .photoPickDetail__top__text { margin-right: 12px; color: #16191d; } .photoReviewDetail__top__num, .storePickDetail__top__num, .photoPickDetail__top__num { font-size: 22px; font-weight: 500; color: #666968; margin-bottom: 4px; } .photoReviewDetail__top__num .photoReviewDetail__currentIndex, .storePickDetail__top__num .photoReviewDetail__currentIndex, .photoPickDetail__top__num .photoReviewDetail__currentIndex { font-weight: 700; color: #16191d; } .photoReviewDetail__top__seeAll, .storePickDetail__top__seeAll, .photoPickDetail__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, .photoPickDetail__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, .photoPickDetail__top__seeAll:hover { text-decoration: underline; color: #3a3a37; } .photoReviewDetail__slide, .storePickDetail__slide, .photoPickDetail__slide { display: none !important; } .photoReviewDetail__slide .slick-arrow, .storePickDetail__slide .slick-arrow, .photoPickDetail__slide .slick-arrow { width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .photoReviewDetail__slide .slick-arrow.slick-prev, .storePickDetail__slide .slick-arrow.slick-prev, .photoPickDetail__slide .slick-arrow.slick-prev { left: -120px; } .photoReviewDetail__slide .slick-arrow.slick-prev::before, .storePickDetail__slide .slick-arrow.slick-prev::before, .photoPickDetail__slide .slick-arrow.slick-prev::before { transform: translate(calc(-50% + 6px), -50%) rotate(-135deg); } .photoReviewDetail__slide .slick-arrow.slick-next, .storePickDetail__slide .slick-arrow.slick-next, .photoPickDetail__slide .slick-arrow.slick-next { right: -120px; } .photoReviewDetail__slide .slick-arrow.slick-next::before, .storePickDetail__slide .slick-arrow.slick-next::before, .photoPickDetail__slide .slick-arrow.slick-next::before { transform: translate(calc(-50% - 6px), -50%) rotate(45deg); } .photoReviewDetail__slide .slick-arrow.slick-disabled, .storePickDetail__slide .slick-arrow.slick-disabled, .photoPickDetail__slide .slick-arrow.slick-disabled { display: none !important; } .photoReviewDetail__slide .slick-arrow:hover, .storePickDetail__slide .slick-arrow:hover, .photoPickDetail__slide .slick-arrow:hover { background-color: rgba(0, 0, 0, 0.2); } .photoReviewDetail__slide .slick-arrow::before, .storePickDetail__slide .slick-arrow::before, .photoPickDetail__slide .slick-arrow::before { content: ""; display: block; width: 36px; height: 36px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .photoReviewDetail__slide.active, .storePickDetail__slide.active, .photoPickDetail__slide.active { display: block !important; } .photoReviewDetail__item, .storePickDetail__item, .photoPickDetail__item { display: flex !important; align-items: flex-start; } .photoReviewDetail__mainImage, .storePickDetail__mainImage, .photoPickDetail__mainImage { flex-shrink: 0; width: 540px; height: 540px; display: flex; align-items: center; justify-content: center; background-color: #f7fafa; margin-right: 20px; } .photoReviewDetail__mainImage img, .storePickDetail__mainImage img, .photoPickDetail__mainImage img { max-height: 100%; } .photoReviewDetail__right, .storePickDetail__right, .photoPickDetail__right { flex-grow: 1; } .photoReviewDetail__rightTop, .storePickDetail__rightTop, .photoPickDetail__rightTop { display: flex; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #f1f3f5; } .photoReviewDetail__reviewText, .storePickDetail__reviewText, .photoPickDetail__reviewText { height: 360px; padding-top: 12px; padding-bottom: 12px; padding-right: 16px; font-size: 13px; color: #3a3a37; line-height: 1.6; letter-spacing: -0.01em; overflow-y: auto; margin-bottom: 16px; border-bottom: 1px solid #f1f3f5; } .photoReviewDetail__reviewText::-webkit-scrollbar, .storePickDetail__reviewText::-webkit-scrollbar, .photoPickDetail__reviewText::-webkit-scrollbar { width: 6px; } .photoReviewDetail__reviewText::-webkit-scrollbar-thumb, .storePickDetail__reviewText::-webkit-scrollbar-thumb, .photoPickDetail__reviewText::-webkit-scrollbar-thumb { background-color: #a3a3a3; border-radius: 6px; } .photoReviewDetail__userImage, .storePickDetail__userImage, .photoPickDetail__userImage { width: 44px; height: 44px; margin-right: 6px; margin-top: 3px; } .photoReviewDetail__userImage img, .storePickDetail__userImage img, .photoPickDetail__userImage img { width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .photoReviewDetail__rightBottom, .storePickDetail__rightBottom, .photoPickDetail__rightBottom { display: flex; justify-content: flex-end; align-items: center; } .photoReviewDetail__reviewAsk, .storePickDetail__reviewAsk, .photoPickDetail__reviewAsk { margin-right: auto; font-size: 13px; color: #666968; } .photoReviewDetail__misc, .storePickDetail__misc, .photoPickDetail__misc { margin-left: 6px; font-size: 13px; } .photoReviewDetail__misc__id, .storePickDetail__misc__id, .photoPickDetail__misc__id { color: #7e8282; } .photoReviewDetail__misc__date, .storePickDetail__misc__date, .photoPickDetail__misc__date { color: #7e8282; } .photoReviewDetail__misc > *, .storePickDetail__misc > *, .photoPickDetail__misc > * { position: relative; } .photoReviewDetail__misc > * + *, .storePickDetail__misc > * + *, .photoPickDetail__misc > * + * { margin-left: 8px; } .photoReviewDetail__misc > * + *::before, .storePickDetail__misc > * + *::before, .photoPickDetail__misc > * + *::before { position: absolute; content: "·"; color: #979b9d; left: -7px; } .photoReviewDetail__misc__badge, .storePickDetail__misc__badge, .photoPickDetail__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, .photoPickDetail__thumbs { display: flex; margin-bottom: 16px; } .photoReviewDetail__thumbs__item, .storePickDetail__thumbs__item, .photoPickDetail__thumbs__item { position: relative; width: 48px; height: 48px; margin-right: 2px; cursor: pointer; } .photoReviewDetail__thumbs__item img, .storePickDetail__thumbs__item img, .photoPickDetail__thumbs__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .photoReviewDetail__thumbs__item::before, .storePickDetail__thumbs__item::before, .photoPickDetail__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, .photoPickDetail__thumbs__item:hover::before { background-color: rgba(0, 0, 0, 0.3); } .photoReviewDetail__thumbs__item.current::before, .storePickDetail__thumbs__item.current::before, .photoPickDetail__thumbs__item.current::before { border: 3px solid #228be6; background-color: transparent; } .photoReviewDetail .userReviewItem__like, .storePickDetail .userReviewItem__like, .photoPickDetail .userReviewItem__like { position: static; padding: 6px 16px; min-width: 77px; } .photoReviewDetail .userReviewItem__like + .userReviewItem__like, .storePickDetail .userReviewItem__like + .userReviewItem__like, .photoPickDetail .userReviewItem__like + .userReviewItem__like { margin-left: 4px; } .photoReviewGallery { display: none; } .photoReviewGallery.active { display: block; } .photoReviewGallery__list { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; max-height: 540px; overflow-y: auto; } .photoReviewGallery__image { display: block; position: relative; width: 120px; height: 120px; cursor: pointer; } .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; } .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__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:first-child::after { background-color: #495057; } .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; } #userReviewTarget { scroll-margin-top: 160px; } .storeList__top { position: relative; display: flex; justify-content: center; align-items: center; height: 320px; } .storeList__topImage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 5px; 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: 48px; font-weight: 700; color: #ffffff; } .storeList__subTitle { font-size: 32px; font-weight: 500; color: #ffffff; } .storeList__tab { position: relative; margin-top: -56px; width: 1116px; overflow-x: auto; margin-inline: auto; white-space: nowrap; font-size: 0; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .storeList__tab::-webkit-scrollbar { display: none; } .storeList__tab__btn { position: absolute; width: 16px; height: 16px; top: 18px; left: 0; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; opacity: 0.7; transition: opacity 0.3s; } .storeList__tab__btn.previous { right: auto; left: 34px; transform: rotate(-45deg); } .storeList__tab__btn.next { left: auto; right: 34px; transform: rotate(135deg); } .storeList__tab__btn:hover { opacity: 1; } .storeList__tab__btn:disabled { pointer-events: none; opacity: 0; } .storeList__tab__wrapper { width: 100%; position: relative; } .storeList__tabBtn { background-color: rgba(0, 0, 0, 0.74); height: 56px; min-width: 120px; font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.8); text-align: center; border-radius: 5px 5px 0 0; padding: 0 16px; white-space: nowrap; margin: 0 2px; } .storeList__tabBtn:hover { background-color: rgba(0, 0, 0, 0.84); color: rgba(255, 255, 255, 0.92); } .storeList__tabBtn.current { background-color: #fafafa; color: #030507; } .storeList__tabBtn.current .storeList__tabText { position: relative; } .storeList__tabBtn.current .storeList__tabText::after { content: ""; position: absolute; height: 4px; width: 100%; background-color: currentColor; bottom: -8px; left: 0; } .storeList__content { background-color: #fafafa; padding: 60px; } .storeList__subList { position: relative; margin-bottom: 100px; } .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(4, 1fr); -moz-column-gap: 16px; column-gap: 16px; row-gap: 24px; margin-left: -12px; } .storeList__subList__list li a { position: relative; display: block; padding: 12px 0 12px 12px; 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:hover { background-color: #f5f5f5; } .storeList__subList__list li a:hover::after { opacity: 1; transform: translateY(-50%) rotate(45deg); } .storeList__subList__name { font-size: 16px; font-weight: 500; color: #030507; margin-right: 8px; } .storeList__subList__store { font-size: 14px; font-weight: 400; color: #7e8282; } .storeList__subList + .storeList__subList::before { position: absolute; content: ""; display: block; width: 100%; height: 1px; background-color: #ededed; top: -50px; } .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; } .storeDetail__top { margin-bottom: 52px; border-top: 2px solid #d0d0d0; padding-top: 44px; } .storeDetail__storeName { position: relative; font-size: 36px; font-weight: 700; margin-bottom: 16px; padding-left: 12px; } .storeDetail__storeName::before { position: absolute; content: ""; display: inline-block; width: 4px; height: 40px; background-color: #979b9d; left: 0; top: 10px; } .storeDetail__text { font-size: 16px; font-weight: 400; color: #666968; } .storeDetail__body { display: flex; margin-bottom: 120px; } .storeDetail__body .productDetailTop__left { margin-right: 20px; } .storeDetail__body .table-wrapper .table { height: 380px; } .storeDetail__body .table-wrapper .table td, .storeDetail__body .table-wrapper .table th { height: auto; } .storeDetail__body .productDetailGallery__current { height: 380px; } .storeDetail__map { margin-bottom: 60px; } .brandIntroImages { text-align: center; } .brandIntroImages img { display: inline-block; } .brandIntroMap__top { margin-bottom: 40px; } .brandIntroMap__storeName { position: relative; font-size: 28px; font-weight: 700; margin-bottom: 16px; padding-left: 12px; } .brandIntroMap__storeName::before { position: absolute; content: ""; display: inline-block; width: 4px; height: 32px; background-color: #979b9d; left: 0; top: 7px; } .brandIntroMap__text { font-size: 14px; font-weight: 400; color: #666968; } .eventList { display: grid; row-gap: 80px; width: 1276px; padding: 20px 0 100px; } .eventList.col-2 { grid-template-columns: repeat(2, 620px); justify-content: space-between; } .eventList.col-3 { grid-template-columns: repeat(3, 400px); justify-content: space-between; } .eventList.col-3 .eventList__title { font-size: 17px; } .eventList.col-3 .eventList__no-result { grid-column: span 3; } .eventList.col-4 { grid-template-columns: repeat(4, 300px); justify-content: space-between; } .eventList.col-4 .eventList__title { font-size: 16px; } .eventList.col-4 .eventList__date { font-size: 15px; } .eventList.col-4 .eventList__dDay { font-size: 13px; margin-bottom: 2px; } .eventList.col-4 .eventList__no-result { grid-column: span 4; } .eventList.col-4 .eventList__list li { font-size: 14px; } .eventList__item > a { display: block; } .eventList__title { font-size: 18px; font-weight: 700; color: #0d0f12; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eventList__bottom { display: flex; align-items: center; margin-bottom: 4px; } .eventList__image { margin-bottom: 20px; width: 100%; height: 260px; } .eventList__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .eventList__dDay { display: inline-block; background-color: #e03131; color: #ffffff; font-size: 14px; font-weight: 700; padding: 0 12px; border-radius: 24px; margin-right: 12px; } .eventList__date { font-size: 16px; font-weight: 400; color: #7e8282; padding-bottom: 1px; } .eventList__no-result { grid-column: span 2; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 72px 0 60px; } .eventList__no-result-text { margin-top: 20px; letter-spacing: -0.025em; font-size: 16px; color: #343a40; } .eventList__list { display: flex; flex-wrap: wrap; padding-bottom: 2px; } .eventList__list li { font-size: 15px; font-weight: 400; color: #7e8282; } .eventList__list li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; background-color: currentColor; margin: 0 6px; opacity: 0.4; } .eventDetail { padding: 20px 0 0; } .eventDetail__top { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #dee2e6; } .eventDetail__title { font-size: 28px; font-weight: 700; color: #0d0f12; margin-bottom: 20px; } .eventDetail__date { font-size: 16px; font-weight: 400; color: #7e8282; } .eventDetail__image { position: relative; display: block; } .eventDetail__image img { display: inline-block; } .eventDetail__answer { border: 1px solid #dee2e6; padding: 60px 80px 84px 80px; border-radius: 12px; width: 880px; margin-inline: auto; margin-bottom: 60px; } .eventDetail__answer__nonMember { display: block; padding-bottom: 48px; margin-bottom: 48px; text-align: left; border-bottom: 1px solid #e9ecef; } .eventDetail__answer__nonMember .input-text { font-size: 18px; padding-left: 12px; margin-bottom: 4px; height: 68px; background-color: #f5f5f5; border: none; } .eventDetail__answer__nonMember .input-text:focus { background-color: #f0f0f0; } .eventDetail__answer__nonMember .signUp__inputBox__itemTitle { font-size: 15px; } .eventDetail__answer__nonMember .signUp__inputBox__alertText { font-size: 14px; } .eventDetail__answer__nonMember .signUp__inputBox__item { margin-bottom: 20px; } .eventDetail__answer__inputWrapper { position: relative; display: flex; align-items: flex-start; width: 100%; } .eventDetail__answer__inputWrapper .signUp__inputBox__alertText { position: absolute; bottom: -24px; font-size: 14px; } .eventDetail__answer__input { width: 100%; height: 80px; padding: 0 12px; background-color: #f5f5f5; color: #030507; border-radius: 4px; font-size: 20px; font-weight: 400; color: #030507; outline: none; transition: all 0.2s ease-in-out; } .eventDetail__answer__input:focus { background-color: #f0f0f0; } .eventDetail__answer__btn { flex-shrink: 0; margin-left: 12px; text-align: center; height: 80px; min-width: 160px; background-color: #e03131; color: #ffffff; font-size: 24px; font-weight: 500; border-radius: 4px; padding: 0 16px; cursor: pointer; } .eventDetail__content { min-height: 200px; } .eventDetail .sub-bottom-btn-container { margin-top: 60px; } .eventDetail__list { display: flex; flex-wrap: wrap; padding-bottom: 2px; } .eventDetail__list li { font-size: 16px; 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; } .prev-next .prev-next__item { display: flex; border-top: 1px solid #f1f3f5; } .prev-next .prev-next__item .prev-next__title { font-size: 16px; font-weight: 500; padding: 24px 36px; flex-shrink: 0; color: #666968; } .prev-next .prev-next__item .prev-next__link { font-size: 16px; padding: 24px 16px; 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 { position: absolute; } .eventSurvey__item { margin-bottom: 60px; } .eventSurvey__question { display: flex; align-items: center; margin-bottom: 24px; } .eventSurvey__badge { display: inline-block; background-color: #f76707; color: #ffffff; font-size: 14px; font-weight: 700; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-right: 10px; } .eventSurvey__questionText { font-weight: 500; font-size: 18px; } .eventSurvey__btn.btn { height: 64px; font-size: 18px; } .eventSurvey .custom-radio-container { -moz-column-gap: 24px; column-gap: 24px; } .eventComment { padding-top: 60px; border-top: 1px solid #d1d6d8; margin-bottom: 60px; } .comment-write { display: flex; overflow: hidden; flex-wrap: wrap; 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 0 0 4px; border-right-color: transparent; } .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 { display: flex; gap: 12px; align-items: center; width: 100%; } .comment-write__info { margin-top: 10px; } .comment-write__info-inner { width: -moz-fit-content; width: fit-content; display: flex; border: 1px solid #dee2e6; border-radius: 4px; background-color: #ffffff; } .comment-write__info-item { position: relative; border-left: 1px solid #dee2e6; width: 280px; } .comment-write__info-item:first-child { border-left: none; } .comment-write__info-item:first-child:focus-within::after { border-radius: 4px 0 0 4px; } .comment-write__info-item:only-child:focus-within::after { border-radius: 4px; } .comment-write__info-item:focus-within::after { content: ""; position: absolute; z-index: 1; display: block; border: 1px solid #868e96; width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; border-radius: 0 4px 4px 0; } .comment-write__info-input { width: 100%; height: 56px; padding: 0 10px; font-size: 15px; outline: none; } .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 .b-checkbox-container { width: 100%; margin-top: 10px; } .comment-edit { display: flex; overflow: hidden; flex-wrap: wrap; } .comment-edit__textarea-container { position: relative; flex-grow: 1; padding: 8px 10px; 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 12px; 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 18px 16px 44px; } .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: 16px; 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: 12px; } .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; } .searchResult .page-title__title--searchResult { margin-bottom: 48px; font-size: 32px; } .searchResultTop { margin-bottom: 60px; } .searchResultTop .header-search-bar { margin-left: 0; margin-inline: auto; width: 600px; height: 60px; text-align: left; font-size: 18px; margin-bottom: 40px; } .searchPrice { display: flex; justify-content: center; padding: 28px 12px; background-color: #fafafa; border-radius: 5px; } .searchPrice__select__btn { display: inline-block; padding: 8px 24px; height: 44px; border: 1px solid #ced4da; border-radius: 32px; font-size: 14px; color: #343a40; margin-right: 4px; background-color: #ffffff; } .searchPrice__select__btn:hover { color: #0d0f12; background-color: #fafafa; } .searchPrice__select__btn.selected { background-color: #495057; border-color: transparent; color: #ffffff; } .searchPrice__select__btn:last-child { margin-right: 0; } .searchPrice__range { position: relative; display: flex; align-items: center; margin-left: 40px; } .searchPrice__range::before { position: absolute; content: ""; display: inline-block; width: 1px; height: 24px; background-color: #ced4da; top: 50%; left: -20px; transform: translateY(-50%); } .searchPrice__rangeInput { position: relative; background-color: #ffffff; overflow: hidden; height: 44px; padding-right: 35px; border: 1px solid #dee2e6; border-radius: 4px; text-align: right; width: 140px; } .searchPrice__rangeInput input { width: 100%; height: 100%; padding: 0 12px; font-size: 14px; border: none; outline: none; border-radius: 0; max-width: none; } .searchPrice__rangeInput:focus-within { border-color: #868e96; } .searchPrice__rangeWon { position: absolute; top: 11px; right: 10px; color: #7e8282; } .searchPrice__rangeTilde { margin: 0 6px; color: #7e8282; } .searchPrice__btn { margin-left: 12px; min-width: 100px; font-size: 16px; height: 44px; } .resultTrend { width: 720px; margin-inline: auto; margin-bottom: 60px; } .resultTrend__title { font-size: 36px; font-weight: 700; color: #16191d; margin-bottom: 28px; text-align: center; } .resultTrend__num { display: inline-block; font-size: 18px; font-weight: 700; color: #868e96; margin-right: 8px; 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: 16px 14px; -moz-column-gap: 40px; column-gap: 40px; } .resultTrend__list li { position: relative; } .resultTrend__list li a { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; padding: 0 28px 0 12px; margin: 20px 0; width: 100%; } .resultTrend__list li .icon { position: absolute; top: 26px; right: 2px; } .resultTrend__list li:nth-child(n+6)::after { position: absolute; content: ""; display: block; width: 1px; height: 100%; background-color: #e9ecef; left: -16px; top: 0; } .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; } .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; } .cartItem--postItem { border-bottom: 1px solid #dee2e6; margin-bottom: 20px; padding-bottom: 20px; } .postQuestion { color: #16191d; font-size: 16px; 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: 16px; } .postAnswer__title { font-size: 18px; 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; } .giftCardInform__inner { padding: 24px 0 60px; } .giftCardInform__top { margin-bottom: 68px; } .giftCardInform__title { font-size: 32px; font-weight: 700; color: #212529; margin-bottom: 28px; text-align: center; } .giftCardInform__subTitle { font-size: 16px; font-weight: 400; color: #7e8282; text-align: center; } .giftCardIntro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding: 0 140px; } .giftCardIntro__box { text-align: center; padding: 88px 0px; background-color: #f7f7f7; border-radius: 28px; margin-bottom: 24px; } .giftCardIntro__box img { display: inline-block; height: 92px; 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: 18px; font-weight: 500; color: #212529; margin-left: 4px; } .giftCardGuide .table tr { border-color: #e9ecef; } .giftCardGuide .table td { height: 72px; } .giftCardGuide .board-paragraph { line-height: 36px; } .giftCardGuide .board-paragraph a { display: inline; color: #50514f; text-decoration: underline; text-decoration-color: #979b9d; } .giftCardGuide .board-inner-product__title { position: relative; } .giftCardGuide .board-inner-product__title::after { position: absolute; content: ""; width: 11px; height: 11px; border: 2px solid #495057; border-width: 0 0 2px 2px; display: inline-block; top: 50%; right: 16px; transform: translateY(calc(-50% - 3px)) rotate(-45deg); } .giftCardGuide .tr-foldable-trigger.opened .board-inner-product__title::after { transform: translateY(calc(-50% + 3px)) rotate(135deg); } .wrap_error { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f8f9fa; } .inner_error { text-align: center; } .inner_error img { margin-inline: auto; margin-bottom: 36px; } .tit_error { display: block; font-size: 32px; font-weight: 700; margin-bottom: 28px; color: #030507; } .tit_error em { font-style: normal; color: #1c7ed6; } .desc_error { font-size: 14px; line-height: 24px; color: #50514f; margin-bottom: 20px; } .desc_info { width: -moz-fit-content; width: fit-content; margin-inline: auto; text-align: left; font-size: 14px; line-height: 26px; 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 */