@charset "UTF-8";
/* 샵바이 기본 스킨 공통 스타일 파일입니다. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");
@import url("https://shopby-skin.cdn-nhncommerce.com/font/font.css");
:root {
--color-error: #f92626;
--color-caution: #f92626;
--color-warning: #ff561d;
--color-success: #00a354;
--color-loading: #0f53b8;
--color-secondary: #3f434c;
--color-point: var(--gray200);
--color-tertiary: #408aec;
--color-base-white: #fff;
--color-base-black: #000;
--color-base-navy: #3f434c;
--color-error-tender: #ffeaee;
--color-warning-tender: #ffefdf;
--color-success-tender: #d3f8df;
--color-loading-tender: #d3e2f8;
--gray100: #f5f5f5;
--gray200: #ececec;
--gray300: #dedede;
--gray400: #a3a3a3;
--gray500: #6e6e6e;
--gray600: #444;
--gray700: #262626;
}
:where(html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
em,
img,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
video):not(.agreement__content *) {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
a,
button,
span,
img,
td,
th,
input,
label {
vertical-align: top;
}
input {
font: inherit;
}
ol,
ul,
menu {
list-style: none;
}
ol,
ul {
padding-left: 0;
}
dd {
margin-left: 0;
}
img {
display: block;
height: auto;
max-width: 100%;
}
body {
font-size: 16px;
line-height: 1.5;
font-family: "Noto Sans KR", "Montserrat", sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
white-space: revert;
}
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
:where(select) {
background-color: var(--color-base-white);
}
:where([hidden]) {
display: none;
}
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
:where([draggable=true]) {
-webkit-user-drag: element;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
.editor ul,
.editor ol,
.editor menu {
list-style: initial;
padding-left: 40px;
}
.editor ol {
list-style-type: decimal;
}
.editor h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.editor {
outline: none;
}
.editor sup {
vertical-align: super;
}
.editor sub {
vertical-align: sub;
}
.editor img.note-float-left {
margin-right: 10px;
}
.editor img.note-float-right {
margin-left: 10px;
}
.editor table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
}
.editor table td,
.editor table th {
border: 1px solid var(--gray200);
padding: 5px 3px;
}
.editor a {
background-color: inherit;
text-decoration: inherit;
font-family: inherit;
font-weight: inherit;
color: #337ab7;
}
.editor a:focus,
.editor a:hover {
color: #23527c;
text-decoration: underline;
outline: 0;
}
.editor figure {
margin: 0;
}
.highlight {
color: var(--color-point);
}
.caution {
color: var(--color-caution);
}
.middle {
margin: 0 auto;
}
.bold {
font-weight: 700;
}
.disabled {
background-color: #f5f6f8;
filter: opacity(0.5);
}
.extra-product-purchase__required {
color: var(--color-error);
}
.sprite-image {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
}
.font-noto {
font-family: "Noto Sans KR", sans-serif;
}
.font-montserrat {
font-family: "Montserrat", sans-serif;
}
.link {
border: 0;
background: none;
text-decoration: underline;
font-size: 16px;
}
.font-black {
color: var(--color-base-black);
}
.font-gray {
color: var(--gray500);
}
.more-view-button {
width: 100%;
height: 50px;
font-family: "Noto Sans KR", sans-serif;
margin-top: 25px;
font-size: 14px;
font-weight: 500;
}
.coupon-download-button {
width: 100%;
text-align: center;
padding: 20px 0;
font-size: 14px;
line-height: 14px;
font-weight: 500;
color: var(--color-base-white);
background-color: var(--color-point);
}
.coupon-download-button .ico--download-white {
padding-left: 12px;
}
.no-img {
width: 100%;
height: 100%;
display: inline-block;
background: center/contain no-repeat url("/assets/images/bg/no-img-round.png"), var(--gray100);
background-size: 46px;
}
.accordion__title {
border-bottom: 2px solid var(--color-base-black);
padding: 20px 0;
font-weight: 700;
}
.accordion__title::after {
content: "";
background: url("/assets/images/icons/ico-chevron-down-24.png") no-repeat center center/contain;
transform: translateY(-50%);
}
.accordion__title::-webkit-details-marker, .accordion__title::marker {
display: none;
content: "";
}
:where(.accordion[open]) .accordion__title::after {
transform: translateY(-50%) rotate(-180deg);
}
.accordion__items {
padding: 0;
border: none;
background-color: var(--color-base-white);
border-bottom: 1px solid var(--gray100);
}
.address {
position: relative;
padding: 14px 0;
}
.address__zip-code {
font-weight: 700;
margin-bottom: 5px;
}
.address__row {
display: flex;
align-items: center;
gap: 5px;
}
.address__row + .address__row {
margin-top: 5px;
}
.address__label {
min-width: 40px;
padding: 2px;
border: 1px solid var(--color-base-black);
font-size: 12px;
color: rgb(105, 105, 105);
text-align: center;
}
.address + .address {
border-top: 1px solid #ddd;
}
.address__btn {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.address-form__content {
padding: 20px;
}
.address-form__field-label {
display: inline-block;
}
.address-form__field-label.default-checkbox {
padding-block-start: 12px;
}
.address-form__field-label, .address-form .input-field {
margin-block-end: 12px;
}
.address-form__zip-code-box {
display: flex;
justify-content: none;
align-items: center;
flex-direction: row;
gap: 8px;
margin-block-end: 12px;
}
.address-form__zip-code-box .input-field {
flex: 1;
margin-block-end: 0;
}
.alert {
display: inline-block;
vertical-align: top;
}
.alert::before {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
content: "";
border-radius: 50%;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: top;
transform: translateY(2px);
margin-inline-end: 4px;
}
.alert--error {
color: var(--color-error);
}
.alert--error::before {
background-size: 364px 335px;
background-position: -331px -185px;
}
.alert--success {
color: var(--color-success);
}
.alert--success::before {
background-size: 364px 335px;
background-position: -111px -236px;
}
.alert--loading {
color: var(--color-loading);
}
.alert--loading::before {
background-size: 364px 335px;
background-position: -345px -185px;
}
.alert--warning {
color: var(--color-warning);
}
.alert--warning::before {
background-size: 364px 335px;
background-position: -125px -236px;
}
.modal.simple-text-alert .modal__box--alert {
padding: 16px 16px 20px 20px;
width: 270px;
min-width: 270px;
min-height: fit-content;
}
.modal.simple-text-alert .modal__title-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.modal.simple-text-alert .modal__header-title {
font-weight: 700;
font-size: 16px;
}
.modal.simple-text-alert .modal__close-x-btn {
border: none;
background: transparent;
}
.modal.simple-text-alert .modal__text {
font-weight: 400;
font-size: 12px;
color: var(--gray500);
text-align: start;
line-height: normal;
}
.modal.simple-text-alert .modal__content {
min-height: initial;
justify-content: flex-start;
margin-top: 10px;
}
.angle-top-down {
position: absolute;
top: -8px;
right: 0;
border: none;
background: none;
width: 1.125rem;
}
.angle-top-down svg {
transform: rotate(90deg);
}
.angle-top-down.is-active svg {
transform: rotate(-90deg);
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: 9px;
padding-inline: 10px;
font-weight: 700;
font-size: 16px;
line-height: 1;
}
.badge--fill-red {
color: var(--color-base-white);
background-color: var(--color-caution);
}
.badge--fill-navy {
color: var(--color-base-white);
background-color: var(--color-secondary);
}
.badge--fill-point {
color: var(--color-base-white);
background-color: var(--color-point);
}
.badge--line-dark {
color: var(--color-base-black);
border: 1px solid var(--color-base-black);
}
.badge--line-point {
color: var(--color-point);
border: 1px solid var(--color-point);
}
.badge--round {
padding-inline: 5px;
min-width: 18px;
height: 18px;
border-radius: 10px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
line-height: 1;
text-decoration: none;
}
.btn--fill-point {
border: 1px solid var(--color-point);
background-color: var(--color-point);
color: var(--color-base-white);
}
.btn--fill-dark {
border: 1px solid var(--color-base-black);
background-color: var(--color-base-black);
color: var(--color-base-white);
}
.btn--line-dark {
border: 1px solid var(--color-base-black);
background-color: var(--color-base-white);
color: var(--color-base-black);
}
.btn--line-gray {
border: 1px solid var(--gray300);
background-color: var(--color-base-white);
color: var(--color-base-black);
}
.fab {
display: inline-grid;
place-content: center;
border: 0;
padding: 0;
background-color: var(--color-secondary);
cursor: pointer;
}
.fab--sm {
width: 26px;
height: 26px;
}
.fab--md {
width: 60px;
height: 60px;
}
.pay-method-btn {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
height: 64px;
padding: 24px 20px;
color: var(--color-secondary);
border: 1px solid var(--color-base-white);
}
.pay-method-btn--checked {
color: var(--color-base-white);
border-color: var(--gray600);
background-color: var(--gray600);
}
.pay-method-btn--centered {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.pay-method-btn__label {
word-break: break-all;
margin-right: 10px;
}
.pay-method-btn__ico {
flex: none;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
}
.pay-method-btn__ico--pay-account-black {
background-size: 364px 335px;
background-position: -84px -256px;
width: 27px;
height: 22px;
}
.pay-method-btn__ico--pay-account-white {
background-size: 364px 335px;
background-position: -111px -256px;
width: 27px;
height: 22px;
}
.pay-method-btn__ico--chai {
background-size: 364px 335px;
background-position: -120px -165px;
width: 62px;
height: 18px;
}
.pay-method-btn__ico--chai-white {
background-size: 364px 335px;
background-position: -137px -143px;
width: 62px;
height: 18px;
}
.pay-method-btn__ico--pay-credit-card-black {
background-size: 364px 335px;
background-position: -180px -120px;
width: 28px;
height: 22px;
}
.pay-method-btn__ico--pay-credit-card-white {
background-size: 364px 335px;
background-position: -208px -120px;
width: 28px;
height: 22px;
}
.pay-method-btn__ico--pay-etc-black {
background-size: 364px 335px;
background-position: -286px -307px;
width: 24px;
height: 24px;
}
.pay-method-btn__ico--pay-etc-white {
background-size: 364px 335px;
background-position: -310px -307px;
width: 24px;
height: 24px;
}
.pay-method-btn__ico--kakaopay {
background-size: 364px 335px;
background-position: -276px -104px;
width: 64px;
height: 20px;
}
.pay-method-btn__ico--kakaopay-white {
background-size: 364px 335px;
background-position: -276px -84px;
width: 64px;
height: 20px;
}
.pay-method-btn__ico--pay-mobile-black {
background-size: 364px 335px;
background-position: -212px -56px;
width: 24px;
height: 30px;
}
.pay-method-btn__ico--pay-mobile-white {
background-size: 364px 335px;
background-position: -212px -88px;
width: 24px;
height: 30px;
}
.pay-method-btn__ico--naverpay {
background-size: 364px 335px;
background-position: -236px -148px;
width: 56px;
height: 22px;
}
.pay-method-btn__ico--naverpay-white {
background-size: 364px 335px;
background-position: -288px -124px;
width: 56px;
height: 22px;
}
.pay-method-btn__ico--payco {
background-size: 364px 335px;
background-position: -236px -200px;
width: 70px;
height: 16px;
}
.pay-method-btn__ico--payco-white {
background-size: 364px 335px;
background-position: -292px -148px;
width: 70px;
height: 16px;
}
.pay-method-btn__ico--pay-realtime-account-black {
background-size: 364px 335px;
background-position: -133px -57px;
width: 28px;
height: 25px;
}
.pay-method-btn__ico--pay-realtime-account-white {
background-size: 364px 335px;
background-position: 0px -256px;
width: 28px;
height: 25px;
}
.pay-method-btn__ico--tosspay {
background-size: 364px 335px;
background-position: -107px -204px;
width: 107px;
height: 20px;
}
.pay-method-btn__ico--tosspay-white {
background-size: 364px 335px;
background-position: 0px -204px;
width: 107px;
height: 20px;
}
.pay-method-btn__ico--pay-virtual-account-black {
background-size: 364px 335px;
background-position: -28px -256px;
width: 28px;
height: 22px;
}
.pay-method-btn__ico--pay-virtual-account-white {
background-size: 364px 335px;
background-position: -56px -256px;
width: 28px;
height: 22px;
}
.btn-group {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 20px 0;
gap: 12px;
}
.btn-group .btn {
flex: 1;
padding: 20px;
}
.btn-group--block-column {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.btn-group--block-row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.btn-group--inline-column {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
gap: 6px;
}
.btn-group--inline-column .btn {
padding: 10px 14px;
}
.btn-group--inline-row {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0;
gap: 6px;
}
.btn-group--inline-row .btn {
padding: 10px 14px;
}
.btn-group--sm .btn {
padding: 10px 14px;
}
.btn-group--md .btn {
padding: 10px 20px;
}
.btn-group--lg .btn {
padding: 10px 26px;
}
.character-counter {
display: block;
width: 100%;
color: var(--color-base-black);
}
.character-counter textarea {
font: inherit;
}
.character-counter__status {
display: block;
margin-top: 6px;
}
.character-counter__count {
color: var(--color-point);
font-weight: 500;
}
.character-counter__status--character {
text-align: end;
}
.character-counter__error {
color: var(--color-error);
font-size: 14px;
float: left;
}
.counter {
font-family: "Montserrat";
display: inline-flex;
max-width: 150px;
background-color: var(--color-base-white);
text-align: right;
font-size: 12px;
font-weight: 500;
}
.counter__btn {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 30px;
height: 30px;
border: 1px solid var(--gray300);
background-color: var(--color-base-white);
color: var(--color-base-black);
cursor: pointer;
}
.counter__input {
flex: 1;
border: solid var(--gray300);
border-width: 1px 0;
}
.counter input {
width: 100%;
height: 100%;
border: none;
padding: 5px 10px;
font-family: "Montserrat";
}
.counter input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.counter input:disabled {
border-color: var(--gray300);
background-color: var(--gray100);
}
.counter--center input {
text-align: center;
}
.counter button:disabled {
border-color: var(--gray300);
background-color: var(--gray100);
}
.dim {
position: fixed;
inset: 0 0 0 0;
background-color: var(--color-base-black);
opacity: 0.5;
}
.form-check {
position: relative;
display: inline-flex;
align-items: center;
line-height: normal;
}
.form-check input {
display: inline-block;
margin: 0;
appearance: none;
border: 1px solid var(--gray300);
background-color: var(--color-base-white);
}
.form-check input:checked {
background-size: cover;
background-color: transparent;
}
.form-check [type=radio] {
border-radius: 50%;
}
.form-check--sm {
gap: 8px;
}
.form-check--sm input {
width: 16px;
height: 16px;
}
.form-check--sm input:checked {
border: none;
background-color: var(--color-point);
}
.form-check--sm input[type=radio]:checked {
background-color: var(--color-base-white);
border: solid 5px var(--color-point);
}
.form-check--sm input[type=radio]:disabled {
background-color: var(--gray100) !important;
border: solid 1px var(--gray300);
}
.form-check--sm input[type=radio]:checked:disabled {
border: solid 5px var(--gray300);
}
.form-check--sm input[type=checkbox]:checked {
background-image: url("/assets/images/img-single/ico-check-white-16.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.form-check--sm input[type=checkbox]:disabled {
background-color: var(--gray100);
border: solid 1px var(--gray300);
}
.form-check--sm input[type=checkbox]:checked:disabled {
background-image: url("/assets/images/img-single/ico-check-gray-16.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.form-check--md {
gap: 12px;
}
.form-check--md input {
width: 20px;
height: 20px;
}
.form-check--md input:checked {
border: none;
background-color: var(--color-point);
}
.form-check--md input[type=radio]:checked {
background-color: var(--color-base-white);
border: solid 5px var(--color-point);
}
.form-check--md input[type=radio]:disabled {
background-color: var(--gray100) !important;
border: solid 1px var(--gray300);
}
.form-check--md input[type=radio]:checked:disabled {
border: solid 5px var(--gray300);
}
.form-check--md input[type=checkbox]:checked {
background-image: url("/assets/images/img-single/ico-check-white-20.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.form-check--md input[type=checkbox]:disabled {
background-color: var(--gray100);
border: solid 1px var(--gray300);
}
.form-check--md input[type=checkbox]:checked:disabled {
background-image: url("/assets/images/img-single/ico-check-gray-20.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.form-check--sm {
gap: 8px;
}
.form-check--sm.is-disabled input {
background-color: var(--gray100) !important;
border: solid 1px var(--gray300);
background-image: none;
}
.form-check--sm.is-disabled input[type=radio]:checked {
border: solid 5px var(--gray300);
}
.form-check--sm.is-disabled input[type=checkbox]:checked {
background-image: url("/assets/images/img-single/ico-check-gray-16.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.form-check--md {
gap: 12px;
}
.form-check--md.is-disabled input {
background-color: var(--gray100) !important;
border: solid 1px var(--gray300);
background-image: none;
}
.form-check--md.is-disabled input[type=radio]:checked {
border: solid 5px var(--gray300);
}
.form-check--md.is-disabled input[type=checkbox]:checked {
background-image: url("/assets/images/img-single/ico-check-gray-20.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
padding: 2px;
}
.email-input {
display: flex;
align-items: center;
gap: 10px;
}
.email-input__id {
flex: 2;
}
.email-input__domain {
flex: 3;
}
.input-field {
display: inline-block;
width: 100%;
color: var(--color-base-black);
border: 1px solid;
border-color: var(--gray300);
}
.input-field input {
display: block;
width: 100%;
height: 100%;
outline: none;
border: 0;
}
.input-field input::placeholder {
color: var(--gray500);
}
.input-field input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.input-field input:disabled {
border-color: var(--gray300);
background-color: var(--gray100);
}
.input-field:focus-within {
border-color: var(--color-base-black);
}
.input-field.is-disabled {
border-color: var(--gray300);
background-color: var(--gray100);
}
.input-field.is-error {
border-color: var(--color-error);
}
.input-field--sm {
height: 40px;
font-size: 14px;
}
.input-field--sm input {
padding-inline: 10px;
}
.input-field--md {
height: 48px;
font-size: 16px;
}
.input-field--md input {
padding-inline: 20px;
}
.input-with-unit {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding-right: 10px;
border: 1px solid #ddd;
}
.input-with-unit__input {
text-align: right;
border: none;
}
.input-with-unit__input input {
padding-right: 5px;
}
.input-with-unit__unit {
padding-top: 2px;
white-space: nowrap;
font-size: 12px;
color: var(--gray100);
font-weight: 500;
vertical-align: middle;
}
.phone-number-input {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.phone-number-input__bar {
width: 10px;
border-top: 1px solid var(--color-base-black);
margin: 0 4px;
}
.phone-number-input .select-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex: 2;
height: inherit;
border: 1px solid #ddd;
}
.phone-number-input__first-serial {
flex: 3;
height: inherit;
}
.phone-number-input__second-serial {
flex: 3;
height: inherit;
}
.select {
position: relative;
display: inline-block;
width: 100%;
color: var(--color-base-black);
border: 1px solid;
border-color: var(--gray300);
}
.select select {
width: 100%;
height: 100%;
padding-right: 30px;
-webkit-appearance: none;
appearance: none;
border: 0;
font: inherit;
color: inherit;
}
.select select:disabled {
border-color: var(--gray300);
background-color: var(--gray100);
}
.select::after {
position: absolute;
top: 50%;
right: 20px;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -292px -164px;
transform: translateY(-50%);
content: "";
width: 13px;
height: 6px;
}
.select--sm {
height: 40px;
font-size: 14px;
}
.select--sm select {
padding-inline: 10px 40px;
}
.select--md {
height: 48px;
font-size: 16px;
}
.select--md select {
padding-inline: 20px 40px;
}
.mini-select {
position: relative;
}
.mini-select select {
width: 100%;
padding-right: 30px;
appearance: none;
border: 0;
font: inherit;
color: inherit;
background-color: transparent;
height: auto;
}
.mini-select::after {
position: absolute;
top: 50%;
right: 0;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -336px -80px;
transform: translateY(-50%);
content: "";
width: 13px;
height: 6px;
}
.mini-select--sm {
font-size: 14px;
}
.mini-select--sm select {
padding: 0;
}
.mini-select.mini-select-white {
color: var(--color-base-white);
}
.mini-select.mini-select-white::after {
position: absolute;
top: 50%;
right: 0;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -344px -80px;
transform: translateY(-50%);
content: "";
width: 13px;
height: 6px;
}
.text-area {
width: 100%;
height: inherit;
border: 1px solid #ddd;
vertical-align: top;
min-height: 6.25rem;
line-height: 1.375rem;
padding: 0.625rem;
}
.text-area textarea {
width: 100%;
height: inherit;
padding: 10px;
}
.text-field {
width: 100%;
height: 48px;
display: inline-block;
overflow: hidden;
border: 1px solid #ddd;
vertical-align: top;
min-height: 1.875rem;
font-size: 18px;
box-sizing: border-box;
}
.text-field input {
width: 100%;
height: inherit;
padding: 13px 25px;
}
.text-field input[type=number]::-webkit-outer-spin-button, .text-field input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.text-field input[readonly] {
background-color: var(--input-disabled-bg-color);
}
.ico {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
display: inline-block;
}
.ico--alert-circle-black-12 {
background-size: 364px 335px;
background-position: -168px -87px;
width: 12px;
height: 12px;
}
.ico--alert-circle-gray-16 {
background-size: 364px 335px;
background-position: -306px -200px;
width: 16px;
height: 16px;
}
.ico--download-black-12 {
background-size: 364px 335px;
background-position: -168px -99px;
width: 12px;
height: 12px;
}
.ico--download-white-12 {
background-size: 364px 335px;
background-position: -168px -111px;
width: 12px;
height: 12px;
}
.ico--magnet-white-12 {
background-size: 364px 335px;
background-position: -153px -236px;
width: 12px;
height: 12px;
}
.ico--question-black-12 {
background-size: 364px 335px;
background-position: -137.5px -224px;
width: 12px;
height: 12px;
}
.ico--x-black-12 {
background-size: 364px 335px;
background-position: -161.5px -224px;
width: 12px;
height: 12px;
}
.ico--x-white-12 {
background-size: 364px 335px;
background-position: -173.5px -224px;
width: 12px;
height: 12px;
}
.ico--clip-16 {
background-size: 364px 335px;
background-position: -322px -200px;
width: 16px;
height: 16px;
}
.ico--n-16 {
background-size: 364px 335px;
background-position: -182px -165px;
width: 16px;
height: 16px;
}
.ico--n-white-16 {
background-size: 364px 335px;
background-position: -198px -165px;
width: 16px;
height: 16px;
}
.ico--lock-black-16 {
background-size: 364px 335px;
background-position: -217px -143px;
width: 16px;
height: 16px;
}
.ico--bag-black-24 {
background-size: 364px 335px;
background-position: -146px -281px;
width: 24px;
height: 24px;
}
.ico--bag-disabled-24 {
background-size: 364px 335px;
background-position: -170px -281px;
width: 24px;
height: 24px;
}
.ico--arrow-left-black-24 {
background-size: 364px 335px;
background-position: -74px -281px;
width: 24px;
height: 24px;
}
.ico--chevron-down-24 {
background-size: 364px 335px;
background-position: -194px -281px;
width: 24px;
height: 24px;
}
.ico--heart-black-24 {
background-size: 364px 335px;
background-position: -338px -281px;
width: 24px;
height: 24px;
}
.ico--heart-white-24 {
background-size: 364px 335px;
background-position: -22px -307px;
width: 24px;
height: 24px;
}
.ico--home-black-24 {
background-size: 364px 335px;
background-position: -46px -307px;
width: 24px;
height: 24px;
}
.ico--share-black-24 {
background-size: 364px 335px;
background-position: -166px -307px;
width: 24px;
height: 24px;
}
.ico--x-black-24 {
background-size: 364px 335px;
background-position: -238px -307px;
width: 24px;
height: 24px;
}
.ico--x-white-24 {
background-size: 364px 335px;
background-position: -262px -307px;
width: 24px;
height: 24px;
}
.ico--magnet-black-24 {
background-size: 364px 335px;
background-position: -94px -307px;
width: 24px;
height: 24px;
}
.ico--user-circle-black-24 {
background-size: 364px 335px;
background-position: -214px -307px;
width: 24px;
height: 24px;
}
.ico--clock-rewind-black-24 {
background-size: 364px 335px;
background-position: -242px -281px;
width: 24px;
height: 24px;
}
.ico--hamburger-black-24 {
background-size: 364px 335px;
background-position: -290px -281px;
width: 24px;
height: 24px;
}
.ico--search-black-24 {
background-size: 364px 335px;
background-position: -142px -307px;
width: 24px;
height: 24px;
}
.ico--angle-down-black-24 {
background-size: 364px 335px;
background-position: -26px -281px;
width: 24px;
height: 24px;
}
.ico--help-circle-14 {
background-size: 364px 335px;
background-position: -139px -236px;
width: 14px;
height: 14px;
}
.ico--circle-x-gray-bg-16 {
background-size: 364px 335px;
background-position: -95.5px -236px;
width: 16px;
height: 16px;
}
.ico--naver-28 {
background-size: 364px 335px;
background-position: -340px -84px;
width: 28px;
height: 28px;
}
.ico--payco-28 {
background-size: 364px 335px;
background-position: 0px -307px;
width: 28px;
height: 28px;
}
.ico--kakao-28 {
background-size: 364px 335px;
background-position: -138px -256px;
width: 28px;
height: 28px;
}
.ico--kakao-sync-28 {
background-size: 364px 335px;
background-position: -160px -256px;
width: 28px;
height: 28px;
}
.ico--facebook-28 {
background-size: 364px 335px;
background-position: -336px -52px;
width: 28px;
height: 28px;
}
.ico--google-28 {
background-size: 364px 335px;
background-position: -266px -281px;
width: 28px;
height: 28px;
}
.ico--apple-28 {
background-size: 364px 335px;
background-position: -344px -124px;
width: 28px;
height: 28px;
}
.ico--line-28 {
background-size: 364px 335px;
background-position: -70px -307px;
width: 28px;
height: 28px;
}
.ico--help-circle-14 {
background-size: 364px 335px;
background-position: -139px -236px;
width: 14px;
height: 14px;
}
.ico--arrow-narrow-up-white-24 {
background-size: 364px 335px;
background-position: -98px -281px;
width: 24px;
height: 24px;
}
.ico--clock-rewind-24 {
background-size: 364px 335px;
background-position: -218px -281px;
width: 24px;
height: 24px;
}
.ico--thumbs-up-16 {
background-size: 364px 335px;
background-position: -214px -165px;
width: 16px;
height: 16px;
}
.ico--best-24 {
background-size: 364px 335px;
background-position: -236px -124px;
width: 24px;
height: 24px;
}
.ico--gallery-32 {
background-size: 364px 335px;
background-position: -180px -88px;
width: 32px;
height: 32px;
}
.ico--list-32 {
background-size: 364px 335px;
background-position: 0px -224px;
width: 32px;
height: 32px;
}
.ico--corner-down-right-16 {
background-size: 364px 335px;
background-position: -338px -200px;
width: 16px;
height: 16px;
}
.ico--o-simple {
background-size: 364px 335px;
background-position: -236px -16px;
width: simplepx;
height: simplepx;
}
.ico--o-simple-white {
background-size: 364px 335px;
background-position: -236px 0px;
width: whitepx;
height: whitepx;
}
.ico--app-card-28 {
background-size: 364px 335px;
background-position: -50px -281px;
width: 28px;
height: 28px;
}
.offcanvas {
position: fixed;
z-index: 30;
inset: 0 0 0 0;
overflow: hidden;
}
.offcanvas__container {
position: absolute;
top: 0;
z-index: 10;
width: 447px;
height: 100%;
background-color: var(--color-base-white);
transition: all 0.3s ease-in-out;
}
.offcanvas:not(.is-active) {
display: none;
}
.offcanvas__fab {
position: absolute;
top: 0;
}
.offcanvas.is-start .offcanvas__container {
left: 0;
transform: translateX(-150%);
}
.offcanvas.is-start .offcanvas__fab {
left: 100%;
}
.offcanvas.is-end .offcanvas__container {
left: auto;
right: 0;
transform: translateX(150%);
}
.offcanvas.is-end .offcanvas__fab {
right: 100%;
}
.offcanvas.is-show .offcanvas__container {
transform: translateX(0);
}
.offcanvas__dim {
transition: all 0.3s ease-in-out;
}
.offcanvas:not(.is-show) .offcanvas__dim {
opacity: 0;
}
.pagination {
display: flex;
justify-content: center;
font-size: 16px;
color: var(--color-base-black);
font-weight: 500;
}
.pagination__btn, .pagination__link {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: "Montserrat";
}
.pagination__btn {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0;
background-color: transparent;
cursor: pointer;
}
.pagination__btn--double-lt, .pagination__btn--double-rt {
background-size: 364px 335px;
background-position: -180px -56px;
}
.pagination__btn--lt, .pagination__btn--rt {
background-size: 364px 335px;
background-position: -32px -224px;
}
.pagination__btn--double-rt, .pagination__btn--rt {
transform: rotate(180deg);
}
.pagination__btn--lt {
margin-inline-end: 20px;
}
.pagination__btn--rt {
margin-inline-start: 20px;
}
.pagination__link {
color: inherit;
}
.pagination__link + .pagination__link {
margin-inline-start: 10px;
}
.pagination__link.is-current {
color: var(--color-base-white);
background-color: var(--color-point);
}
.pagination__link span {
font-family: "Montserrat";
}
.page-content-top__path {
display: inline-flex;
gap: 10px;
}
.page-content-top__title {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin: 40px 0;
}
.page-content-top__location, .page-content-top__location a {
text-decoration: unset;
letter-spacing: -0.33px;
font-size: 12px;
font-weight: 500;
color: var(--gray500);
}
.page-content-top__location a, .page-content-top__location a a {
padding-block-end: 1px;
border-bottom: 1px solid var(--gray500);
}
.page-content-top__location a:hover, .page-content-top__location a a:hover {
color: var(--color-point);
border-bottom: 1px solid var(--color-point);
}
.page-content-top__location:last-of-type {
color: var(--color-base-black);
}
.page-content-top h2 {
font-weight: 700;
font-size: 24px;
line-height: 24px;
}
.page-content-top__breadcrumb {
font-family: "Montserrat";
font-weight: 400;
font-size: 16px;
line-height: 16px;
color: var(--gray500);
gap: 20px;
}
.page-content-top__breadcrumb > .current {
font-weight: 700;
color: var(--color-base-black);
}
.page-content-top__breadcrumb li {
position: relative;
}
.page-content-top__breadcrumb li:not(:last-of-type)::after,
.page-content-top__breadcrumb li:not(:last-of-type)::before {
position: absolute;
content: "";
width: 6px;
border-color: var(--gray500);
border-radius: 4px;
right: -14px;
}
.page-content-top__breadcrumb li::before {
border-top: 1px solid;
transform: rotateZ(40deg);
top: 38%;
}
.page-content-top__breadcrumb li::after {
border-bottom: 1px solid;
transform: rotateZ(-40deg);
bottom: 38%;
}
.page-content-top__breadcrumb-category {
position: relative;
}
.page-content-top__breadcrumb-category:hover .page-content-top__breadcrumb-category-siblings {
display: block;
}
.page-content-top__breadcrumb-category:hover .page-content-top__breadcrumb-category-siblings a {
border-bottom: unset;
}
.page-content-top__breadcrumb-category::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 25px;
}
.page-content-top__breadcrumb-category-label {
padding-right: 18px;
cursor: pointer;
}
.page-content-top__breadcrumb-category-label::after {
position: absolute;
top: 50%;
right: 0;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -305px -164px;
content: "";
transform: translateY(-50%);
width: 12px;
height: 6px;
}
.page-content-top__breadcrumb-category-siblings {
position: absolute;
top: 25px;
right: -18px;
display: none;
z-index: 10;
padding: 15px 20px;
background-color: var(--color-base-white);
box-shadow: inset 0 0 0 1px var(--gray300);
width: calc(100% + 36px);
min-width: 160px;
}
.page-content-top__breadcrumb-category-siblings a {
border-bottom: unset;
}
.page-content-top__breadcrumb-category-siblings::before {
position: absolute;
top: -6px;
right: 18px;
transform: rotate(-45deg);
content: "";
width: 12px;
height: 12px;
background-color: inherit;
border: 1px solid var(--gray300);
border-width: 1px 1px 0 0;
}
.page-content-top__breadcrumb-category-siblings > li:nth-child(n+2) {
margin-block-start: 10px;
}
.quantity-changer {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
font-size: 14px;
width: 90px;
height: 26px;
border: 1px solid #ddd;
background-color: white;
}
.quantity-changer__decrease-btn {
border-right: 1px solid #ddd;
}
.quantity-changer__increase-btn {
border-left: 1px solid #ddd;
}
.quantity-changer__increase-btn, .quantity-changer__decrease-btn {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 25px;
height: 100%;
font-size: 24px;
}
.quantity-changer__increase-btn:disabled, .quantity-changer__decrease-btn:disabled {
background-color: var(--gray300);
color: var(--gray100);
cursor: default;
}
.quantity-changer__input {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 0.75rem;
color: var(--color-base-black);
width: 40px;
border: none;
text-align: center;
}
.quantity-changer__input input:disabled {
background-color: var(--gray300);
}
.quantity-changer button {
cursor: pointer;
}
.quantity {
position: relative;
padding: 10px;
background: #f6f6f6;
}
.quantity__label {
display: block;
padding-right: 0.75rem;
color: var(--color-secondary);
}
.quantity__content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.quantity__content em {
font-weight: 600;
}
.quantity__price {
width: max-content;
}
.quantity__del {
position: absolute;
top: 3px;
right: 10px;
color: var(--gray100);
cursor: pointer;
font-size: 20px;
visibility: visible;
}
.quantity.undeletable .quantity__del {
visibility: hidden;
}
.rating {
--rating-count: 0;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
position: relative;
display: inline-block;
overflow: hidden;
}
.rating::before {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
content: "";
}
.rating--sm {
background-size: 364px 335px;
background-position: -236px -185px;
width: 81px;
height: 15px;
}
.rating--sm::before {
background-size: 364px 335px;
background-position: -236px -170px;
width: var(--rating-count);
height: 15px;
}
.rating--md {
background-size: 364px 335px;
background-position: -108px -184px;
width: 108px;
height: 20px;
}
.rating--md::before {
background-size: 364px 335px;
background-position: 0px -184px;
width: var(--rating-count);
height: 20px;
}
.star .crema_product_reviews_score_star_wrapper__star {
fill: var(--color-point);
}
.star .gradient__star-secondary {
stop-color: var(--color-point);
}
.star .gradient__star {
stop-color: #eaecf0;
}
.recent-keyword {
min-height: 418px;
padding: 0 17px 28px;
border: 1px solid #ddd;
border-radius: 5px;
}
.recent-keyword__top {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.recent-keyword__top p {
font-size: 16px;
font-weight: 500;
color: var(--color-base-black);
}
.recent-keyword__top button {
font-size: 12px;
text-align: right;
color: rgba(121, 121, 121, 0.5019607843);
cursor: pointer;
border: 0;
}
.recent-keyword__item {
display: flex;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
align-items: center;
margin-top: 18px;
}
.recent-keyword__content-empty {
padding: 112px 0 0;
text-align: center;
}
.recent-keyword__content-empty::before {
display: inline-block;
margin-bottom: 20px;
transform: translateX(2px);
content: "";
}
.recent-keyword__content-empty p {
color: #ddd;
}
.search-field {
display: flex;
align-items: center;
gap: 10px;
}
.search-field__input {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
flex: 1;
}
.search-field__clear-btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
line-height: 1;
}
.search-field__submit-btn {
margin-left: 10px;
}
.search-field__text-input input {
border: none;
}
.search-field__search-btn {
position: absolute;
right: 0;
padding-right: 10px;
background-color: transparent;
border: none;
cursor: pointer;
}
.search-field__select-box {
width: 180px;
}
.shopping-basket {
position: relative;
background-size: 364px 335px;
background-position: -190px -307px;
width: 26px;
height: 26px;
display: inline-block;
}
.shopping-basket__count {
position: absolute;
right: -3px;
bottom: -3px;
width: 13px;
height: 13px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: var(--color-point);
border-radius: 50%;
vertical-align: top;
text-align: center;
color: var(--color-base-white);
font-size: 10px;
}
.skeleton {
background-color: var(--color-base-white);
}
.skeleton__media {
background-color: #ddd;
aspect-ratio: 1/1;
border-radius: 4px;
-webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
animation: skeleton-gradient 1.8s infinite ease-in-out;
}
.skeleton__line {
height: 15px;
background-color: #ddd;
border-radius: 4px;
-webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
animation: skeleton-gradient 1.8s infinite ease-in-out;
}
.skeleton--gallery {
flex: 1;
}
.skeleton--gallery + .skeleton--gallery {
margin-left: 10px;
}
.skeleton--gallery .skeleton__media,
.skeleton--gallery div:nth-child(2) {
margin-bottom: 10px;
}
.skeleton--gallery div:nth-child(3) {
width: 30%;
}
.skeleton--list {
display: flex;
}
.skeleton--list + .skeleton--list {
margin-top: 10px;
}
.skeleton--list .skeleton__media {
width: 120px;
height: 120px;
}
.skeleton--list .skeleton__media + div {
padding: 20px 10px 10px;
flex: 1;
}
.skeleton--list .skeleton__line--tit {
margin-bottom: 10px;
width: 15%;
}
.skeleton--list .skeleton__line--product-name {
margin-bottom: 10px;
}
.skeleton--list .skeleton__line--product-price {
width: 30%;
}
.skeleton--product-summary {
margin-top: 20px;
margin-left: 20px;
}
.skeleton--product-summary .skeleton__line--product-summary__main-category {
width: 300px;
height: 18px;
}
.skeleton--product-summary .skeleton__line--product-summary__brand-name {
width: 70px;
height: 18px;
margin-top: 8px;
}
.skeleton--product-summary .skeleton__line--product-summary__title {
width: 350px;
height: 24px;
margin-top: 8px;
}
.skeleton--product-summary .skeleton__line--product-summary__promotion-text {
width: 250px;
height: 21px;
margin-top: 12px;
}
.skeleton--product-summary .skeleton__line--product-summary__price {
width: 250px;
height: 27px;
margin-top: 12px;
}
.skeleton-grid {
display: grid;
padding-block-end: 12px;
}
.skeleton-grid .skeleton--gallery {
margin-left: 0;
}
.skeleton-grid__column--1 {
gap: 12px;
grid-template-columns: repeat(1, 1fr);
}
.skeleton-grid__column--2 {
gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
.skeleton-grid__column--3 {
gap: 12px;
grid-template-columns: repeat(3, 1fr);
}
.skeleton-grid__column--4 {
gap: 12px;
grid-template-columns: repeat(4, 1fr);
}
.skeleton-grid__column--5 {
gap: 12px;
grid-template-columns: repeat(5, 1fr);
}
@-webkit-keyframes skeleton-gradient {
0% {
background-color: rgba(165, 165, 165, 0.1);
}
50% {
background-color: rgba(165, 165, 165, 0.3);
}
100% {
background-color: rgba(165, 165, 165, 0.1);
}
}
@keyframes skeleton-gradient {
0% {
background-color: rgba(165, 165, 165, 0.1);
}
50% {
background-color: rgba(165, 165, 165, 0.3);
}
100% {
background-color: rgba(165, 165, 165, 0.1);
}
}
.padding {
padding: 30px;
}
.swiper-pagination-bullet.round_square {
border-radius: 0.142em;
}
.swiper-pagination-bullet.square {
border-radius: 0;
}
.swiper-pagination-bullet.size_two {
width: 12px;
height: 12px;
}
.swiper-pagination-bullet.size_three {
width: 16px;
height: 16px;
}
.swiper-pagination-bullet.size_four {
width: 20px;
height: 20px;
}
.swiper-pagination-bullet.size_five {
width: 24px;
height: 24px;
}
.swiper-pagination-bullet.size_six {
width: 28px;
height: 28px;
}
.tab {
display: inline-flex;
color: var(--gray600);
font-weight: 400;
}
.tab--full {
width: 100%;
}
.tab--full .tab__item {
flex: 1;
}
.tab--full .tab__btn {
width: 100%;
}
.tab__btn {
display: block;
background-color: var(--color-base-white);
border: 0;
border-block-end: 1px solid var(--gray300);
cursor: pointer;
font: inherit;
color: inherit;
}
.tab__btn.is-active {
color: var(--color-point);
border-block-end-color: var(--color-point);
font-weight: 700;
}
.tab__contents {
padding-block: 20px;
}
.tab__content {
display: flex;
padding-bottom: 30px;
}
.tab__content.is-inactive {
display: none;
}
.tab__content--overflow {
flex-wrap: nowrap;
overflow-x: scroll;
}
.tab__content--overflow .tab__item {
flex: 0 0 auto;
}
.tab a {
text-decoration: none;
font-weight: 700;
color: var(--gray400);
}
.tab.category-tab {
flex-wrap: wrap;
}
.text-option {
margin-top: 10px;
}
.text-option em {
color: var(--color-point);
}
.text-option__input {
margin-left: 4px;
padding: 3px 3px 3px 0;
border: 1px solid;
}
.video-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.video-wrapper.w-130 {
width: 130px;
}
.video-cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.thumb-item__media iframe.thumb {
width: revert-layer;
height: revert-layer;
background-color: var(--color-base-white);
}
.thumb-item {
position: relative;
display: block;
}
.thumb-item em {
font-style: normal;
font-weight: 700;
}
.thumb-item__media {
position: relative;
overflow: hidden;
display: block;
background: url("/assets/images/bg/no-img.png") no-repeat center center/contain;
aspect-ratio: 1/1;
}
.thumb-item__media:has(img[loading=lazy]) {
background: unset;
}
.thumb-item__adult {
position: absolute;
top: 0;
left: 0;
}
.thumb-item__img:is(.hover-scale) {
transition: all 0.4s ease-in-out;
}
.thumb-item__img:is(.hover-scale):hover {
transform: scale(1.1);
}
.thumb-item__img {
width: 100%;
height: 100%;
display: inline-flex;
position: relative;
border: 1px solid var(--gray200);
background-color: var(--color-base-white);
}
.thumb-item__img img {
width: 100%;
vertical-align: top;
object-fit: contain;
}
.thumb-item__img .no-img {
width: 100%;
height: 100%;
background: center/contain no-repeat url("/assets/images/bg/no-img-round.png"), var(--gray100);
background-size: 46px;
}
.thumb-item__overlay {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
background-color: var(--color-base-black);
color: var(--color-base-white);
font-size: 18px;
font-weight: 500;
opacity: 0.5;
white-space: pre;
}
.thumb-item__icon-box img {
display: inline-block;
}
.thumb-item__info {
display: block;
padding: 10px;
color: var(--color-base-black);
}
.thumb-item__status-label {
position: absolute;
top: 0;
left: 0;
padding: 0.375rem 0.5rem;
color: var(--color-base-white);
z-index: 5;
}
.thumb-item__status-label--READY {
background-color: var(--color-point);
}
.thumb-item__status-label--STOP {
background-color: var(--color-base-black);
}
.thumb-item__status-label--FINISHED {
background-color: var(--color-secondary);
color: var(--color-base-white);
}
.thumb-item__like-btn svg {
width: 1.75rem;
position: absolute;
bottom: 0.5rem;
right: 0.625rem;
}
.thumb-item__link {
text-decoration: none;
color: initial;
}
.thumb-item__badges {
position: absolute;
top: 0;
left: 0;
}
.thumb-item .rate,
.thumb-item .current-price,
.thumb-item .origin-price {
font-family: "Montserrat";
}
.thumb-item .rate em,
.thumb-item .current-price em,
.thumb-item .origin-price em {
font-family: "Montserrat";
}
.thumb-item .rate s,
.thumb-item .current-price s,
.thumb-item .origin-price s {
font-family: "Montserrat";
}
.thumb-item .origin-price {
color: var(--gray500);
}
.dot {
position: relative;
}
.dot--l-must::before {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.75em;
background-color: var(--color-caution);
}
.dot--l-caution::before {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.75em;
background-color: var(--color-caution);
}
.dot--l-notice::before {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.75em;
background-color: var(--color-point);
}
.dot--l-gray::before {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.75em;
background-color: var(--gray500);
}
.dot--l-dark::before {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -0.75em;
background-color: var(--color-base-black);
}
.dot--r-must::after {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.75em;
background-color: var(--color-caution);
}
.dot--r-caution::after {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.75em;
background-color: var(--color-caution);
}
.dot--r-notice::after {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.75em;
background-color: var(--color-point);
}
.dot--r-gray::after {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.75em;
background-color: var(--gray500);
}
.dot--r-dark::after {
display: block;
content: "";
width: 4px;
height: 4px;
font-size: 0.75em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.75em;
background-color: var(--color-base-black);
}
.total-sort {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
position: -webkit-sticky;
position: sticky;
top: 70px;
z-index: 10;
padding: 20px;
background-color: var(--color-base-white);
}
.total-sort__count .highlight {
margin: 0 -2px 0 2px;
font-weight: 700;
font-style: normal;
color: var(--color-point);
}
.total-sort .select {
width: max-content;
}
.recent-product__fab {
position: absolute;
top: 0;
right: 0;
}
.recent-product-wrap {
padding: 20px;
overflow-y: scroll;
height: calc(100% - 97px);
padding: 24px 0;
}
.recent-product-wrap a {
text-decoration: none;
color: unset;
}
.recent-product-wrap .recent-product-box {
display: flex;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 20px;
}
.recent-product-wrap .recent-product-item {
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
height: 105px;
border: solid 1px var(--gray200);
gap: 30px;
overflow: hidden;
width: 100%;
}
.recent-product-wrap .recent-product-item-wrap {
position: relative;
width: calc(100% - 40px);
}
.recent-product-wrap .recent-product-item__img {
width: 105px;
height: 105px;
flex-shrink: 0;
}
.recent-product-wrap .recent-product-item__img img {
width: 100%;
height: 100%;
}
.recent-product-wrap .recent-product-item__info {
padding-right: 30px;
}
.recent-product-wrap .recent-product-item__info-name {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
color: var(--color-base-black);
font-size: 14px;
font-weight: 500;
}
.recent-product-wrap .recent-product-item__info-price {
display: flex;
align-items: flex-end;
flex-direction: row;
gap: 6px;
}
.recent-product-wrap .recent-product-item__info-price .current-price {
display: flex;
align-items: center;
flex-direction: row;
color: var(--color-base-black);
}
.recent-product-wrap .recent-product-item__info-price .current-price em {
font-style: normal;
font-size: 16px;
font-weight: 700;
}
.recent-product-wrap .recent-product-item__info-price .current-price span {
font-size: 12px;
font-weight: 500;
}
.recent-product-wrap .recent-product-item__info-price .origin-price s {
color: var(--gray400);
font-size: 12px;
font-weight: 400;
}
.folding-images-by-one-row {
position: relative;
margin-right: 15px;
margin-bottom: 10px;
}
.folding-images-by-one-row li {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.folding-images-by-one-row li img {
max-height: 6.25rem;
}
.folding-images-by-one-row li a {
width: "auto";
height: "auto";
}
.folding-images-by-one-row__image-count {
width: 18px;
height: 18px;
position: absolute;
right: 0;
bottom: 0;
font-size: 10px;
line-height: 18px;
text-align: center;
color: var(--color-base-white);
background-color: rgba(63, 68, 76, 0.8);
}
.folding-images-by-one-row__image-zoom-in {
position: absolute;
right: 0;
bottom: 0;
width: 26px;
height: 26px;
background-color: var(--color-secondary);
}
.folding-images-by-one-row__image-zoom-in:hover {
cursor: pointer;
}
.folding-images-by-one-row.is-active {
margin: 0;
overflow-x: auto;
overflow-y: hidden;
}
.folding-images-by-one-row.is-active .folding-images-by-one-row__image-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.folding-images-by-one-row.is-active .folding-images-by-one-row__image-count {
visibility: hidden;
}
.folding-images-by-one-row.is-active img {
aspect-ratio: 1/1;
}
.folding-images-by-one-row__image-zoom-in {
border: none;
}
.notice {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
font-size: 16px;
line-height: 18px;
font-weight: 400;
color: var(--gray500);
}
.notice em {
font-style: normal;
font-size: 16px;
line-height: 20px;
font-weight: 700;
color: var(--color-base-black);
}
.notice--caution {
width: 56px;
height: 56px;
background-size: 364px 335px;
background-position: 0px -87px;
margin-bottom: 16px;
}
.notice--success {
width: 56px;
height: 56px;
background-size: 364px 335px;
background-position: -56px -87px;
margin-bottom: 16px;
}
.notice--waiting {
width: 56px;
height: 56px;
background-size: 364px 335px;
background-position: -112px -87px;
margin-bottom: 16px;
}
.notice--warning {
width: 56px;
height: 56px;
background-size: 364px 335px;
background-position: -180px 0px;
margin-bottom: 16px;
}
.notice--align-start {
align-items: flex-start;
}
.notice--align-start-column {
flex-direction: column;
}
.notice--align-start-row {
flex-direction: row;
}
.notice--align-end {
align-items: flex-end;
}
.notice--align-end-column {
flex-direction: column;
}
.notice--align-end-row {
flex-direction: row;
}
.notice--align-center {
align-items: center;
}
.notice--align-center-column {
flex-direction: column;
}
.notice--align-center-row {
flex-direction: row;
}
.notice__description--center {
text-align: center;
}
.notice--full {
/* NOTE - Small, Large, and Dynamic viewport units를 지원하지 않는 브라우저를 위해 추가된 polyfill 코드입니다. */
min-height: 50vh;
min-height: 50dvh;
}
.total-count {
display: inline-flex;
justify-content: center;
align-items: baseline;
flex-direction: row;
font-family: "Noto Sans KR";
font-size: 16px;
line-height: 16px;
}
.total-count em, .total-count .highlight {
font-family: "Montserrat";
padding-left: 4px;
font-style: normal;
font-weight: 700;
color: var(--color-point);
}
.total-count--sm {
font-family: "Noto Sans KR";
font-size: 14px;
line-height: 16px;
}
.total-count--sm em, .total-count--sm .highlight {
font-family: "Montserrat";
padding-left: 2px;
}
.total-count--md {
font-family: "Noto Sans KR";
font-size: 16px;
line-height: 18px;
}
.total-count--md em, .total-count--md .highlight {
font-family: "Montserrat";
padding-left: 4px;
}
.total-count--lg {
font-family: "Noto Sans KR";
font-size: 18px;
line-height: 20px;
}
.total-count--lg em, .total-count--lg .highlight {
font-family: "Montserrat";
padding-left: 4px;
}
.total-count--xl {
font-family: "Noto Sans KR";
font-size: 20px;
line-height: 20px;
}
.total-count--xl em, .total-count--xl .highlight {
font-family: "Montserrat";
padding-left: 4px;
}
.kc-certification {
margin-top: 10px;
border: 1px solid var(--gray200);
display: table;
width: 100%;
padding: 20px 0;
}
.kc-certification.certification-no-39 .kc-logo {
display: none;
}
.kc-certification.certification-no-39 .kc-info {
padding-left: 30px;
}
.kc-logo {
display: table-cell;
width: 32px;
padding: 0 30px;
vertical-align: middle;
}
.kc-logo .ico {
width: 32px;
height: 49px;
background: url("/assets/images/img-single/icon_kc.jpg") no-repeat 4px center;
background-size: contain;
background-position: center;
}
.kc-info {
display: table-cell;
font-size: 14px;
padding-right: 30px;
}
.kc-description {
font-weight: 500;
}
.kc-code {
margin-top: 8px;
font-weight: 400;
}
.attachment button {
cursor: pointer;
}
.attachment__items {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
gap: 0.125rem;
flex-wrap: wrap;
width: 100%;
padding-top: 10px;
}
.attachment__input {
width: 80px;
height: 80px;
position: relative;
border: 1px solid var(--color-base-black);
background-color: var(--color-base-white);
cursor: pointer;
}
.attachment__input::before, .attachment__input::after {
width: 20px;
height: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
content: "";
border-radius: 2px;
border-top: 2px solid var(--color-base-black);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.attachment__input::before {
transform: translate(-50%, -50%) rotateZ(-90deg);
}
.attachment__media {
position: relative;
border: 1px solid var(--gray300);
}
.attachment__media img {
width: 80px;
height: 80px;
aspect-ratio: 1/1;
object-fit: contain;
}
.attachment__delete {
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
cursor: pointer;
border: none;
background-color: var(--color-secondary);
}
.attachment__delete::before, .attachment__delete::after {
position: absolute;
top: 42%;
right: 50%;
width: 16px;
height: 0;
content: "";
border-radius: 2px;
border-top: 2px solid var(--color-base-white);
background-color: var(--color-base-white);
}
.attachment__delete::before {
transform: translate(50%, 50%) rotate(45deg);
}
.attachment__delete::after {
transform: translate(50%, 50%) rotate(-45deg);
}
.attach-file__input {
width: 100%;
}
.attach-file__item {
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 8px 20px;
border: 1px solid #ddd;
}
.attach-file__item img {
width: 35px;
height: 35px;
object-fit: cover;
margin-right: 12px;
}
.attach-file__name {
flex: 1;
font-size: 18px;
}
.attach-file__remove-button {
cursor: pointer;
display: contents;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
width: 90px;
height: 90px;
display: inline-block;
border: 4px solid var(--gray100);
border-bottom-color: var(--gray400);
border-radius: 50%;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes shine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.loader {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.loader--sm::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: 700;
background: linear-gradient(to right, var(--gray100) 20%, var(--gray200) 30%, var(--gray300) 70%, var(--gray400) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 500% auto;
animation: shine 2s ease-in-out infinite alternate;
}
.loader--sm .spinner {
width: 30px;
height: 30px;
}
.loader--md::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: 700;
background: linear-gradient(to right, var(--gray100) 20%, var(--gray200) 30%, var(--gray300) 70%, var(--gray400) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 500% auto;
animation: shine 2s ease-in-out infinite alternate;
}
.loader--md .spinner {
width: 40px;
height: 40px;
}
.loader--lg::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: 700;
background: linear-gradient(to right, var(--gray100) 20%, var(--gray200) 30%, var(--gray300) 70%, var(--gray400) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 500% auto;
animation: shine 2s ease-in-out infinite alternate;
}
.loader--lg .spinner {
width: 50px;
height: 50px;
}
.image-file-uploader {
margin-block: 12px;
}
.image-file-uploader .hidden {
display: none;
}
.image-file-uploader__skeleton {
width: 80px;
height: 80px;
}
.image-file-uploader__add-btn {
background-color: var(--color-base-white);
cursor: pointer;
width: 80px;
height: 80px;
position: relative;
border: 1px solid var(--gray400);
}
.image-file-uploader__add-btn::before, .image-file-uploader__add-btn::after {
width: 16px;
height: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
content: "";
border-radius: 2px;
border-top: 2px solid var(--gray500);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image-file-uploader__add-btn::before {
transform: translate(-50%, -50%) rotateZ(-90deg);
}
.image-file-uploader__notices {
margin-top: 12px;
}
.image-file-uploader__notice {
position: relative;
margin-top: 8px;
font-size: 14px;
font-weight: 400;
color: var(--gray500);
padding-left: 18px;
opacity: 0.8;
}
.image-file-uploader__notice::before {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
position: absolute;
content: "※";
color: var(--gray500);
}
.image-file-uploader__image {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
border: 2px solid var(--gray400);
}
.image-file-uploader__image img {
display: inline-block;
}
.image-file-uploader .disabled {
pointer-events: none;
}
.image-file-uploader__delete {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 28px;
border: none;
background-color: var(--background-color);
opacity: 0.6;
cursor: pointer;
z-index: 15;
}
.image-file-uploader__delete:before, .image-file-uploader__delete:after {
position: absolute;
top: 2px;
left: 14px;
width: 2px;
height: 22px;
background-color: var(--gray700);
content: " ";
}
.image-file-uploader__delete:before {
transform: rotate(45deg);
}
.image-file-uploader__delete:after {
transform: rotate(-45deg);
}
.cash-receipt-modal {
padding: 30px;
}
.cash-receipt__key {
display: flex;
gap: 10px;
}
.cash-receipt__key .cash-receipt__key-type {
flex: 1;
}
.cash-receipt__value {
margin-top: 15px;
}
.netfunnel-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
height: 100vh;
height: 100dvh;
}
.netfunnel {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 16px;
}
.netfunnel__header {
font-weight: 700;
font-size: 20px;
line-height: 30px;
letter-spacing: 0;
}
.netfunnel__waiting-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
width: 100%;
background-color: #f6f7f9;
padding: 24px 0;
border-radius: 16px;
gap: 8px;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
}
.netfunnel__waiting-count {
font-weight: 700;
color: #1570ef;
}
.netfunnel__message {
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
color: #667085;
text-align: center;
}
.sub-terms {
padding-left: 35px;
}
.coupon-download-wrap {
padding-bottom: 62px;
}
.coupon-download__btn-wrap {
float: right;
}
.coupon-download-content {
padding: 40px 20px;
}
.coupon-download__description {
font-weight: 500;
}
.coupon-download__description em {
font-style: normal;
color: var(--color-point);
}
.coupon-download__coupons {
margin-top: 20px;
}
.coupon-download__coupon {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 28px;
padding: 30px;
border: 1px solid var(--gray200);
}
.coupon-download__coupon:not(:first-child) {
margin-top: 20px;
}
.coupon-download__coupon.modifier {
background-color: var(--gray400);
}
.coupon-download__coupon-name {
font-weight: 700;
}
.coupon-download__coupon-info-btn {
color: #737373;
font-weight: 400;
font-size: 12px;
}
.coupon-download__coupon-info-btn u {
cursor: pointer;
}
.coupon-download__discount-information {
margin-top: 10px;
color: var(--color-point);
font-weight: 700;
font-size: 18px;
}
.coupon-download__discount-amount {
vertical-align: baseline;
}
.coupon-download__discount-description {
font-size: 12px;
color: var(--gray600);
font-weight: 400;
}
.coupon-download__info-area {
flex: 2;
}
.coupon-download__btn-area {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 8px;
}
.coupon-download__btn-area .btn {
padding: 10px;
}
.coupon-download__all-btn {
position: fixed;
bottom: 0;
width: 100%;
}
.coupon-download__all-btn .btn {
width: 100%;
}
.image-zoom-in-pc .title-modal__content {
width: 588px;
height: 673px;
overflow: auto;
}
.image-zoom-in .swiper {
margin: 10px;
}
.image-zoom-in .swiper .image-label {
text-align: center;
}
.image-zoom-in .swiper-slide img {
margin: 0 auto;
}
.image-zoom-in .swiper-button-prev,
.image-zoom-in .swiper-button-next {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--color-base-black);
opacity: 0.6;
}
.image-zoom-in .swiper-button-prev::after,
.image-zoom-in .swiper-button-next::after {
font-size: 20px;
}
.shipping-address-list-wrap {
padding: 20px;
}
.shipping-address-list em {
font-style: unset;
font-weight: 700;
}
.shipping-address-list__btns {
display: flex;
font-size: 14px;
margin-top: 42px;
gap: 12px;
}
.shipping-address-list__btns .btn {
border-radius: 0;
padding: 20px;
}
.shipping-address-list__btns .btn--point {
border: 1px solid var(--color-point);
}
.shipping-address-list__btns .btn--fill {
background-color: var(--color-point);
color: var(--color-base-white);
}
.shipping-address-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 12px 0 24px 0;
border-bottom: 1px solid var(--gray300);
gap: 12px;
}
.shipping-address-item span {
word-break: break-all;
}
.shipping-address-item .form-check {
flex: none;
width: 24px;
}
.shipping-address-item em {
font-style: unset;
font-weight: 700;
}
.shipping-address-item__default {
border: 1px solid var(--color-point);
color: var(--color-point);
padding: 4px;
}
.shipping-address-item__address-name {
font-weight: 500;
}
.shipping-address-item__info-wrap {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
gap: 6px;
flex: 1;
}
.shipping-address-item__info {
width: 100%;
font-size: 14px;
line-height: 16px;
}
.shipping-address-item__address {
display: block;
line-height: 16px;
}
.shipping-address-item__contact-type {
display: inline-block;
margin-block-start: 12px;
}
.shipping-address-item__contact-type:not(:first-child) {
margin-inline-start: 12px;
}
.shipping-address-item .btn-group {
flex: none;
}
.shipping-address-item .btn-group .btn {
min-width: 48px;
}
.search-zip-code button {
background-color: transparent;
border: none;
cursor: pointer;
}
.search-zip-code em {
font-style: normal;
}
.search-zip-code__search {
background-color: #f5f6f8;
padding: 20px;
}
.search-zip-code .text-field {
position: relative;
}
.search-zip-code .text-field input {
border: none;
padding: 12px 20px;
font-size: 16px;
}
.search-zip-code .clear-btn {
position: absolute;
top: 50%;
right: 10px;
background-size: 364px 335px;
background-position: -95.5px -236px;
width: 16px;
height: 16px;
transform: translateY(-50%);
padding: 0px;
}
.search-zip-code .search-btn {
background-size: 364px 335px;
background-position: -118px -307px;
width: 24px;
height: 24px;
}
.search-zip-code__search-tip {
margin-block-start: 6px;
margin-inline: 20px;
color: #8f8f8f;
font-size: 14px;
}
.search-zip-code__items {
padding: 0 20px;
}
.search-zip-code__tip-tit {
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid var(--color-base-black);
padding-block: 8px;
margin-block: 8px;
}
.search-zip-code .notice__content {
color: var(--color-base-black);
margin-inline-start: 4px;
line-height: 16px;
}
.search-zip-code .empty-list {
padding-block: 40px;
}
.search-zip-code .pagination {
margin-block: 20px;
}
.modal {
background-color: var(--color-base-white);
color: var(--color-base-black);
border-radius: 0;
border: 0;
}
.modal__header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-bottom: 1px solid var(--color-base-black);
height: 60px;
}
.modal__header-title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 18px;
}
.modal__header-close-btn {
position: absolute;
right: 20px;
border: none;
background-color: transparent;
}
.modal__box {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
.modal__box--alert, .modal__box--confirm {
min-width: 350px;
min-height: 120px;
max-width: 500px;
padding: 40px 30px;
}
.modal__title {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
padding: 0.625rem;
margin-bottom: 0.625rem;
border-bottom: 1px solid #ddd;
}
.modal__title img {
cursor: pointer;
width: 18px;
height: 18px;
}
.modal__text {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
text-align: center;
}
.modal__content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
min-width: 100%;
min-height: 120px;
}
.modal__content img {
margin: 1.25rem;
width: 100px;
height: 87px;
}
.modal__content--confirm {
flex-direction: column;
}
.modal__content--custom {
display: inline-block;
}
.modal__btns {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
width: 100%;
height: auto;
margin-top: auto;
padding-top: 30px;
gap: 12px;
}
.modal__btns .btn {
flex: 1;
}
.modal__btns .btn:nth-of-type(n + 2) {
border-left: 1px solid;
}
.modal__box--alert .modal__btns {
justify-content: center;
}
.modal__box--alert .btn {
max-width: 384px;
}
.portal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
}
.portal.alert, .portal.confirm {
z-index: 35;
}
.portal .dim {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.portal .modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.prevent-scroll {
overflow-y: hidden;
}
.title-modal {
position: relative;
width: 100%;
height: 100%;
}
.title-modal button {
cursor: pointer;
}
.title-modal__header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-bottom: 1px solid var(--color-base-black);
height: 60px;
}
.title-modal__title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 18px;
}
.title-modal__content {
overflow: inherit;
}
.title-modal__close-btn {
position: absolute;
right: 20px;
border: none;
background-color: transparent;
}
.title-modal--full {
margin: 0 auto;
width: 100%;
}
@media (min-width: 500px) {
.title-modal--full {
min-width: 500px;
}
}
.title-modal--full .title-modal__content {
overflow-y: auto;
height: 872px;
}
.design-popup {
position: absolute;
z-index: 25;
background-color: inherit;
border: 1px solid var(--gray200);
}
.design-popup img {
display: initial;
max-width: unset;
object-fit: cover;
}
.design-popup .btn {
padding: unset;
background: unset;
min-width: unset;
}
.design-popup__content {
overflow: auto;
overscroll-behavior: contain;
text-align: center;
}
.design-popup__content--overscroll {
overscroll-behavior: auto;
}
.design-popup__btns {
display: flex;
justify-content: end;
align-items: center;
flex-direction: row;
padding-inline: 15px;
padding-block: 10px;
}
.design-popup__btns:has(.design-popup__btn--no-visible-today) {
justify-content: space-between;
}
@supports not selector(:has(.design-popup__btn--no-visible-today)) {
.design-popup__btns {
flex-direction: row-reverse;
justify-content: space-between;
}
.design-popup__btn--no-visible-today {
order: 2;
}
.design-popup__btn--close {
order: 1;
}
}
.design-popup__btn--no-visible-today {
color: var(--gray500);
}
.design-popup__slider--sub {
width: 100%;
}
.design-popup__slide {
overflow: hidden;
background-color: var(--color-base-white);
}
.design-popup--fixed-top {
position: sticky;
z-index: 20;
}
.design-popup--fixed-top .design-popup__btns {
position: absolute;
top: 0;
right: 10px;
border: none;
flex-direction: column;
height: 100%;
align-items: end;
}
.design-popup--fixed-top .design-popup__btn--no-visible-today {
order: 2;
}
.design-popup--resizable img {
max-width: 100%;
}
.design-popup--window {
position: unset;
width: max-content;
max-width: 100dvw;
margin-left: auto;
margin-right: auto;
}
.design-popup--draggable {
will-change: top, left;
}
.accordion__with-border-bottom {
border-bottom: 1px solid var(--gray200);
}
.accordion__title {
position: relative;
display: flex;
justify-content: normal;
align-items: center;
flex-direction: row;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
.accordion__title::after {
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 24px;
}
.accordion__content-wrapper {
padding: 22px 0;
}
.btn {
font-size: 18px;
gap: 16px;
min-width: 97px;
}
.btn--xs {
padding: 10px 14px;
font-size: 12px;
height: 32px;
font-weight: 500;
}
.btn--xs-wide {
padding: 10px 14px;
font-size: 12px;
width: 100%;
margin-block-start: 20px;
}
.btn--sm {
padding: 15px 20px;
font-size: 16px;
font-weight: 500;
}
.btn--sm-wide {
padding: 15px 20px;
font-size: 16px;
width: 100%;
margin-block-start: 20px;
}
.btn--md {
padding: 23px 30px;
font-size: 18px;
font-weight: 500;
}
.btn--md-wide {
padding: 23px 30px;
font-size: 18px;
width: 100%;
margin-block-start: 20px;
}
.btn--lg {
padding: 23px 30px;
font-size: 18px;
min-width: 248px;
font-weight: 500;
}
.btn--lg-wide {
padding: 23px 30px;
font-size: 18px;
width: 100%;
margin-block-start: 20px;
}
.btn--xl {
padding: 23px 30px;
font-size: 18px;
min-width: 384px;
font-weight: 500;
}
.btn--xl-wide {
padding: 23px 30px;
font-size: 18px;
width: 100%;
margin-block-start: 20px;
}
table .product-option-info,
dd .product-option-info {
display: flex;
gap: 20px;
align-items: center;
}
table .product-option-info__name,
dd .product-option-info__name {
width: calc(100% - 120px);
}
table .product-option-info__name a,
dd .product-option-info__name a {
text-decoration: none;
}
table .product-option-info__option,
dd .product-option-info__option {
font-size: 12px;
}
table .product-option-info .thumb-item__img,
dd .product-option-info .thumb-item__img {
border: 1px solid var(--gray200);
}
table .product-option-info em,
dd .product-option-info em {
font-weight: 700;
vertical-align: baseline;
}
table.l-table .product-option-info,
dd.l-table .product-option-info {
text-align: left;
}
.base-product-name {
font-weight: 400;
color: var(--gray600);
}
.base-product-name-wrapper {
font-weight: 700;
font-size: 14px;
padding-block: 6px;
}
.extra-product__sticker {
background-color: var(--gray400);
color: white;
padding: 2px 8px;
font-weight: 500;
font-size: 12px;
line-height: 24px;
}
/* 추가상품 배지 안의 (필수) 표기 */
.extra-product__sticker-required {
color: var(--color-error);
}
.tab__btn {
padding: 20px 10px;
font-size: 18px;
}
.tab__title {
font-size: 30px;
}
.date-selector {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-direction: row;
padding: 14px 14px 14px 10px;
gap: 10px;
background: var(--gray100);
}
.date-selector__button_box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0px;
height: 16px;
}
.date-selector__date-calendar {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: row;
padding: 0px;
gap: 12px;
height: 30px;
}
.date-selector__date_input_wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: row;
height: 100%;
}
.date-selector__select-btn {
position: relative;
font-size: 16px;
color: var(--gray500);
padding: 3px 16px;
min-width: 25px;
background-color: transparent;
}
.date-selector__select-btn::after {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
content: "";
display: block;
width: 1px;
height: 12px;
background-color: var(--gray300);
}
.date-selector__select-btn:last-child::after {
content: none;
}
.date-selector__select-btn.on {
color: var(--color-base-black);
font-weight: 700;
}
.date-selector__date-picker-wrap {
display: flex;
align-items: center;
gap: 12px;
z-index: 9;
}
.date-selector__date_search_button {
height: 14px;
}
.date-selector__date-picker {
width: 130px;
height: 36px;
}
.date-selector__date-picker input {
font-family: "Montserrat";
font-size: 14px;
padding: 10px 20px;
}
.date-selector .date-picker__search {
padding: 10px 25px;
font-size: 14px;
font-weight: 500;
}
.swiper-button-prev,
.swiper-button-next {
z-index: 3;
}
.swiper-pagination-bullet.round_square {
border-radius: 0.142em;
}
.swiper-pagination-bullet.square {
border-radius: 0;
}
.swiper-pagination-bullet.size_two {
width: 12px;
height: 12px;
}
.swiper-pagination-bullet.size_three {
width: 16px;
height: 16px;
}
.swiper-pagination-bullet.size_four {
width: 20px;
height: 20px;
}
.swiper-pagination-bullet.size_five {
width: 24px;
height: 24px;
}
.swiper-pagination-bullet.size_six {
width: 28px;
height: 28px;
}
.next-action-btns {
display: flex;
align-items: center;
flex-direction: column;
column-gap: 11px;
gap: 5px;
}
.recent-product__fab {
position: absolute;
top: 0;
right: 0;
}
.offcanvas-title {
padding: 30px 0;
text-align: center;
border-bottom: solid 1px var(--gray200);
color: var(--color-base-black);
font-size: 24px;
font-weight: 700;
}
.recent-product-wrap {
overflow-y: scroll;
height: calc(100% - 97px);
padding: 24px 0;
}
.recent-product-wrap a {
text-decoration: none;
color: unset;
}
.recent-product-wrap .recent-product-box {
display: flex;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 24px;
}
.recent-product-wrap .recent-product-item {
display: flex;
align-items: center;
flex-direction: row;
width: 387px;
height: 120px;
border: solid 1px var(--gray200);
gap: 24px;
overflow: hidden;
width: 100%;
}
.recent-product-wrap .recent-product-item-wrap {
position: relative;
}
.recent-product-wrap .recent-product-item__img {
width: 120px;
height: 120px;
}
.recent-product-wrap .recent-product-item__img img {
width: 100%;
height: 100%;
}
.recent-product-wrap .recent-product-item__info-name {
color: var(--color-base-black);
font-size: 18px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.recent-product-wrap .recent-product-item__info-price {
display: flex;
align-items: flex-end;
flex-direction: row;
gap: 6px;
}
.recent-product-wrap .recent-product-item__info-price .current-price {
display: flex;
align-items: center;
flex-direction: row;
color: var(--color-base-black);
}
.recent-product-wrap .recent-product-item__info-price .current-price em {
font-size: 20px;
font-weight: 700;
}
.recent-product-wrap .recent-product-item__info-price .current-price span {
font-size: 16px;
font-weight: 500;
}
.recent-product-wrap .recent-product-item__info-price .origin-price s {
color: var(--gray400);
font-size: 16px;
font-weight: 400;
}
.counter {
font-size: 14px;
}
.counter__btn {
font-size: 24px;
}
.address-form {
width: 588px;
height: 720px;
}
.address-form__content {
height: 636px;
overflow-y: scroll;
}
.my-pay {
border-bottom: 1px solid #ececec;
}
.my-pay__config {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
margin: 20px;
}
.my-pay__config button {
width: 75px;
border: 1px solid #ddd;
color: var(--color-secondary);
}
.my-pay__info {
color: var(--gray100);
margin-left: 20px;
margin-bottom: 10px;
}
.my-pay-content {
overflow-x: auto;
}
.my-pay-content--center {
overflow-x: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.my-pay-content__content-wrap {
display: flex;
justify-content: center;
flex-direction: row;
padding: 0 20px 20px 20px;
gap: 10px;
}
.my-pay-method-btn {
padding: 22px 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-origin: content-box;
background-color: var(--color-base-white);
border: 1px solid var(--gray300);
}
.my-pay-method-btn.logo {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
padding: 16px 10px;
}
.my-pay-method-btn.checked {
color: var(--color-base-white);
border-color: var(--color-secondary);
background-color: var(--color-secondary);
}
.my-pay-method-btn.label {
font-size: 16px;
font-weight: 500;
}
.payment-method-group {
width: 250px;
height: 100%;
border: 1px solid #ddd;
border-radius: 6px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 7px;
}
.payment-method-group__title {
font-size: 15px;
}
.payment-method-group__desc {
color: var(--gray100);
font-size: 13px;
}
.payment-method-group__buttons {
display: flex;
justify-content: center;
flex-direction: row;
flex-direction: row;
gap: 5px;
font-size: 13px;
}
.payment-add-btn {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 6px;
width: 105px;
height: 60px;
cursor: pointer;
}
.payment-add-btn p {
line-height: 1;
}
.my-pay-payment__item {
margin-right: 10px;
max-width: 250px;
}
.my-pay-payment-item {
border: 1px solid var(--gray300);
border-radius: 5px;
padding: 24px;
height: 160px;
background-color: var(--color-base-white);
cursor: pointer;
}
.my-pay-payment-item__top {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.my-pay-payment-item__additional-info {
position: relative;
height: 100%;
}
.my-pay-payment-item__quota-select-wrap {
position: absolute;
right: 0;
bottom: 20px;
border: none;
width: 60px;
}
.my-pay-payment-item--selected {
background-color: var(--color-base-navy);
color: var(--color-base-white);
}
.my-pay-payment-item__card-name {
font-size: 14px;
font-weight: 500;
}
.my-pay-payment-item__bookmark-btn {
border: none;
background-color: transparent;
}
.my-pay-payment-item__bank-card-no {
font-size: 16px;
font-weight: 500;
}
.my-pay-payment-item__register-btn {
width: 282px;
}
.my-pay-payment-item__register-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.my-pay-payment-item__register-btns > .my-pay-payment-item__register-btn {
width: initial;
}
.my-pay-payment-item-register-wrap {
border: 1px solid var(--gray300);
border-radius: 5px;
padding: 24px;
height: 160px;
background-color: var(--gray100);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.my-pay-payment-item-register-wrap__title {
font-size: 16px;
font-weight: 500;
color: var(--color-base-black);
}
.my-pay-payment-item-register-wrap__desc {
font-size: 14px;
font-weight: 400;
color: var(--gray500);
text-align: center;
}
.payment-content {
height: calc(100% - 107px);
flex: 1;
overflow-y: auto;
}
.payment-content__termination-wrap {
display: flex;
justify-content: flex-end;
flex-direction: row;
border: none;
padding: 10px;
color: var(--color-secondary);
}
.payment-content__termination-button {
width: 90px;
border: none;
color: var(--color-secondary);
}
.payment-item {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
border-bottom: 1px solid #bbbec2;
padding: 20px 5px;
margin: 5px 15px;
gap: 10px;
}
.payment-item__delete-btn {
width: 50px;
border: 1px solid #bbbec2;
background-color: var(--gray300);
color: var(--color-secondary);
}
.payment-method-buttons {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.payment-method-buttons button {
width: 100%;
height: 40px;
border: 1px solid #ddd;
background-color: var(--gray300);
border-radius: 6px;
text-align: center;
}
.payment-method-buttons__dimmed {
position: absolute;
width: 100%;
height: calc(100% - 200px);
background-color: rgba(0, 0, 0, 0.3);
}
.payment-method-buttons__content {
position: absolute;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
width: 100%;
height: 200px;
flex-direction: column;
gap: 10px;
padding: 20px;
bottom: 0;
background-color: var(--color-base-white);
}
.payment-method-buttons__content h3 {
font-size: 18px;
font-weight: 500;
}
.config-modal.modal {
display: flex;
flex-direction: row;
flex-direction: column;
height: 100%;
max-height: 710px;
}
.config-modal__header {
position: relative;
padding: 10px 20px;
border-bottom: 1px solid var(--color-base-black);
}
.config-modal__title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 40px;
font-size: 18px;
}
.config-modal__close-btn {
position: absolute;
top: 20px;
right: 20px;
}
.config-modal__close-btn:hover {
cursor: pointer;
}
@media (max-width: 500px) {
.config-modal.modal {
width: 100%;
}
}
@media (min-width: 501px) {
.config-modal.modal {
width: 450px;
}
}
.config-modal__btn-group {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border: 1px solid var(--gray100);
border-top: none;
}
.config-modal__btn-group button {
border-radius: 0;
border: none;
padding: 0.75rem 4px;
background: var(--gray300);
font-size: 0.75rem;
flex: 1;
}
.config-modal__btn-group button + button {
border-left: 1px solid var(--gray100);
}
.config-modal__register-btn {
background: var(--color-secondary) !important;
color: var(--color-base-white);
}
.payment-item-info {
display: flex;
align-items: center;
flex-direction: row;
width: 350px;
gap: 10px;
}
.payment-item-info__no-card-img {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -90px 0px;
width: 90px;
height: 56px;
border-radius: 5px;
}
.payment-item-info__no-bank-img {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: 0px 0px;
width: 90px;
height: 57px;
border-radius: 5px;
}
.payment-item-info__payment-method-image {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
border-radius: 5px;
}
.payment-item-info__payment-method-image-bank_kdb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_kdb.png");
background-color: #00367f;
}
.payment-item-info__payment-method-image-bank_ibk {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_ibk.png");
background-color: #03458e;
}
.payment-item-info__payment-method-image-bank_kb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_kb.png");
background-color: #766c62;
}
.payment-item-info__payment-method-image-bank_sh {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_sh.png");
background-color: #0068b7;
}
.payment-item-info__payment-method-image-bank_nh {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_nh.png");
background-color: #006ebb;
}
.payment-item-info__payment-method-image-bank_woori {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_woori.png");
background-color: #0064a9;
}
.payment-item-info__payment-method-image-bank_sc {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_sc.png");
background-color: #0473ea;
}
.payment-item-info__payment-method-image-bank_citi {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_citi.png");
background-color: #232a7b;
}
.payment-item-info__payment-method-image-bank_dgb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_dgb.png");
background-color: #003c83;
}
.payment-item-info__payment-method-image-bank_bnk {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_bnk.png");
background-color: #cf131c;
}
.payment-item-info__payment-method-image-bank_kj {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_kj.png");
background-color: #00286c;
}
.payment-item-info__payment-method-image-bank_jeju {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_jeju.png");
background-color: #014b88;
}
.payment-item-info__payment-method-image-bank_jb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_jb.png");
background-color: #00286c;
}
.payment-item-info__payment-method-image-bank_hana {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_hana.png");
background-color: #00939f;
}
.payment-item-info__payment-method-image-bank_shinhan {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_shinhan.png");
background-color: #014b88;
}
.payment-item-info__payment-method-image-bank_kbank {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_kbank.png");
background-color: #0f005f;
}
.payment-item-info__payment-method-image-sec_post {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_post.png");
background-color: #231f20;
}
.payment-item-info__payment-method-image-bank_toss {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_toss.png");
background-color: #0064ff;
}
.payment-item-info__payment-method-image-bank_kakao {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/bank_kakao.png");
background-color: #ffe600;
}
.payment-item-info__payment-method-image-sec_cu {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_cu.png");
background-color: #1061af;
}
.payment-item-info__payment-method-image-sec_sb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_sb.png");
background-color: #007260;
}
.payment-item-info__payment-method-image-sec_sj {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_sj.png");
background-color: #022662;
}
.payment-item-info__payment-method-image-sec_mg {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_mg.png");
background-color: #1f366a;
}
.payment-item-info__payment-method-image-sec_kb {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_kb.png");
background-color: #766c62;
}
.payment-item-info__payment-method-image-sec_ma {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_ma.png");
background-color: #073d77;
}
.payment-item-info__payment-method-image-sec_samsung {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_samsung.png");
background-color: #254aa5;
}
.payment-item-info__payment-method-image-sec_ki {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_ki.png");
background-color: #632d00;
}
.payment-item-info__payment-method-image-sec_hd {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_hd.png");
background-color: #00448d;
}
.payment-item-info__payment-method-image-sec_sk {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_sk.png");
background-color: #e30613;
}
.payment-item-info__payment-method-image-sec_ds {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_ds.png");
background-color: #605e5f;
}
.payment-item-info__payment-method-image-sec_hana {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_hana.png");
background-color: #00939f;
}
.payment-item-info__payment-method-image-sec_shinhan {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_shinhan.png");
background-color: #0068b7;
}
.payment-item-info__payment-method-image-sec_eg {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_eg.png");
background-color: #5c6162;
}
.payment-item-info__payment-method-image-sec_meritz {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_meritz.png");
background-color: #231f20;
}
.payment-item-info__payment-method-image-sec_kyobo {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_kyobo.png");
background-color: #0f2c52;
}
.payment-item-info__payment-method-image-sec_kw {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_kw.png");
background-color: #003d79;
}
.payment-item-info__payment-method-image-sec_ebest {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_ebest.png");
background-color: #006899;
}
.payment-item-info__payment-method-image-sec_hanwha {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_hanwha.png");
background-color: #f1592a;
}
.payment-item-info__payment-method-image-sec_nhqv {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_nhqv.png");
background-color: #006ebb;
}
.payment-item-info__payment-method-image-sec_sh {
width: 90px;
height: 57px;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
background-origin: content-box;
padding: 10px 10px;
border-radius: 5px;
background-image: url("/assets/images/banks/sec_sh.png");
background-color: #0068b7;
}
.payment-item-info__content {
display: flex;
flex-direction: row;
flex-direction: column;
gap: 5px;
}
.payment-item-info__content h2 {
font-weight: 600;
}
.my-pay-callback-popup {
line-height: 1.5em;
}
.my-pay-callback-popup__message {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 8px;
font-size: 1.2em;
padding: 40px 20px;
}
.my-pay-payments {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px;
}
.pay-method-btn {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 22px 30px;
display: flex;
justify-content: space-between;
color: var(--color-base-black);
border: 1px solid var(--gray300);
background-color: var(--color-base-white);
font-size: 16px;
font-weight: 500;
}
.pay-method-btn--checked {
color: white;
border-color: var(--color-base-navy);
background-color: var(--color-base-navy);
}
.pay-method-btn--centered {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.pay-method-btn__label {
word-break: break-all;
margin-right: 10px;
}
.pay-method-btn__icon {
flex: none;
}
.pay-method-btn .ico--pay-account-black {
background-size: 364px 335px;
background-position: -84px -256px;
width: 27px;
height: 22px;
}
.pay-method-btn .ico--pay-account-white {
background-size: 364px 335px;
background-position: -111px -256px;
width: 27px;
height: 22px;
}
.pay-method-btn .ico--chai {
background-size: 364px 335px;
background-position: -120px -165px;
width: 62px;
height: 18px;
}
.pay-method-btn .ico--chai-white {
background-size: 364px 335px;
background-position: -137px -143px;
width: 62px;
height: 18px;
}
.pay-method-btn .ico--pay-credit-card-black {
background-size: 364px 335px;
background-position: -180px -120px;
width: 28px;
height: 22px;
}
.pay-method-btn .ico--pay-credit-card-white {
background-size: 364px 335px;
background-position: -208px -120px;
width: 28px;
height: 22px;
}
.pay-method-btn .ico--pay-etc-black {
background-size: 364px 335px;
background-position: -286px -307px;
width: 24px;
height: 24px;
}
.pay-method-btn .ico--pay-etc-white {
background-size: 364px 335px;
background-position: -310px -307px;
width: 24px;
height: 24px;
}
.pay-method-btn .ico--kakaopay {
background-size: 364px 335px;
background-position: -276px -104px;
width: 64px;
height: 20px;
}
.pay-method-btn .ico--kakaopay-white {
background-size: 364px 335px;
background-position: -276px -84px;
width: 64px;
height: 20px;
}
.pay-method-btn .ico--pay-mobile-black {
background-size: 364px 335px;
background-position: -212px -56px;
width: 24px;
height: 30px;
}
.pay-method-btn .ico--pay-mobile-white {
background-size: 364px 335px;
background-position: -212px -88px;
width: 24px;
height: 30px;
}
.pay-method-btn .ico--naverpay {
background-size: 364px 335px;
background-position: -236px -148px;
width: 56px;
height: 22px;
}
.pay-method-btn .ico--naverpay-white {
background-size: 364px 335px;
background-position: -288px -124px;
width: 56px;
height: 22px;
}
.pay-method-btn .ico--payco {
background-size: 364px 335px;
background-position: -236px -200px;
width: 70px;
height: 16px;
}
.pay-method-btn .ico--payco-white {
background-size: 364px 335px;
background-position: -292px -148px;
width: 70px;
height: 16px;
}
.pay-method-btn .ico--pay-realtime-account-black {
background-size: 364px 335px;
background-position: -133px -57px;
width: 28px;
height: 25px;
}
.pay-method-btn .ico--pay-realtime-account-white {
background-size: 364px 335px;
background-position: 0px -256px;
width: 28px;
height: 25px;
}
.pay-method-btn .ico--tosspay {
background-size: 364px 335px;
background-position: -107px -204px;
width: 107px;
height: 20px;
}
.pay-method-btn .ico--tosspay-white {
background-size: 364px 335px;
background-position: 0px -204px;
width: 107px;
height: 20px;
}
.pay-method-btn .ico--pay-virtual-account-black {
background-size: 364px 335px;
background-position: -28px -256px;
width: 28px;
height: 22px;
}
.pay-method-btn .ico--pay-virtual-account-white {
background-size: 364px 335px;
background-position: -56px -256px;
width: 28px;
height: 22px;
}
.pay-method-btn .ico--applepay {
background-size: 364px 335px;
background-position: -286px -52px;
width: 50px;
height: 32px;
}
.pay-method-btn .ico--applepay-white {
background-size: 364px 335px;
background-position: -236px -52px;
width: 50px;
height: 32px;
}
.pay-method-btn .ico--payco-simple {
background-size: 364px 335px;
background-position: -236px -16px;
width: 128px;
height: 16px;
}
.pay-method-btn .ico--payco-simple-white {
background-size: 364px 335px;
background-position: -236px 0px;
width: 128px;
height: 16px;
}
.aurora__formula-symbol {
width: 20px;
height: 20px;
display: inline-block;
font-size: 18px;
text-align: center;
color: var(--color-base-white);
border: 1px solid var(--color-base-navy);
border-radius: 100%;
line-height: 16px;
background-color: var(--color-base-navy);
}
.kcp-authentication__form {
width: 100%;
height: calc(100vh - 60px);
scrollbar-color: none;
}
.notice--full {
min-height: 30vh;
}
iframe.thumb {
position: relative;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.thumb-item__media iframe.thumb {
width: revert-layer;
background-color: var(--color-base-white);
}
.thumb-item [shopby-is-sold-out=true] {
cursor: not-allowed;
}
.thumb-item__main-img iframe {
width: 560px;
height: 315px;
}
.thumb-item__sub-img {
overflow: hidden;
}
.thumb-item__sub-img iframe {
z-index: -1;
}
.thumb-box-wrap {
margin-top: 80px;
}
.thumb-box .thumb-title {
color: var(--color-base-black);
font-size: 24px;
font-weight: 700;
}
.thumb-box .thumb-item {
margin-top: 20px;
}
.thumb-box .thumb-item__img {
position: relative;
border: 1px solid var(--gray200);
width: 282px;
height: 282px;
}
.thumb-box .thumb-item__img .icon {
position: absolute;
bottom: 20px;
right: 20px;
}
.thumb-box .thumb-item__img .no-img {
background: center/contain no-repeat url("/assets/images/bg/no-img-round.png"), var(--gray100);
background-size: 46px;
}
.thumb-box .thumb-item-wrap a {
text-decoration: none;
color: unset;
}
.thumb-box .thumb-item__info {
margin-top: 20px;
padding: 0;
}
.thumb-box .thumb-item__info-name {
color: var(--color-base-black);
font-size: 18px;
font-weight: 500;
}
.thumb-box .thumb-item__info-price {
display: flex;
align-items: flex-end;
flex-direction: row;
gap: 6px;
}
.thumb-box .thumb-item__info-price .rate em {
font-size: 20px;
font-weight: 700;
color: var(--color-point);
}
.thumb-box .thumb-item__info-price .current-price {
display: flex;
align-items: center;
flex-direction: row;
color: var(--color-base-black);
}
.thumb-box .thumb-item__info-price .current-price em {
font-size: 20px;
font-weight: 700;
}
.thumb-box .thumb-item__info-price .current-price span {
font-size: 16px;
font-weight: 500;
}
.thumb-box .thumb-item__info-price .origin-price s {
color: #a3a3a3;
font-size: 16px;
font-weight: 400;
}
.thumb-box .thumb-item__icon-box img {
display: inline-block;
}
.thumb-box .thumb-item__status-label {
position: absolute;
top: 12px;
left: 14px;
padding: 6px 8px;
color: var(--color-base-white);
}
.thumb-box .thumb-item__status-label--READY {
background-color: var(--color-point);
}
.thumb-box .thumb-item__status-label--STOP {
background-color: var(--gray400);
}
.thumb-box .thumb-item__status-label--FINISHED {
background-color: var(--color-secondary);
color: var(--color-base-white);
}
.thumb-box .thumb-item .pagination__btn {
position: absolute;
zoom: 1.5;
z-index: 10;
top: var(--swiper-navigation-top-offset, 33%);
}
.thumb-box .thumb-item .thumb-pagination-btn-next {
right: var(--swiper-navigation-sides-offset, 0px);
}
.thumb-box .thumb-item .thumb-pagination-btn-prev {
left: var(--swiper-navigation-sides-offset, 0px);
}
.thumb-box .thumb-item .swiper-button-disabled {
opacity: 0.35;
}
:where(.thumb-GALLERY, .thumb-CART, .thumb-SIMPLE_IMAGE) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
:is(.thumb-CART, .thumb-SIMPLE_IMAGE) .thumb-fab {
display: none;
}
:is(.thumb-CART, .thumb-SIMPLE_IMAGE) .thumb-item:hover .thumb-fab {
display: block;
}
:where(.thumb-LIST) {
display: flex;
flex-direction: column;
gap: 20px;
}
:where(.thumb-LIST) .thumb-item {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
gap: 20px;
}
:where(.thumb-LIST) .thumb-item__media {
width: 282px;
}
:where(.thumb-LIST) .thumb-item__info {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
min-width: 300px;
max-width: 600px;
}
:where(.thumb-LIST) .thumb-item__btns {
display: flex;
justify-content: end;
align-items: center;
flex-direction: row;
gap: 12px;
margin-inline-start: auto;
min-width: fit-content;
}
:where(.thumb-LIST) .thumb-item__btn--cart {
color: var(--color-base-white);
background: var(--color-base-black);
padding-block: 23px;
padding-inline: 32px;
}
:where(.thumb-LIST) .thumb-item__btn--cart[shopby-is-sold-out=true] {
background: var(--gray300);
}
:where(.thumb-LIST) .thumb-item__btn--like {
background-color: unset;
border: 1px solid var(--gray300);
padding-block: 10.5px;
padding-inline: 11px;
}
:where(.thumb-LIST) .thumb-item__btn--like svg {
fill: var(--color-base-white);
}
:where(.thumb-LIST) .thumb-item__btn--like:where(.is-active) svg {
fill: var(--color-point);
}
:where(.thumb-SIMPLE_IMAGE) .thumb-item__info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.8);
color: var(--color-base-white);
text-align: center;
visibility: hidden;
}
:where(.thumb-SIMPLE_IMAGE) .thumb-item:hover .thumb-item__info {
visibility: visible;
}
:where(.thumb-SIMPLE_IMAGE) .thumb-item:hover .thumb-item__info a {
width: 100%;
display: block;
}
:where(.thumb-PRODUCT_MOVE) .swiper-button-prev,
:where(.thumb-PRODUCT_MOVE) .swiper-button-next {
width: 50px;
height: 50px;
}
.thumb-PRODUCT_MOVE .swiper {
max-width: 1200px;
position: static;
}
.shipping-addresses {
width: 580px;
height: 720px;
}
.shipping-addresses .shipping-address-list-wrap {
height: 636px;
overflow-y: scroll;
}
.shipping-addresses .title {
font-size: 18px;
padding-block: 12px;
border-bottom: 2px solid var(--color-base-black);
}
.shipping-addresses .notice--full {
height: 490px;
}
.shipping-addresses .pagination {
margin-block: 12px 18px;
}
.shipping-addresses .pagination button {
border: none;
cursor: pointer;
}
.shipping-address-list {
padding-block: 20px;
min-height: 400px;
}
.shipping-address-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 20px;
}
.shipping-address-item__info-wrap {
flex: 1;
font-size: 18px;
}
.shipping-address-item__info {
font-size: 18px;
}
.shipping-address-item__address {
line-height: 20px;
}
.title-modal__header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-bottom: 1px solid var(--color-base-black);
height: 84px;
}
.title-modal__title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 24px;
font-weight: 700;
}
.title-modal--full {
margin: 0 auto;
width: 100%;
}
@media (min-width: 500px) {
.title-modal--full {
min-width: 500px;
}
}
.title-modal--full .title-modal__content {
overflow-y: auto;
height: calc(100dvh - 84px);
}
.loader--sm {
min-height: 4dvh;
}
.loader--md {
min-height: 8dvh;
}
.loader--lg {
min-height: 12dvh;
}
.loader--full {
min-height: 30dvh;
}
.category-nav {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
background-color: var(--gray100);
flex-wrap: wrap;
column-gap: 20px;
row-gap: 15px;
}
.category-nav:has(li) {
padding: 15px 20px;
}
.category-nav__link {
display: inline-block;
text-decoration: none;
}
.category-nav__label {
font-size: 16px;
color: var(--gray600);
}
.category-nav__count {
font-size: 18px;
font-weight: 700;
color: var(--gray600);
}
.sort-list__wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 20px;
}
.sort-list__wrap .select--sm {
width: max-content;
}
.sort-list__wrap .total-count {
margin-inline-end: auto;
}
.sort-list__wrap--margin {
margin-block-start: 20px;
margin-block-end: 40px;
}
.sort-list__wrap--between {
justify-content: space-between;
}
.sort-list__wrap--end {
justify-content: end;
}
.sort-list {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 20px;
}
.sort-item {
position: relative;
color: var(--gray500);
cursor: pointer;
font-size: 16px;
line-height: 16px;
}
.sort-item button {
all: unset;
cursor: pointer;
}
.sort-item.active {
color: var(--color-base-black);
font-weight: 700;
}
.sort-item:not(:last-child)::after {
position: absolute;
top: 50%;
right: -10px;
content: "";
border-right: 1px solid var(--gray300);
height: 12px;
transform: translateY(-50%);
cursor: default;
}
.product-summary {
position: relative;
width: 588px;
}
.product-summary .coupon-download-wrap {
padding-bottom: 0;
}
.product-summary__sns-btn {
position: absolute;
top: 33px;
right: 0;
}
.product-summary__sns-btn .ico--share-node {
zoom: 0.6;
}
.product-summary__main-category {
font-size: 13px;
color: var(--gray500);
}
.product-summary__main-category a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.product-summary__brand-name {
font-size: 14px;
font-weight: 700;
line-height: 100%;
}
.product-summary__title {
margin-top: 16px;
color: var(--gray600);
font-size: 24px;
font-weight: 700;
line-height: 100%;
}
.product-summary__promotion-text {
margin-top: 12px;
font-size: 16px;
font-weight: 400;
}
.product-summary__price-detail {
margin-top: 16px;
}
.product-summary__off-percent {
color: var(--color-point);
font-size: 24px;
font-weight: 700;
line-height: 100%;
}
.product-summary__off-percent ~ .product-summary__price {
margin-left: 14px;
}
.product-summary__original-price {
position: relative;
margin-left: 11px;
color: var(--gray700);
font-size: 16px;
font-weight: 400;
line-height: 21px;
text-decoration: line-through;
vertical-align: bottom;
}
.product-summary__original-price .help-wrap {
position: relative;
}
.product-summary__original-price .help-wrap .help-btn {
position: absolute;
width: 16px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.product-summary__original-price .help-wrap .tooltip {
margin-left: 2px;
width: 280px;
}
.product-summary__info {
margin-top: 45px;
overflow: hidden;
}
.product-summary dl {
float: left;
width: 100%;
padding: 12px 0;
color: var(--gray600);
border-bottom: solid 1px var(--gray200);
font-size: 16px;
font-weight: 500;
line-height: 33px;
}
.product-summary dl dt {
float: left;
width: 130px;
}
.product-summary dl dd {
float: left;
width: calc(100% - 140px);
color: var(--gray600);
font-size: 16px;
font-weight: 700;
}
.product-summary__info-coupon .discount {
color: var(--color-point);
font-size: 16px;
font-weight: 700;
word-wrap: break-word;
}
.product-summary__info-coupon .coupon-download-wrap {
float: right;
}
.product-summary__freight em {
color: var(--gray500);
font-weight: 400;
}
.product-summary__purchase-option__product-text-option {
display: flex;
height: fit-content;
flex-direction: column;
}
.product-summary__purchase-option-input-wrap {
overflow-y: scroll;
max-height: 370px;
}
.product-summary__purchase-option .select-box {
margin-top: 5px;
width: 100%;
font-size: 16px;
line-height: 24px;
padding: 0 10px;
}
.product-summary__purchase-option .select-box select {
width: 100%;
padding: 6px 40px 6px 10px;
}
.product-summary__purchase-option .quantity-box {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 12px;
width: 588px;
min-height: 56px;
padding: 10px 25px;
align-items: center;
gap: 10px;
background: var(--gray100);
}
.product-summary__purchase-option .quantity-box .quantity__content {
display: flex;
align-items: center;
flex-direction: row;
gap: 40px;
margin: 0;
margin-right: 20px;
}
.product-summary__purchase-option .quantity-box .quantity__content .counter {
width: 150px;
height: 35px;
}
.product-summary__purchase-option .quantity-box .quantity__content .counter .counter__btn {
width: 35px;
height: 35px;
}
.product-summary__purchase-option .quantity-box .quantity__content .quantity__del {
top: 16px;
right: 15px;
}
.product-summary__purchase-option .quantity-box .quantity__label {
max-width: 265px;
}
.product-summary__purchase-option .quantity-box .quantity__product-name {
color: var(--color-secondary);
}
.product-summary__purchase-option .quantity-box .quantity__product-name + .quantity__label {
color: var(--gray400);
}
.product-summary__purchase-option .character-counter__limit-count {
color: var(--gray500);
font-weight: 400;
}
.product-summary__purchase-option .character-counter.by-quantity {
display: none;
}
.product-summary__purchase-option .by-quantity-toggle-btn {
margin-top: 10px;
text-align: right;
}
.product-summary__purchase-option .by-quantity-toggle-btn span {
cursor: pointer;
border-bottom: solid 1px;
}
.product-summary__purchase-option .open-by-quantity .character-counter.by-quantity {
display: block;
}
.product-summary__options-box {
clear: both;
display: flex;
flex-direction: column;
gap: 10px;
}
.product-summary__options-box:not(:first-child) {
margin-top: 10px;
}
.extra-product-summary {
position: relative;
width: 100%;
display: flex;
gap: 20px;
padding: 12px;
border: 1px solid var(--gray300);
margin-top: 10px;
}
.extra-product-summary__info {
width: 100%;
}
.extra-product-summary__image, .extra-product-summary__image img {
width: 150px;
height: 100%;
min-height: 150px;
object-fit: contain;
border: 1px solid var(--gray200);
aspect-ratio: 1/1;
}
.extra-product-summary__image {
position: relative;
}
.extra-product-summary__title {
font-weight: 700;
font-size: 18px;
color: var(--gray600);
}
.extra-product-summary__price-detail {
margin-top: 16px;
}
.extra-product-summary__original-price {
position: relative;
margin-left: 11px;
color: var(--gray700);
font-size: 16px;
font-weight: 400;
line-height: 21px;
text-decoration: line-through;
vertical-align: bottom;
}
.extra-product-summary dl {
display: flex;
flex-direction: column;
width: 100%;
padding: 12px 0;
color: var(--gray600);
border-bottom: solid 1px var(--gray200);
font-size: 16px;
font-weight: 500;
line-height: 33px;
}
.extra-product-summary dl dt {
width: 100%;
}
.extra-product-summary dl dd {
width: calc(100% - 140px);
color: var(--gray600);
font-size: 16px;
font-weight: 700;
}
.extra-product-summary__purchase-option:has(div.quantity-box) {
border-top: 1px solid var(--gray200);
margin-top: 10px;
}
.extra-product-summary__purchase-option-input-wrap {
overflow-y: auto;
max-height: 370px;
}
.extra-product-summary__purchase-option .select-box {
margin-top: 5px;
width: 100%;
font-size: 16px;
line-height: 24px;
padding: 0 10px;
}
.extra-product-summary__purchase-option .select-box select {
width: 100%;
padding: 6px 40px 6px 10px;
}
.extra-product-summary__purchase-option .quantity-box {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 12px;
width: 588px;
min-height: 56px;
padding: 10px 25px;
align-items: center;
gap: 10px;
background: var(--gray100);
}
.extra-product-summary__purchase-option .quantity-box .quantity__content {
display: flex;
align-items: center;
flex-direction: row;
gap: 40px;
margin: 0;
margin-right: 20px;
}
.extra-product-summary__purchase-option .quantity-box .quantity__content .counter {
width: 150px;
height: 35px;
}
.extra-product-summary__purchase-option .quantity-box .quantity__content .counter .counter__btn {
width: 35px;
height: 35px;
}
.extra-product-summary__purchase-option .quantity-box .quantity__content .quantity__del {
top: 16px;
right: 15px;
}
.extra-product-summary__purchase-option .quantity-box .quantity__label {
max-width: 265px;
}
.extra-product-summary__purchase-option .quantity-box .quantity__product-name {
color: var(--color-secondary);
}
.extra-product-summary__purchase-option .quantity-box .quantity__product-name + .quantity__label {
color: var(--gray400);
}
.extra-product-summary__purchase-option .character-counter__limit-count {
color: var(--gray500);
font-weight: 400;
}
.extra-product-summary__purchase-option .character-counter.by-quantity {
display: none;
}
.extra-product-summary__purchase-option .by-quantity-toggle-btn {
margin-top: 10px;
text-align: right;
}
.extra-product-summary__purchase-option .by-quantity-toggle-btn span {
cursor: pointer;
border-bottom: solid 1px;
}
.extra-product-summary__purchase-option .open-by-quantity .character-counter.by-quantity {
display: block;
}
.extra-product-summary__options-box, .extra-product-summary__options-box__container {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-purchase__info .product-purchase__option {
overflow: hidden;
}
.product-purchase__info .product-purchase__option dl {
border-bottom: none;
}
.purchase__like-btn {
all: unset;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
border: solid 1px var(--gray300);
width: 64px;
height: 64px;
cursor: pointer;
}
.purchase__like-btn svg {
fill: var(--color-base-white);
}
.purchase__like-btn path {
stroke-width: 2;
}
.purchase__like-btn.is-active svg {
fill: var(--color-point);
}
.purchase__like-btn.is-active path {
stroke-width: 0;
}
.purchase__button-wrap {
display: flex;
align-items: center;
flex-direction: row;
gap: 14px;
}
.purchase__button-wrap .purchase__btns {
flex: 1;
display: flex;
align-items: center;
flex-direction: row;
gap: 14px;
}
.purchase__button-wrap .purchase__btns button {
flex: 1;
}
.purchase__naver-pay-btn {
margin-top: 20px;
text-align: center;
}
.purchase__total {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 20px;
margin-bottom: 40px;
padding-right: 7px;
color: var(--gray600);
font-size: 16px;
font-weight: 500;
}
.purchase__total span {
display: flex;
align-items: center;
flex-direction: row;
}
.purchase__total em {
color: var(--color-point);
font-size: 24px;
font-weight: 700;
}
.product-summary__purchase-option {
overflow: hidden;
}
.product-summary__purchase-option dl {
padding: 0;
border-bottom: none;
}
.extra-product-summary dl {
border-bottom: none;
}
.extra-product-summary--sold-out select {
pointer-events: none;
}
.extra-product-summary__sold-out {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
background-color: var(--color-base-black);
color: var(--color-base-white);
font-size: 18px;
font-weight: 500;
opacity: 0.5;
white-space: pre;
pointer-events: none;
}
.extra-product-purchase__info {
border-bottom: 1px solid var(--gray200);
}
.extra-product-purchase__guide {
padding-bottom: 10px;
font-size: 14px;
line-height: 1.5;
}
.extra-product-purchase__guide:empty {
display: none;
}
.board-form {
padding: 20px;
}
.board-form__top {
border-top: 1px solid var(--gray200);
}
.board-form__rate {
display: flex;
justify-content: space-between;
padding: 20px 0;
}
.board-form__rate-label {
font-weight: 500;
font-size: 14px;
}
.board-form__rate .rating-star {
border: none;
background-color: transparent;
}
.board-form__extra-info__container {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.board-form__extra-info-label-review {
font-size: 14px;
line-height: 14px;
font-weight: 500;
}
.board-form__extra-info-label-inquiry {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.board-form__extra-info__selected-tags-wrapper {
display: flex;
gap: 8px;
margin-top: 20px;
flex-wrap: wrap;
}
.board-form__extra-info__tag-name {
font-size: 14px;
line-height: 14px;
font-weight: 400;
}
.board-form__extra-info__select-container {
margin: 20px 0;
gap: 5px;
}
.board-form__extra-info__tag-container {
padding: 5px 36px 5px 20px;
border: 1px solid var(--color-point);
border-radius: 15px;
width: fit-content;
display: flex;
gap: 1vw;
position: relative;
background-color: var(--color-base-white);
}
.board-form__extra-info__tag-value-name {
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: var(--color-point);
}
.board-form__extra-info__tag-remove-btn {
position: absolute;
top: 5px;
right: 20px;
width: 12px;
height: 12px;
min-width: 0;
padding: 0;
border: none;
color: black;
background-color: var(--background-color);
cursor: pointer;
z-index: 15;
}
.board-form__extra-info__tag-remove-btn:before, .board-form__extra-info__tag-remove-btn:after {
position: absolute;
top: 0px;
right: 5px;
width: 1px;
height: 12px;
background-color: var(--color-point);
content: " ";
}
.board-form__extra-info__tag-remove-btn:before {
transform: rotate(45deg);
}
.board-form__extra-info__tag-remove-btn:after {
transform: rotate(-45deg);
}
.board-form__extra-info__select {
color: #828282;
}
.board-form__product-select-btn-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex: 1;
}
.board-form__product-select {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
padding: 30px;
}
.board-form__product-select-label {
font-weight: 500;
}
.board-form__product-item-witch-button {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px 0 0;
margin-top: 20px;
}
.board-form .text-area {
resize: none;
font-size: 16px;
}
.board-form__notice-reply-box {
display: flex;
justify-content: space-between;
padding: 16px 20px 16px 20px;
margin-top: 10px;
background-color: #f5f5f5;
}
.board-form__notice-reply-checkbox {
display: flex;
gap: 20px;
}
.board-form__attachment-input {
width: 80px;
height: 80px;
position: relative;
border: 1px solid var(--color-base-black);
}
.board-form__attachment-input::before, .board-form__attachment-input::after {
width: 20px;
height: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
content: "";
border-radius: 2px;
border-top: 2px solid var(--color-base-black);
position: absolute;
top: 50%;
}
.board-form__container {
display: flex;
flex-direction: column;
gap: 10px;
}
.board-form__type-selector {
border-color: var(--gray-border-color);
height: 2.5rem;
padding-top: 0.375rem;
color: var(--gray-color);
}
.board-form__type-selector--disabled {
background-color: var(--empty-color);
}
.board-form__type-selector--disabled::after {
opacity: 0.4;
}
.board-form__checkbox-group {
margin-top: 20px;
}
.board-form__checkbox-group .check-radio__label {
font-size: 0.875rem;
font-weight: 400;
color: var(--color-base-black);
}
.board-form__checkbox-group .check-radio__ico {
border-radius: 4px;
}
.board-form__image-files {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20px;
gap: 0.125rem;
}
.board-form__image {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.board-form .delete::before,
.board-form .delete::after {
background-color: var(--color-base-black);
}
.board-form__upload-btn {
margin-top: 20px;
border-radius: 0;
height: 60px;
font-size: 16px;
}
.board-form__notice-text {
position: relative;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: var(--gray500);
padding-left: 18px;
opacity: 0.8;
}
.board-form__notice-wrap {
margin-top: 20px;
}
.board-form__notice-wrap .board-form__notice-text {
margin-top: unset;
}
.board-form__notice-text::before {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
position: absolute;
content: "※";
color: var(--gray500);
}
.board-form__note {
padding: 28px 12px 32px;
border-top: solid 1px var(--gray-border-color);
}
.board-form__note-title {
font-size: 16px;
padding-bottom: 12px;
color: var(--default-font-color);
}
.board-form__note-text {
position: relative;
padding-top: 8px;
padding-left: 9px;
font-size: 16px;
color: var(--gray400);
line-height: 16px;
}
.board-form__note-text::before {
position: absolute;
top: 4px;
left: 0;
font-size: 12px;
content: ".";
color: var(--gray400);
}
.board-form__buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.board-form__buttons--small {
display: flex;
justify-content: end;
align-items: none;
flex-direction: row;
gap: 12px;
margin-top: 20px;
}
.board-form__buttons--small button {
width: 60px;
border-radius: 0;
font-size: 12px;
padding: 4px 6px;
}
.board-form__button-group {
display: flex;
justify-content: space-between;
align-items: none;
flex-direction: row;
margin-top: 20px;
}
.board-form__button-group button {
width: 48%;
}
.board-form__btn {
width: 100%;
height: 100%;
border-radius: 0;
font-size: 16px;
font-weight: 400;
}
.board-form .review-accumulation {
margin: 20px 0;
}
.board-form .review-accumulation__note {
padding: 10px;
border-top: 1px solid var(--gray200);
}
.board-form__score {
color: var(--gray600);
font-size: 16px;
font-weight: 700;
}
.board-form__score-container {
display: flex;
align-items: center;
flex-direction: row;
width: 200px;
gap: 26px;
}
.board-form__score-star {
display: flex;
align-items: center;
flex-direction: row;
gap: 2px;
pointer-events: all;
}
.board-form__score-star svg {
pointer-events: none;
}
.board-form__product-item {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
}
.board-form__product-item .product-info__order-status {
font-size: 14px;
line-height: 14px;
font-weight: 400;
}
.board-form__product-item .product-item__image img {
width: 130px;
height: 130px;
}
.board-form__product-item .product-item__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.board-form__product-item .product-item__name {
font-size: 18px;
font-weight: 500;
}
.board-form__product-item .product-item__option {
color: var(--gray500);
font-size: 16px;
line-height: 16px;
}
.board-form__product-item .product-item__order {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.board-form__product-thumb-list {
padding: 0 20px;
}
.inquiry-item__product-info {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: var(--color-base-black);
font-weight: 500;
font-size: 16px;
}
.inquiry-item__top {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
font-size: 16px;
color: var(--gray500);
}
.inquiry-item__type {
font-size: 16px;
color: var(--gray500);
}
.inquiry-item__date {
font-family: "Montserrat";
font-size: 16px;
margin-bottom: 10px;
color: var(--gray500);
}
.inquiry-item__bottom {
display: flex;
justify-content: none;
align-items: center;
flex-direction: row;
position: relative;
margin-top: 8px;
}
.inquiry-item__content {
width: 100%;
position: relative;
}
.inquiry-item__title {
flex: 1;
text-align: left;
font-size: 16px;
font-weight: 500;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.inquiry-item__description {
font-size: 14px;
font-weight: 400;
color: var(--gray500);
}
.inquiry-item.is-active .inquiry-item__bottom {
display: block;
}
.inquiry-item.is-active .inquiry-item__content {
margin-top: 20px;
}
.inquiry-item.is-active .inquiry-item__title {
display: block;
}
.inquiry-item.is-active .inquiry-item__text {
display: flex;
align-items: center;
gap: 6px;
line-height: normal;
}
.inquiry-item.is-active .inquiry-item__text .ico {
display: inline-block;
}
.inquiry-item.is-active .inquiry-item__text--answer {
border-top: 1px dashed #dadada;
}
.inquiry-item.is-active .inquiry-item__qna-text {
flex: 1;
width: 94%;
margin-left: auto;
}
.inquiry-item.is-active .board-form__buttons--small {
margin-top: 20px;
}
.inquiry-item + .inquiry-item {
margin-top: 20px;
border-top: 1px solid #ddd;
}
.inquiry-item__title {
line-height: 16px;
}
.inquiry-item__top-writer {
font-size: 16px;
line-height: 16px;
margin: 10px 0;
}
.inquiry-item__top-writer span + span::before {
content: "|";
margin: 0 6px 0 4px;
color: var(--gray300);
}
.inquiry-item__reply-status {
font-size: 14px;
line-height: 14px;
}
.inquiry-item__product-item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.board {
display: block;
margin-bottom: 40px;
}
.board__count-label {
font-size: 1.125rem;
margin-bottom: 20px;
}
.board__count-label .board__count {
margin-left: 6px;
font-size: 0.875rem;
vertical-align: bottom;
}
.board__count-label .board__count span {
color: var(--color-point);
font-weight: bold;
}
.board__head {
font-family: "Montserrat";
font-weight: 700;
font-size: 24px;
margin-top: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
position: relative;
padding: 35px 0px;
min-height: 60px;
}
.board__title {
font-size: 24px;
text-align: center;
word-break: break-all;
}
.board__left-btn {
position: absolute;
right: 20px;
padding: 6px;
border: 1px solid var(--gray100);
border-radius: 4px;
}
.article-list {
border-top: 1px solid var(--gray300);
border-bottom: 1px solid var(--gray300);
margin: 20px 0 59px 0;
}
.article-list .td_left {
padding: 22px 25px 22px 25px;
}
.article-list__top {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.article-list__board-name {
font-size: 24px;
line-height: 24px;
font-weight: 700;
padding: 40px 0 30px 0;
}
.article-list__search-field {
display: flex;
gap: 10px;
}
.article-list__item {
display: flex;
flex-direction: column;
padding: 20px;
}
.article-list__item + .article-list__item {
border-top: 1px solid var(--gray300);
}
.article-list__item-top {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
height: 20px;
vertical-align: middle;
gap: 6px;
margin-bottom: 8px;
}
.article-list__item-link {
text-decoration: none;
color: var(--color-base-black);
}
.article-list__item-link .ico-hot {
display: inline-block;
width: 31px;
height: 16px;
background: center/contain no-repeat url("/assets/images/icons/ico-hot.png");
}
.article-list__item-link .thumb-item__media {
width: 60px;
}
.article-list__item-link-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.article-list__item-title {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
max-width: 680px;
line-height: 12px;
}
.article-list__item-view-cnt, .article-list__item-register-name, .article-list__item-register-ymdt, .article-list__item-title-text {
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: var(--gray600);
}
.article-list__item-bottom {
display: flex;
}
.article-list__item-bottom span {
color: var(--gray100);
}
.article-list__item-bottom span + span::before {
display: inline;
content: "|";
padding: 10px;
}
.article-list__lock {
display: inline-block;
flex: none;
transform: translate(0, -1px);
}
.article-list__paper-clip {
width: 20px;
height: 20px;
display: inline-block;
filter: brightness(0.5);
flex: none;
}
.article-list__badge {
display: inline-flex;
padding: 4px;
flex: none;
font-size: 10px;
background-color: var(--gray100);
color: var(--color-base-white);
}
.article-list__badge--notice {
border-radius: 4px;
background-color: var(--color-point);
font-size: 16px;
}
.article-list__badge--new::before {
content: "N";
color: white;
font-size: 10px;
}
.article-list__badge--hot::before {
content: "HOT";
color: white;
font-size: 10px;
}
.article-list__item-new-icon {
background-color: var(--color-point);
}
.article-list__pagination-btn {
border: none;
background-color: transparent;
cursor: pointer;
}
.article-view {
margin-bottom: 50px;
}
.article-view__table {
display: flex;
flex-direction: column;
width: 100%;
}
.article-view__table.table {
min-height: 400px;
}
.article-view__table.title-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 56px;
border-top: 2px solid var(--color-base-black);
border-bottom: 1px solid #ccc;
font-weight: 500;
text-align: center;
}
.article-view__table.cell {
width: 150px;
}
.article-view__table.cell-title {
flex: 1;
}
.article-view__table.cell-date {
font-weight: 400;
}
.article-view__board-nav {
width: 100%;
height: 100%;
position: relative;
border-bottom: 1px solid var(--gray400);
}
.article-view__board-name {
padding: 20px 60px;
text-align: center;
font-size: 12px;
}
.article-view__list-btn {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 16px;
width: 40px;
text-align: center;
border: 1px solid var(--color-base-black);
border-radius: 4px;
padding: 4px 0;
}
.article-view__title {
padding: 14px 16px;
font-size: 16px;
background-color: var(--gray100);
font-weight: bold;
}
.article-view__sub-info {
padding: 14px 16px;
border-top: 1px solid var(--gray300);
border-bottom: 1px solid var(--gray300);
}
.article-view__register-name {
color: var(--color-secondary);
}
.article-view__register-ymdt {
display: inline-flex;
align-items: center;
color: var(--gray400);
}
.article-view__register-ymdt::before {
content: "|";
margin-right: 4px;
font-size: 12px;
}
.article-view__content {
padding: 40px;
margin-bottom: 30px;
border-bottom: 1px solid var(--gray200);
}
.article-view__content--text-detail {
padding-bottom: 40px;
}
.article-view__content > [shopby-html-content=MAIN] {
white-space: pre-line;
}
.article-view__content--attach-files {
margin: 20px 0;
}
.article-view__content--main-image {
text-align: center;
}
.article-view__content img {
display: inline-block;
}
.article-view__parent-btn {
display: block;
bottom: 0;
width: 100%;
padding: 14px 10px;
background-color: var(--color-secondary);
color: var(--whole-color);
text-align: center;
font-size: 16px;
}
.article-view__btns {
display: flex;
justify-content: space-between;
margin: 10px 16px;
gap: 6px;
}
.article-view__btns .btn {
padding: 10px;
border: 1px solid var(--gray400);
font-weight: bold;
}
.article-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.article-form__input {
margin-top: 13px;
}
.article-form__title {
float: right;
}
.article-form__limit-text {
color: var(--gray400);
}
.article-form__desc {
color: var(--gray500);
word-break: keep-all;
}
.article-form__sub-info {
width: 100%;
}
.article-form__sub-info th {
background-color: var(--empty-color);
}
.article-form__sub-info th,
.article-form__sub-info td {
height: 44px;
padding: 6px 10px;
border: 1px solid var(--default-color);
vertical-align: middle;
}
.article-form__sub-info th .text-field,
.article-form__sub-info td .text-field {
height: 28px;
}
.article-form__sub-info th:first-child,
.article-form__sub-info td:first-child {
border-left: 0;
}
.article-form__sub-info th:last-child,
.article-form__sub-info td:last-child {
border-right: 0;
}
.article-form__content {
margin: 20px 0;
}
.article-form__content textarea {
resize: none;
width: 100%;
height: 340px;
display: block;
color: var(--color-base-black);
border: solid 1px var(--gray300);
font-size: 16px;
line-height: 20px;
padding: 20px;
font-family: inherit;
}
.article-form__content.report textarea {
margin-top: 20px;
height: 290px;
}
.article-form__attachments {
display: flex;
justify-content: start;
flex-direction: row;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
width: 100%;
margin: 10px 0 20px 0;
}
.article-form__attachment-input {
width: 92px;
height: 92px;
position: relative;
border: 1px solid var(--color-base-black);
}
.article-form__attachment-input::before, .article-form__attachment-input::after {
width: 20px;
height: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
content: "";
border-radius: 2px;
border-top: 2px solid var(--color-base-black);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.article-form__attachment-input::before {
transform: translate(-50%, -50%) rotateZ(-90deg);
}
.article-form__attachment {
width: 92px;
height: 92px;
position: relative;
border: 1px solid var(--gray300);
cursor: pointer;
}
.article-form__attachment img {
width: 100%;
height: 100%;
object-fit: contain;
}
.article-form__attachment-file {
position: relative;
border: none;
width: fit-content;
padding-right: 30px;
}
.article-form__delete {
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
min-width: 26px;
padding: 0;
background-color: var(--color-secondary);
}
.article-form__delete::before, .article-form__delete::after {
position: absolute;
top: 43%;
right: 50%;
width: 13px;
height: 0;
content: "";
border-radius: 2px;
border-top: 2px solid var(--color-base-white);
background-color: var(--color-base-white);
}
.article-form__delete::before {
transform: translate(50%, 50%) rotate(45deg);
}
.article-form__delete::after {
transform: translate(50%, 50%) rotate(-45deg);
}
.article-form__content-sub {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 10px;
}
.article-form__terms {
margin-top: 20px;
}
.article-form__terms-item {
padding: 20px;
margin-top: 10px;
height: 180px;
overflow-y: auto;
background-color: #f5f5f5;
font-size: 16px;
color: var(--gray600);
}
.article-form__attach-file {
margin-top: 20px;
}
.sign-in-form {
width: 426px;
padding: 20px;
margin: 0px auto;
}
.normal-sign-in__title {
text-align: center;
font-size: 30px;
font-weight: 700;
}
.normal-sign-in__input-wrap {
margin: 40px 0 10px;
}
.normal-sign-in__input-wrap .input-field {
margin-top: 10px;
}
.normal-sign-in__input-wrap .input-field:first-child {
margin-top: 0;
}
.normal-sign-in button {
margin-top: 20px;
width: 100%;
}
.normal-sign-in .sign-in-link {
margin-top: 10px;
text-align: center;
}
.normal-sign-in .sign-in-link__item {
position: relative;
width: 33%;
height: inherit;
padding: 0 10px;
font-size: 14px;
color: var(--gray500);
text-decoration: none;
}
.normal-sign-in .sign-in-link__item::after {
content: "";
position: absolute;
top: 5px;
right: 0;
width: 1px;
height: 14px;
background: var(--gray300);
}
.normal-sign-in .sign-in-link__item:last-child::after {
content: none;
}
.open-id-sign-in {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid var(--gray200);
}
.open-id-sign-in__title {
text-align: center;
font-size: 24px;
font-weight: 700;
}
.open-id-sign-in__list {
margin-top: 40px;
}
.open-id-sign-in__item {
margin-top: 10px;
}
.open-id-sign-in__item button {
width: 100%;
max-height: 66px;
color: var(--color-base-white);
background-color: var(--color-point);
}
.open-id-sign-in__item.type-payco button {
background-color: #fa2829;
color: var(--color-base-white);
}
.open-id-sign-in__item.type-payco .ico {
width: 22px;
}
.open-id-sign-in__item.type-naver button {
background-color: #1fd771;
color: var(--color-base-white);
}
.open-id-sign-in__item.type-naver .ico {
width: 22px;
height: 20px;
}
.open-id-sign-in__item.type-line button {
background-color: #06c755;
color: var(--color-base-white);
}
.open-id-sign-in__item.type-line .ico {
width: 24px;
height: 24px;
}
.open-id-sign-in__item.type-facebook button {
background-color: #3b5998;
color: var(--color-base-white);
}
.open-id-sign-in__item.type-facebook .ico {
width: 22px;
}
.open-id-sign-in__item.type-kakao-sync button {
background-color: #fee500;
color: var(--color-base-black);
}
.open-id-sign-in__item.type-kakao-sync .ico {
width: 22px;
height: 22px;
}
.open-id-sign-in__item.type-kakao button {
background-color: #fee500;
color: var(--color-base-black);
}
.open-id-sign-in__item.type-kakao .ico {
width: 22px;
height: 22px;
}
.open-id-sign-in__item.type-google button {
background-color: var(--color-base-white);
border: 1px solid;
border-color: var(--gray300);
color: var(--color-base-black);
}
.open-id-sign-in__item.type-google .ico {
width: 24px;
height: 24px;
}
.open-id-sign-in__item.type-apple button {
background-color: var(--color-base-black);
color: var(--color-base-white);
}
.open-id-sign-in__item.type-apple .ico {
width: 24px;
height: 24px;
}
.open-id-sign-in__item.type-app-card button {
background-color: var(--color-base-white);
border: 1px solid;
border-color: var(--gray300);
color: var(--color-base-black);
}
.open-id-sign-in__item.type-app-card .ico {
width: 24px;
height: 24px;
}
.l-my-page {
width: 1200px;
margin-inline: auto;
}
.l-my-page .pagination {
margin: 60px 0 120px;
}
.l-my-page-menu {
min-width: 200px;
display: block;
}
.my-page-box {
display: flex;
gap: 102px;
}
.my-page-box .right-box {
flex: 1;
}
.my-page-box .right-box__answer-write-info span + span::before {
display: inline;
content: "|";
padding: 10px;
color: var(--gray200);
}
.my-page-box .right-box__question-attach-files {
padding: 20px 0;
}
.my-page-box .right-box__container {
display: flex;
flex-direction: column;
gap: 20px;
}
.my-page-box .right-box__head {
font-family: "Montserrat";
font-weight: 700;
font-size: 24px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
position: relative;
padding: 25px 0px;
min-height: 60px;
}
.my-page-box .right-box__no-end-line {
border-bottom: none;
padding-bottom: 0;
}
.my-page-box .right-box__no-end-line-button {
width: 132px;
height: 48px;
}
.my-page-box .right-box__table {
border-top: 2px solid var(--color-base-black);
}
.my-page-box .right-box__table thead tr {
color: var(--gray600);
}
.my-page-box .right-box__table tbody td {
padding: 12px 0;
}
.my-page-box .right-box__table tbody td .thumb-item__img {
width: 80px;
}
.my-page-box .right-box__title {
font-size: 24px;
text-align: center;
word-break: break-all;
}
.my-page-box .right-box__btns {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-bottom: 120px;
}
.my-page-box .right-box__row {
background-color: #f5f5f5;
}
.my-page-box .right-box__content {
max-height: 280px;
word-break: break-all;
overflow: auto;
}
.my-page-box .right-box__icon {
display: inline-block;
width: 40px;
height: 40px;
font-weight: bold;
line-height: 40px;
border-radius: 50%;
}
.my-page-box .right-box__icon-question {
color: var(--color-base-white);
background-color: var(--color-base-black);
}
.my-page-box .right-box__icon-answer {
color: var(--color-base-white);
background-color: var(--color-point);
}
.my-page-box .right-box .detail-page__btn-group {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-top: 20px;
}
.my-page__title {
font-weight: 700;
font-size: 24px;
padding: 30px 0;
}
.my-page__total-count-box {
display: flex;
justify-content: space-between;
padding: 40px 14px 14px 10px;
}
.my-page__total-count {
font-size: 16px;
font-weight: 500;
}
.my-page__count {
margin-left: 6px;
font-size: 16px;
vertical-align: bottom;
}
.my-page__count span {
color: var(--color-point);
font-weight: 700;
}
.term-detail {
width: 588px;
max-height: 880px;
overflow-y: scroll;
}
.term-detail__content {
padding: 40px;
}
.agreement {
padding: 40px 0;
min-height: calc(100dvh - 105px - 440px);
}
.agreement__title {
font-size: 24px;
font-weight: 700;
line-height: 100%;
min-height: 60px;
border-block-end: 2px solid var(--color-base-black);
}
.agreement__content {
font-size: 16px;
padding: 20px 0;
scroll-margin-top: 130px;
}
.agreement__terms-history-select {
width: 384px;
}
.skeleton--product-summary {
margin-top: 16px;
margin-left: 0px;
}
.skeleton--product-summary .thumb-item__sub {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 18px;
}
.skeleton--product-summary .thumb-item__sub .skeleton__media {
width: 120px;
height: 120px;
}
.skeleton--product-summary .skeleton__line--product-summary__main-category {
width: 400px;
height: 14px;
}
.skeleton--product-summary .skeleton__line--product-summary__brand-name {
margin-top: 16px;
width: 80px;
height: 14px;
}
.skeleton--product-summary .skeleton__line--product-summary__title {
margin-top: 16px;
width: 450px;
}
.skeleton--product-summary .skeleton__line--product-summary__promotion-text {
height: 24px;
}
.skeleton--product-summary .skeleton__line--product-summary__price {
margin-top: 16px;
width: 250px;
height: 24px;
}
.app-card {
border-bottom: 1px solid #ececec;
}
.app-card__config {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
margin: 20px;
}
.app-card__config button {
width: 75px;
border: 1px solid #ddd;
color: var(--color-secondary);
}
.app-card__info {
color: var(--gray100);
margin-left: 20px;
margin-bottom: 10px;
}
.app-card-content {
overflow-x: auto;
}
.app-card-content--center {
overflow-x: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.app-card-content__content-wrap {
display: flex;
justify-content: center;
flex-direction: row;
padding: 0 20px 20px 20px;
gap: 10px;
}
.app-card-method-btn {
padding: 22px 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-origin: content-box;
background-color: var(--color-base-white);
border: 1px solid var(--gray300);
}
.app-card-payment-item {
border: 1px solid var(--gray300);
border-radius: 5px;
padding: 24px;
height: 160px;
background-color: var(--color-base-white);
cursor: pointer;
}
.app-card-payment-item__top {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.app-card-payment-item__delete-btn {
border: none;
background-color: transparent;
text-decoration: underline;
font-size: 14px;
line-height: 14px;
cursor: pointer;
}
.app-card-payment-item__delete-btn:is(.selected) {
color: #fff;
}
.app-card-payment-item__additional-info {
position: relative;
height: 100%;
}
.app-card-payment-item__quota-select-wrap {
position: absolute;
right: 0;
bottom: 20px;
border: none;
width: 77px;
}
.app-card-payment-item__quota-select-wrap:is(.mini-select-white) option {
color: var(--color-base-black);
}
.app-card-payment-item__check-card-full-amount {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 14px;
font-weight: 400;
}
.app-card-payment-item--selected {
background-color: var(--color-base-navy);
color: var(--color-base-white);
}
.app-card-payment-item__card-name {
font-size: 14px;
font-weight: 500;
}
.app-card-payment-item__card-no {
font-size: 16px;
font-weight: 500;
}
.app-card-payment-item__register {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 100%;
gap: 10px;
}
.app-card-payment-item__register-select-wrap {
width: 77px;
}
.app-card-payment-item-register-wrap {
border: 1px solid var(--gray300);
border-radius: 5px;
padding: 18px 24px;
height: 160px;
background-color: var(--gray100);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
.app-card-payment-item-register-wrap__title {
font-size: 16px;
font-weight: 500;
color: var(--color-base-black);
}
.app-card-payment-item-register-wrap__desc {
font-size: 14px;
font-weight: 400;
color: var(--gray500);
text-align: center;
}
.app-card-payments {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px;
}
body:has(.modal) {
overflow: hidden;
}
.l-header {
min-height: 120px;
}
.l-header:not(:has(header)) {
display: block;
}
.l-page,
.l-my-page {
width: 1200px;
margin-inline: auto;
padding-block-end: 240px;
padding-block-start: 20px;
}
.l-panel {
width: 1200px;
margin-inline: auto;
margin-bottom: 50px;
}
.l-title {
position: relative;
display: flex;
justify-content: normal;
align-items: end;
flex-direction: row;
background-color: var(--color-base-white);
border-bottom: 2px solid var(--color-base-black);
padding: 20px 0 20px;
font-size: 20px;
font-weight: 700;
font-style: normal;
}
.l-title__align-end {
justify-content: space-between;
align-items: end;
}
.l-title__my-total-count {
font-size: 16px;
}
.l-btn-group {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 40px;
}
.l-btn-group__gap {
gap: 16px;
}
table.l-table {
width: 100%;
}
table.l-table th {
height: 60px;
text-align: center;
vertical-align: middle;
font-weight: 500;
}
table.l-table tr {
border-bottom: 1px solid var(--gray200);
}
table.l-table td {
line-height: normal;
vertical-align: middle;
text-align: center;
border-right: 1px solid var(---gray200);
padding: 20px 0;
}
table.l-table td em {
font-weight: 700;
vertical-align: baseline;
}
table.l-table td:last-child {
border: 0;
}
table.l-table .td_left {
text-align: left;
}
.l-dl {
display: grid;
width: 100%;
grid-template-columns: 1fr 5.3fr;
background-color: var(--gray200);
}
.l-dl.dl-border {
border-bottom: 2px solid var(--color-base-black);
gap: 1px;
}
.l-dl.dl-border dd .description {
font-size: 14px;
vertical-align: bottom;
color: var(--gray500);
}
.l-dl.dl-border:last-child {
border-bottom: 1px solid var(--gray200);
}
.l-dl.dl-border:not(:has(dt)) {
border-bottom: 0;
}
.l-dl dt {
background: var(--color-base-white);
padding: 19px 21px 17px;
display: flex;
align-items: center;
}
.l-dl dt .description {
font-size: 14px;
}
.l-dl dd {
background: var(--color-base-white);
padding: 19px 21px 17px;
word-break: break-all;
line-height: normal;
}
.l-dl dd em {
font-weight: 700;
vertical-align: baseline;
}
iframe[id=inicisIframe] {
z-index: 20;
}
.instagram-feed__heading {
font-size: 24px;
font-weight: 700;
text-align: center;
padding-block-end: 40px;
}
.instagram-feed__contents {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
margin-block-end: 120px;
}
.instagram-feed__media img {
aspect-ratio: 1/1;
border-radius: 10px;
}
.instagram-feed__media-skeleton {
aspect-ratio: 1/1;
border-radius: 10px;
background-color: var(--gray200);
animation: skeleton-gradient 1.8s infinite ease-in-out;
-webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
}
.select-product-option-modal {
max-height: 711px;
overflow-y: scroll;
}
.select-product-option-modal__content {
padding: 20px;
}
.select-product-option-modal__thumb-summary {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 20px;
}
.select-product-option-modal__coupon-modal {
height: 100%;
}
.select-product-option-modal:has(.select-product-option-modal__coupon-modal) {
overflow: hidden;
}
.select-product-option-modal:has(.select-product-option-modal__coupon-modal) .coupon-download-content {
height: 470px;
}
.select-product-option-modal .title-modal__header {
position: sticky;
top: -0.1px;
left: 0;
z-index: 5;
background: var(--color-base-white);
}
.select-product-option-modal .thumb-item {
width: 180px;
}
.select-product-option-modal .thumb-item img {
width: 100%;
}
.select-product-option-modal .product-purchase__info .quantity__label {
font-size: 14px;
line-height: 16px;
}
.select-product-option-modal .product-purchase__info .quantity-box {
width: unset;
height: unset;
}
.select-product-option-modal .product-purchase__info .counter__input {
width: 50px;
}
.select-product-option-modal .product-purchase__info .purchase__total em {
font-style: normal;
}
.select-product-option-modal .product-purchase__info .purchase__btns {
justify-content: center;
}
.select-product-option-modal .product-purchase__info .purchase__btns button {
flex: 1;
}
.select-product-option-modal .product-summary__title {
margin-top: unset;
font-size: 18px;
width: 368px;
}
.select-product-option-modal .product-summary__price-detail {
margin-top: 0px;
}
.select-product-option-modal .product-summary__off-percent {
font-size: 20px;
}
.select-product-option-modal .product-summary__off-percent ~ .product-summary__price {
margin-left: 5px;
}
.select-product-option-modal .product-summary__price {
font-size: 20px;
}
.select-product-option-modal .product-summary__off-percent ~ .product-summary__original-price {
margin-left: unset;
}
.select-product-option-modal .product-summary__original-price {
font-size: 16px;
}
.select-product-option-modal .product-summary__info {
margin-top: 16px;
}
.select-product-option-modal .product-summary__freight em {
font-style: normal;
}
.select-product-option-modal .product-summary__promotion-text {
font-size: 12px;
margin: 12px 0;
}
.select-product-option-modal .product-summary .coupon-download-wrap {
width: unset;
min-height: unset;
}
.select-product-option-modal .product-summary__purchase-option .quantity-box {
width: 100%;
}
.select-product-option-modal .text-option__label em {
font-style: normal;
}
.tooltip {
position: absolute;
top: calc(100% + 10px);
left: -20px;
display: none;
z-index: 5;
padding: 20px;
background-color: var(--color-base-white);
box-shadow: inset 0 0 0 1px var(--gray300);
width: max-content;
}
.tooltip.active {
display: block;
}
.tooltip.coupon-guide {
position: absolute;
top: calc(100% + 15px);
right: -75px;
left: unset;
}
.tooltip.coupon-guide::before {
position: absolute;
right: 93px;
left: unset;
}
.tooltip::before {
position: absolute;
top: -6px;
left: 20px;
transform: rotate(-45deg);
content: "";
width: 12px;
height: 12px;
background-color: inherit;
border: 1px solid var(--gray300);
border-width: 1px 1px 0 0;
}
.tooltip__header {
display: flex;
justify-content: space-between;
}
.tooltip__title {
color: var(--color-base-black);
font-family: "Noto Sans KR";
font-size: 16px;
font-weight: 700;
}
.tooltip__content {
margin-top: 22px;
}
.tooltip__close-btn {
cursor: pointer;
}
.coupon-guide-container {
position: relative;
}
.extra-product-purchase__info .accordion__title {
font-size: 16px;
font-weight: 500;
border-bottom: none;
margin-top: 10px;
color: var(--gray600);
}
.extra-product-purchase__info .accordion__with-border-bottom {
border-bottom: 1px solid var(--gray200);
}
.extra-product-summary__purchase-option .quantity-box {
width: 100%;
}
.product-review-photos {
width: 588px;
height: 777px;
gap: 12px;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow: auto;
}
.product-review-photos__img-box {
position: relative;
width: 92px;
height: 92px;
overflow: hidden;
}
.product-review-photos img {
border: 1px solid var(--gray200);
aspect-ratio: 1/1;
}
.product-review-photos__attached-file-count {
font-size: 14px;
line-height: 20px;
font-weight: 700;
padding: 5px;
position: absolute;
right: 0;
bottom: 0;
background-color: var(--color-base-navy);
width: 30px;
height: 30px;
color: var(--color-base-white);
text-align: center;
}
.board-reviews-detail-first-type-modal .title-modal__content {
width: 792px;
height: 562px;
overflow: auto;
}
.board-reviews-detail-first-type {
display: flex;
gap: 20px;
padding: 40px;
}
.board-reviews-detail-first-type .board-reviews-detail__extra-info__tags-wrapper {
display: flex;
gap: 8px;
margin-top: 20px;
flex-wrap: wrap;
}
.board-reviews-detail-first-type .board-reviews-detail__extra-info__tag-container {
padding: 5px 20px;
border: 1px solid var(--color-point);
border-radius: 15px;
width: fit-content;
display: flex;
gap: 1vw;
position: relative;
background-color: var(--color-base-white);
}
.board-reviews-detail-first-type .board-reviews-detail__extra-info__tag-value-name {
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: var(--color-point);
}
.board-reviews-detail-first-type .board-reviews-detail__attachment::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
.board-reviews-detail-first-type .board-reviews-detail__attachment.active::before {
background-color: unset;
}
.board-reviews-detail-first-type .board-reviews-detail__active-image {
width: 360px;
height: 360px;
}
.board-reviews-detail-first-type .board-reviews-detail__top {
display: flex;
flex-direction: column;
flex: none;
width: 300px;
}
.board-reviews-detail-first-type .board-reviews-detail__rate-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.board-reviews-detail-first-type .board-reviews-detail__images {
flex: 1;
position: relative;
aspect-ratio: 1/1;
}
.board-reviews-detail-first-type .board-reviews-detail__images img {
width: 100%;
}
.board-reviews-detail-first-type .board-reviews-detail__images button {
position: absolute;
top: 15vh;
border: none;
width: 40px;
height: 40px;
background-color: var(--color-base-white);
opacity: 0.5;
}
.board-reviews-detail-first-type .board-reviews-detail__images .next {
right: 0;
transform: rotate(-90deg);
}
.board-reviews-detail-first-type .board-reviews-detail__images .prev {
left: 0;
transform: rotate(90deg);
}
.board-reviews-detail-first-type .board-reviews-detail__attachments {
gap: 5px;
}
.board-reviews-detail-first-type .board-reviews-detail__attachment {
display: flex;
justify-content: center;
align-items: center;
}
.board-reviews-detail-first-type .board-reviews-detail__attachment img {
width: 80px;
height: 80px;
object-fit: fill;
}
.board-reviews-detail-first-type .board-reviews-detail__bottom {
padding: 20px 0;
height: 100%;
}
.board-reviews-detail-first-type .board-reviews-detail__write-info span + span::before {
content: "|";
margin-right: 5px;
color: var(--gray200);
}
.board-reviews-detail-first-type .board-reviews-detail__writer {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.board-reviews-detail-first-type .board-reviews-detail__date {
font-size: 16px;
line-height: 18px;
font-weight: 400;
}
.board-reviews-detail-first-type .board-reviews-detail__option {
font-size: 16px;
line-height: 16px;
font-weight: 400;
}
.board-reviews-detail-first-type .board-reviews-detail__content {
padding: 20px 0 0 0;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: var(--gray600);
white-space: pre-line;
word-break: break-all;
}
.board-reviews-detail-first-type .board-reviews-detail__recommend {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 60px;
padding: 10px;
gap: 3px;
border-bottom: 1px solid var(--gray200);
}
.board-reviews-detail-first-type .board-reviews-detail__recommend .recommend__cnt {
border: none;
background-color: transparent;
line-height: 16px;
}
.board-reviews-detail-first-type .board-reviews-detail__recommend .ico--chevron-down-24 {
cursor: pointer;
}
.board-reviews-detail-first-type .board-reviews-detail__recommend .ico--chevron-down-24.open {
transform: rotate(-180deg);
}
.board-reviews-detail-first-type .board-reviews-detail__recommend span.font-montserrat {
vertical-align: baseline;
line-height: 25px;
}
.board-reviews-detail-first-type .board-reviews-detail__review-comments {
display: flex;
align-items: center;
gap: 3px;
line-height: 25px;
}
.board-reviews-detail-first-type .board-reviews-detail__review-comments::before {
display: inline;
content: "|";
padding: 6px 0;
color: var(--gray300);
margin: 0 12px;
}
.board-reviews-detail-first-type .board-reviews-detail__review-comments .ico--chevron-down-24.open {
transform: rotate(180deg);
}
.board-reviews-detail-first-type .review-comments__write-info {
padding-top: 20px;
}
.board-reviews-detail-first-type .review-comments__write-info span + span::before {
content: "|";
margin: 0 6px 0 4px;
color: var(--default-color);
}
.board-reviews-detail-first-type .review-comments__writer {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.board-reviews-detail-first-type .review-comments__date {
font-size: 16px;
line-height: 16px;
font-weight: 400;
font-weight: 400;
}
.board-reviews-detail-first-type .review-comments__content {
font-size: 16px;
line-height: 16px;
font-weight: 400;
white-space: pre-line;
}
.board-reviews-detail-second-type-modal .title-modal__content {
width: 588px;
height: 791px;
overflow: auto;
}
.board-reviews-detail-second-type {
padding: 40px;
}
.board-reviews-detail-second-type .board-reviews-detail__extra-info__tags-wrapper {
display: flex;
gap: 8px;
margin-top: 20px;
flex-wrap: wrap;
}
.board-reviews-detail-second-type .board-reviews-detail__extra-info__tag-container {
padding: 5px 20px;
border: 1px solid var(--color-point);
border-radius: 15px;
width: fit-content;
display: flex;
gap: 1vw;
position: relative;
background-color: var(--color-base-white);
}
.board-reviews-detail-second-type .board-reviews-detail__extra-info__tag-value-name {
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: var(--color-point);
}
.board-reviews-detail-second-type .board-reviews-detail__attachment::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
.board-reviews-detail-second-type .board-reviews-detail__attachment.active::before {
background-color: unset;
}
.board-reviews-detail-second-type .board-reviews-detail__top {
display: flex;
justify-content: space-between;
align-items: center;
}
.board-reviews-detail-second-type .board-reviews-detail__images-box {
display: flex;
gap: 20px;
}
.board-reviews-detail-second-type .board-reviews-detail__images {
flex: 1;
padding: 20px 0;
position: relative;
aspect-ratio: 1/1;
}
.board-reviews-detail-second-type .board-reviews-detail__images img {
width: 100%;
}
.board-reviews-detail-second-type .board-reviews-detail__images button {
position: absolute;
top: 19vh;
border: none;
width: 40px;
height: 40px;
background-color: var(--color-base-white);
opacity: 0.5;
}
.board-reviews-detail-second-type .board-reviews-detail__images .next {
right: 0;
transform: rotate(-90deg);
}
.board-reviews-detail-second-type .board-reviews-detail__images .prev {
left: 0;
transform: rotate(90deg);
}
.board-reviews-detail-second-type .board-reviews-detail__attachments {
flex: none;
width: 88px;
padding: 20px 0;
gap: 5px;
display: flex;
flex-direction: column;
}
.board-reviews-detail-second-type .board-reviews-detail__attachment {
display: flex;
justify-content: center;
align-items: center;
}
.board-reviews-detail-second-type .board-reviews-detail__attachment img {
width: 80px;
height: 80px;
}
.board-reviews-detail-second-type .board-reviews-detail__bottom {
padding: 20px 0;
}
.board-reviews-detail-second-type .board-reviews-detail__write-info {
display: flex;
justify-content: space-between;
}
.board-reviews-detail-second-type .board-reviews-detail__write-info span + span::before {
content: "|";
margin-right: 5px;
color: var(--gray200);
}
.board-reviews-detail-second-type .board-reviews-detail__writer {
font-size: 16px;
font-weight: 500;
}
.board-reviews-detail-second-type .board-reviews-detail__date {
font-weight: 400;
}
.board-reviews-detail-second-type .board-reviews-detail__content {
padding: 20px 0 0 0;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: var(--gray600);
white-space: pre-line;
}
.board-reviews-detail-second-type .board-reviews-detail__recommend {
display: flex;
justify-content: flex-end;
margin-top: 20px;
padding: 10px 0;
gap: 3px;
border-bottom: 1px solid var(--gray200);
}
.board-reviews-detail-second-type .board-reviews-detail__recommend div + div::before {
content: "|";
color: var(--gray200);
padding: 0 5px;
margin: 0 12px;
}
.board-reviews-detail-second-type .board-reviews-detail__recommend .recommend__cnt {
border: none;
background-color: transparent;
line-height: 16px;
}
.board-reviews-detail-second-type .board-reviews-detail__recommend .ico--chevron-down-24 {
cursor: pointer;
}
.board-reviews-detail-second-type .board-reviews-detail__recommend .ico--chevron-down-24.open {
transform: rotate(-180deg);
}
.board-reviews-detail-second-type .board-reviews-detail__recommend span.font-montserrat {
vertical-align: baseline;
line-height: 25px;
}
.board-reviews-detail-second-type .board-reviews-detail__review-comments::before {
width: 1px;
height: 12px;
display: inline-block;
content: "";
background: var(--gray300);
margin: 0 12px;
}
.board-reviews-detail-second-type .board-reviews-detail__review-comments .ico--chevron-down-24.open {
transform: rotate(180deg);
}
.board-reviews-detail-second-type .review-comments__write-info {
padding-top: 20px;
}
.board-reviews-detail-second-type .review-comments__write-info span + span::before {
content: "|";
padding: 10px;
color: var(--gray300);
}
.board-reviews-detail-second-type .review-comments__writer {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.board-reviews-detail-second-type .review-comments__date {
font-weight: 400;
font-size: 16px;
line-height: 16px;
}
.board-reviews-detail-second-type .review-comments__content {
color: var(--gray600);
white-space: pre-line;
}
.my-page-coupon-registration {
padding: 30px;
}
.my-page-coupon-registration__title {
margin: 20px 0;
text-align: center;
}
.my-page-coupon-registration .text-field {
margin-top: 1.125rem;
height: 40px;
}
.my-page-coupon-registration__buttons {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 2.5rem;
gap: 1rem;
}
.my-page-coupon-registration__buttons button {
width: 100%;
height: 42px;
font-size: 12px;
}
.personal-inquiry-form-modal {
width: 588px;
height: 732px;
}
.personal-inquiry-form-modal__content {
height: 648px;
overflow-y: scroll;
}
.personal-inquiry-form__title {
font-weight: 500;
font-size: 16px;
padding-bottom: 10px;
}
.personal-inquiry-form .board-form {
padding: 30px;
}
.personal-inquiry-form .board-form__top {
margin-top: 20px;
}
.personal-inquiry-form .board-form__container {
gap: 20px;
}
.personal-inquiry-form__notice-reply {
margin-top: 40px;
}
.personal-inquiry-form .article-form__attachments {
margin-top: 20px;
}
.personal-inquiry-form .board-form__notice-text {
margin: 0;
}
.product-inquiry-form-modal {
width: 588px;
height: 788px;
}
.product-inquiry-form-modal__content {
height: 704px;
overflow-y: scroll;
}
.product-inquiry-form .board-form__type-selector select {
padding: 5px;
}
.product-inquiry-form .board-form {
padding: 40px 40px 60px 40px;
gap: 16px;
}
.product-inquiry-form .board-form__top {
border: none;
}
.product-inquiry-form .board-form__product-item-witch-button {
padding: 0;
}
.product-inquiry-form .board-form__checkbox-group {
margin-top: 0;
}
.product-inquiry-form .board-form__checkbox-group .check-radio__label {
font-size: 14px;
line-height: 14px;
font-weight: 400;
}
.product-inquiry-form .board-form__product-select-label {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.product-inquiry-form .board-form__note-text {
font-size: 14px;
line-height: 14px;
font-weight: 400;
color: var(--gray500);
}
.product-inquiry-form__inquiry-type {
font-size: 16px;
line-height: 16px;
font-weight: 500;
}
.product-inquiry-form__description {
padding: 20px;
}
.product-inquiry-form__content {
padding: 20px;
}
.product-inquiry-form__type {
border-color: var(--gray-border-color);
height: 2.5rem;
padding-top: 0.375rem;
color: var(--gray-color);
}
.product-inquiry-form__title input {
height: 3rem;
}
.product-inquiry-form .character-counter {
margin: 10px 0;
}
.product-inquiry-form__text {
min-height: 18.75rem;
}
.product-inquiry-form__secret .check-radio__label {
font-size: 14px;
font-weight: 400;
}
.product-inquiry-form__secret .check-radio__ico {
border-radius: 4px;
}
.product-inquiry-detail .right-box__answer,
.product-inquiry-detail .right-box__content {
font-size: 16px;
font-weight: 400;
line-height: 16px;
padding: 24px 12px;
}
.title-modal--select-product-modal {
min-width: 792px;
}
.select-product .empty-list {
flex: 1;
}
.select-product {
padding: 30px;
display: flex;
flex-direction: column;
gap: 10px;
height: max-content;
}
.select-product__pagination-btn {
border: none;
background-color: transparent;
}
.select-product__search-box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
background-color: var(--gray100);
padding: 14px 25px 14px 25px;
}
.select-product__select-category {
display: flex;
gap: 12px;
}
.select-product__table-box {
height: 472px;
overflow-y: auto;
}
.select-product__table {
display: flex;
flex-direction: column;
width: 100%;
}
.select-product__table.table {
min-height: 350px;
margin-bottom: 40px;
}
.select-product__table.title-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 56px;
border-bottom: 1px solid var(--gray200);
font-weight: 500;
text-align: center;
}
.select-product__table.row {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
width: 100%;
height: 104px;
border-bottom: 1px solid var(--gray200);
padding: 12px 21px 12px 20px;
}
.select-product__table.text-cell {
text-align: left;
font-weight: 500;
flex-direction: row;
align-items: center;
gap: 16px;
}
.select-product__table.text-cell img {
flex: none;
width: 80px;
height: 80px;
border: 1px solid var(--gray200);
}
.select-product__table.cell:first-child {
flex: 2;
}
.select-product__table.cell:nth-child(2) {
flex: 1;
}
.select-product__table.cell:nth-child(3) {
width: 124px;
}
.product-review-form-modal {
width: 588px;
height: 716px;
}
.product-review-form-modal__content {
height: 632px;
overflow-y: scroll;
}
.product-review-form .board-form {
padding: 40px;
}
.product-review-form .article-form__attachments {
gap: 8px;
}
.title-modal--select-order-product-modal {
width: 822px;
}
.select-order-product {
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
height: max-content;
}
.select-order-product-search-field {
display: flex;
flex-direction: column;
gap: 12px;
background-color: var(--gray200);
padding: 20px;
}
.select-order-product-search-field .select {
flex: none;
width: 104px;
color: var(--gray500);
font-size: 14px;
}
.select-order-product-search-field .text-field {
color: var(--gray500);
font-size: 14px;
}
.select-order-product-search-field .date-selector {
padding: 0;
background: none;
}
.select-order-product-search-field .date-selector__date-picker-wrap {
width: 300px;
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
flex: none;
width: 280px;
}
.select-order-product-search-field .date-selector__date-picker {
width: inherit;
}
.select-order-product-list {
max-height: 628px;
overflow-y: auto;
}
.select-order-product-list__order-info {
font-size: 12px;
font-weight: 500;
margin: 20px 0;
}
.select-order-product-list__order-no {
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: var(--color-base-black);
}
.select-order-product-list__product-info {
display: flex;
gap: 20px;
}
.select-order-product-list__product-info-img-box {
flex: none;
width: 80px;
height: 80px;
margin: auto 0;
}
.select-order-product-list__product-info-container {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 12px;
margin: 12px 0;
}
.select-order-product-list__product-name {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
}
.select-order-product-list__product-option {
font-size: 12px;
color: var(--gray600);
}
.select-order-product-list__product-order-status {
margin-left: 8px;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: var(--gray600);
}
.select-order-product-list .empty-list {
min-height: 25vh;
}
.select-order-product-list__table {
display: flex;
flex-direction: column;
width: 100%;
}
.select-order-product-list__table.table {
min-height: 500px;
}
.select-order-product-list__table.title-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 56px;
border-bottom: 1px solid #ccc;
font-weight: 500;
text-align: center;
}
.select-order-product-list__table .row {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
width: 100%;
min-height: 104px;
border-bottom: 1px solid #ccc;
}
.select-order-product-list__table .text-cell {
text-align: left;
}
.select-order-product-list__table .option-cell {
width: 10%;
}
.select-order-product-list__table .option-cell button {
width: 100%;
min-width: inherit;
}
.select-order-product-list__table .status-cell {
width: 20%;
}
.select-order-product-list__table .info-cell {
width: 30%;
gap: 3px;
}
.select-order-product-list__table .product-cell {
width: 40%;
}
.select-order-product-list .pagination {
margin-top: 10px;
}
.coupon-modal {
width: 792px;
padding: 20px 40px 40px;
}
.coupon-modal__controller-item {
display: grid;
grid-template-columns: 16px 1fr;
align-items: center;
}
.coupon-modal__display-coupon-name {
font-weight: 400;
font-size: 16px;
}
.coupon-modal__coupon-title {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-base-black);
}
.coupon-modal__product-coupon-header {
display: grid;
grid-template-columns: 160px auto 100px 120px;
border-bottom: 1px solid var(--gray200);
height: 56px;
align-items: center;
text-align: center;
font-weight: 500;
font-size: 16px;
color: var(--gray600);
}
.coupon-modal__cart-coupon-header {
display: grid;
grid-template-columns: auto 100px 120px;
border-bottom: 1px solid var(--gray200);
height: 56px;
align-items: center;
text-align: center;
font-weight: 500;
font-size: 16px;
color: var(--gray600);
}
.coupon-modal__item-row {
display: grid;
grid-template-columns: auto 100px 120px;
padding-block: 10px;
align-items: center;
gap: 20px;
width: 100%;
}
.coupon-modal__product-form-check-label {
word-break: keep-all;
width: 290px;
font-weight: 400;
font-size: 16px;
}
.coupon-modal__controller {
align-items: center;
border-bottom: 1px solid var(--gray200);
display: flex;
padding-block: 20px;
flex-direction: column;
}
.coupon-modal__summary {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-block: 40px;
background-color: var(--gray100);
position: -webkit-sticky;
position: sticky;
gap: 20px;
padding: 14px 20px;
border-radius: 10px;
}
.coupon-modal__summary-item p {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.coupon-modal__summary-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-weight: 500;
font-size: 14px;
color: var(--gray500);
gap: 10px;
}
.coupon-modal__summary-item strong {
font-weight: 700;
font-size: 18px;
color: var(--gray600);
margin-right: 4px;
}
.coupon-modal__summary-item strong.highlight {
color: var(--color-point);
}
.coupon-modal__top-desc {
font-weight: 500;
font-size: 16px;
color: var(--color-point);
position: relative;
padding-left: 11px;
}
.coupon-modal__top-desc:before {
position: absolute;
top: 10px;
left: 0;
width: 3px;
height: 3px;
background: var(--color-point);
content: "";
}
.coupon-modal__details {
background-color: var(--gray300);
}
.coupon-modal__coupon-details {
background-color: white;
}
.coupon-modal__coupon-section + .coupon-modal__coupon-section {
margin-top: 30px;
}
.coupon-modal__coupon-wrap {
display: flex;
flex-direction: column;
gap: 0;
}
.coupon-modal__coupon-item-row {
display: grid;
grid-template-columns: 160px auto;
border-bottom: 1px solid var(--gray200);
padding-block: 20px;
gap: 20px;
}
.coupon-modal__caution-list > li {
position: relative;
color: var(--gray500);
font-weight: 400;
font-size: 14px;
padding-left: 11px;
}
.coupon-modal__caution-list > li:before {
position: absolute;
top: 10px;
left: 0;
width: 3px;
height: 3px;
background: var(--gray400);
content: "";
}
.coupon-modal__caution-list li + li {
margin-top: 4px;
}
.coupon-modal__caution-list-title {
font-weight: 700;
font-size: 20px;
border-bottom: 2px solid var(--color-base-black);
margin-bottom: 20px;
padding-bottom: 20px;
}
.coupon-modal__coupon-type {
font-weight: 700;
font-size: 20px;
}
.coupon-modal__coupon-desc {
font-weight: 400;
font-size: 16px;
color: var(--gray500);
margin-left: 20px;
}
.coupon-modal__coupon-desc > span {
display: list-item;
}
.coupon-modal__product-name {
font-weight: 700;
font-size: 16px;
}
.coupon-modal__date {
color: var(--gray500);
font-weight: 400;
font-size: 16px;
}
.coupon-modal__coupon-amount {
text-align: center;
color: var(--color-point);
}
.coupon-modal__apply-btn {
margin-top: 40px;
background-color: var(--color-point);
border: none;
color: white;
height: 50px;
}
.coupon-modal__info {
margin-top: 15px;
}
.coupon-modal__button-wrapper {
display: flex;
margin-block: 40px;
gap: 12px;
justify-content: center;
}
.coupon-modal__button-wrapper > .btn {
flex-basis: 248px;
}
.coupon-modal__coupon-warning-btn {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -317px -185px;
width: 14px;
height: 14px;
border: none;
background-color: var(--whole-color);
margin-top: 5px;
padding: 0;
}
.my-pay-setting-modal {
padding: 20px;
}
.my-pay-setting-modal__top {
font-size: 16px;
font-weight: 500;
}
.my-pay-setting-modal__service-btns {
display: flex;
justify-content: flex-end;
font-size: 14px;
align-items: center;
gap: 10px;
margin-bottom: 40px;
}
.my-pay-setting-modal__count {
color: var(--color-point);
font-size: 14px;
font-weight: 700;
}
.my-pay-setting-modal__list {
border-top: 2px solid var(--color-base-black);
margin-top: 20px;
margin-bottom: 20px;
}
.my-pay-setting-modal__list-item {
display: grid;
grid-template-columns: 30px 90px auto 97px;
border-bottom: 1px solid var(--gray200);
padding-block: 20px;
gap: 10px;
align-items: center;
}
.my-pay-setting-modal__bookmark-btn {
background-color: transparent;
border: none;
}
.my-pay-setting-modal__info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.my-pay-setting-modal__bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.claim-detail {
width: 792px;
padding: 40px 40px 60px;
}
.claim-detail__contents {
border-top: 2px solid var(--color-base-black);
margin-bottom: 40px;
}
.claim-detail__contents dl {
display: grid;
grid-template-columns: 0.8fr 2fr;
}
.claim-detail__contents dt {
font-weight: 500;
}
.claim-detail__contents dt,
.claim-detail__contents dd {
padding: 18px 0;
border-bottom: 1px solid var(--gray200);
}
.claim-detail .btn {
width: 384px;
margin: 0 auto;
display: block;
}
/* 필수 추가상품 묶음 클레임 확인 팝업
표 / 상품정보 / 수량 / 금액은 취소 신청 페이지(claim-form)의 스타일을 그대로 따른다.
thumb-item / currency 는 스코프 안에서만 레이아웃이 잡히므로 여기서 다시 선언한다. */
.claim-required-bundle {
width: 792px;
padding: 24px 32px 32px;
color: var(--gray600);
/* 취소 신청 페이지와 동일하게 em 기울임을 해제한다. */
/* 개별 클레임 불가 안내 (팝업 상단) */
/* div 로 만든 표 (table 을 쓰면 DOMParser 가 {{#each}} 를 밖으로 밀어낸다) */
}
.claim-required-bundle em {
font-style: unset;
font-weight: 700;
}
.claim-required-bundle__guide {
margin-bottom: 20px;
color: var(--color-error);
}
.claim-required-bundle__table {
border-top: 1px solid var(--color-base-black);
}
.claim-required-bundle__thead {
display: flex;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--gray200);
font-weight: 500;
text-align: center;
}
.claim-required-bundle__tr {
display: flex;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--gray200);
}
.claim-required-bundle__col-product {
flex: 1;
min-width: 0;
}
.claim-required-bundle__col-count {
width: 90px;
text-align: center;
}
.claim-required-bundle__col-amount {
width: 120px;
text-align: center;
}
.claim-required-bundle .thumb-item {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
gap: 12px;
font-size: 12px;
text-align: left;
}
.claim-required-bundle .thumb-item .base-product-name {
display: inline;
}
.claim-required-bundle .thumb-item__info {
flex: 1;
}
.claim-required-bundle .thumb-item__media {
flex-shrink: 0;
width: 100px;
height: 100px;
border: 1px solid var(--gray200);
}
.claim-required-bundle .thumb-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.claim-required-bundle .thumb-item__product-name {
color: var(--color-base-black);
font-weight: 700;
font-size: 16px;
}
.claim-required-bundle .thumb-item__product-name span {
display: inline;
}
.claim-required-bundle .currency {
display: block;
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
.claim-required-bundle .currency em {
font-family: "Montserrat";
font-weight: 700;
font-size: 16px;
}
.claim-required-bundle__btns {
display: flex;
gap: 8px;
margin-top: 32px;
}
.claim-required-bundle__btns .btn {
flex: 1;
height: 56px;
}
.search-zip-code {
width: 588px;
height: 720px;
}
.search-zip-code .addresses {
height: 400px;
overflow-y: scroll;
}
.order-sheet-progress-modal {
width: 588px;
padding: 30px 28px 40px;
}
.order-sheet-progress-modal__content {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 10px;
}
.order-sheet-progress-modal__content.without-border-bottom {
border-bottom: none;
}
.order-sheet-progress-modal__content h3 {
font-weight: 700;
font-size: 16px;
}
.order-sheet-progress-modal__content p {
font-weight: 400;
font-size: 12px;
color: var(--gray500);
word-break: keep-all;
text-align: center;
}
.order-sheet-progress-modal__content .notice-waiting {
display: block;
width: 56px;
height: 56px;
background-size: 364px 335px;
background-position: -112px -87px;
margin-bottom: 12px;
}
.order-sheet-progress-modal__open-payment-window-btn {
width: 100%;
margin-top: 30px;
margin-bottom: 10px;
}
.order-sheet-progress-modal__bottom {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 20px;
gap: 10px;
}
.dormant-sign-in-modal {
width: 588px;
}
.dormant-sign-in {
padding: 20px;
}
.dormant-sign-in__title {
text-align: center;
font-weight: 500;
font-size: 20px;
}
.dormant-sign-in__callout {
margin-top: 20px;
background-color: var(--gray100);
padding: 10px;
}
.dormant-sign-in__callout p {
text-align: center;
font-family: "Montserrat";
}
.dormant-sign-in__callout p span {
font-family: "Noto Sans KR", sans-serif;
margin: 10px 40px 10px 0;
font-weight: 700;
}
.dormant-sign-in__description {
margin-top: 20px;
font-size: 14px;
}
.dormant-sign-in__description p {
color: var(--gray400);
}
.dormant-sign-in__description p:last-child {
margin-top: 10px;
color: var(--color-base-black);
font-weight: 700;
}
.dormant-sign-in__button-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 20px;
gap: 10px;
}
.dormant-sign-in__button-wrapper button {
width: 100%;
}
.password-form {
display: flex;
flex-direction: column;
justify-content: space-between;
width: max-content;
padding: 40px 40px 60px 40px;
gap: 40px;
}
.password-form__subscription {
font-size: 20px;
line-height: 20px;
text-align: center;
margin: 20px;
}
.password-form__subscription + .password-form__subscription {
margin-top: 6px;
}
.password-form__input {
height: 40px;
padding: 20px 10px;
}
.password-form__btns {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
gap: 20px;
}
.password-form__btns .btn {
width: 100%;
}
.modal .coupon-download-wrap {
width: 588px;
min-height: 512px;
padding-bottom: 0;
}
.modal .coupon-download-content {
height: 400px;
overflow: scroll;
padding: 40px;
padding-bottom: 0;
}
.modal .coupon-download__btn-wrap {
float: none;
display: flex;
justify-content: space-evenly;
gap: 12px;
padding: 0 40px 60px 40px;
margin-top: 40px;
}
.modal .coupon-download__btn-wrap .btn {
width: 100%;
}
.discount-price-information__description {
margin-top: 20px;
padding: 20px;
background: var(--gray100);
color: var(--gray600);
font-family: "Noto Sans KR";
font-size: 12px;
font-weight: 400;
}
.discount-price-information__description li {
list-style: outside;
margin-left: 6px;
}
.discount-price-information__detail li {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 14px;
color: var(--color-base-black);
font-family: "Noto Sans KR";
font-size: 14px;
font-weight: 400;
}
.discount-price-information__detail li em {
text-align: right;
font-family: Montserrat;
font-size: 16px;
font-weight: 700;
}
.discount-price-information__detail .total-price {
color: var(--color-point);
font-family: "Noto Sans KR";
font-size: 14px;
font-weight: 400;
}
.discount-price-information .guide__sub-description {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
}
.find-id-result {
width: 384px;
margin: 20px auto;
padding: 0 20px;
}
.find-id-result__title {
font-size: 1rem;
text-align: center;
margin: 20px 0;
}
.find-id-result__id-wrap {
margin-top: 20px;
padding: 25px 0;
background-color: var(--gray100);
max-height: 140px;
overflow-y: scroll;
text-align: center;
}
.find-id-result__dormant-text {
color: var(--color-tertiary);
}
.find-id-result__link-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 20px;
gap: 10px;
}
.find-id-result__link-wrap .btn {
width: 100%;
}
.find-password-authentication {
width: 384px;
padding: 20px;
margin: 0 auto 20px;
}
.find-password-authentication__title {
font-size: 1rem;
font-weight: 500;
}
.find-password-authentication__input-wrap {
margin-top: 20px;
position: relative;
}
.find-password-authentication__caution {
margin-top: 10px;
color: var(--color-caution);
}
.find-password-authentication__btn-wrap {
margin-top: 20px;
}
.find-password-authentication__btn-wrap button {
width: 100%;
}
.find-password-authentication .timer {
position: absolute;
top: 14px;
right: 10px;
color: var(--gray400);
}
.find-password-authentication .timer .expired-timer {
color: var(--color-caution);
}
.my-grade {
padding: 0 30px 20px;
line-height: 28px;
overflow-y: auto;
min-width: 800px;
max-height: calc(100dvh - 60px);
}
.my-grade section + section {
margin-top: 20px;
}
.my-grade__top {
position: relative;
}
.my-grade__top .ico {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
.my-grade__top .ico--chevron-down-24 .open {
transform: rotate(180deg);
}
.my-grade__title {
margin: 20px 0 12px 0;
font-size: 16px;
}
.my-grade__content {
max-height: 320px;
overflow: auto;
}
.my-grade dl:first-of-type {
border-top: 2px solid var(--color-base-black);
}
.my-grade dl {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
border-top: 1px solid var(--gray200);
color: var(--gray500) dt;
color-width: 120px;
color-padding: 8px 0;
}
.my-grade dl dd {
border-left: 1px solid var(--gray200);
padding-left: 6px;
overflow-x: auto;
padding: 8px 0 8px 8px;
flex: 1;
}
.password-authentication {
min-width: 588px;
}
.password-authentication-form {
margin: 20px 0;
padding: 0 20px;
}
.password-authentication-form__info-text {
text-align: center;
}
.password-authentication-form__item {
margin-top: 20px;
}
.password-authentication-form__input-wrap {
margin-top: 6px;
}
.password-authentication-form__button-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 20px;
gap: 10px;
}
.password-authentication-form__button-wrap button {
width: 100%;
height: 50px;
}
.article-write--modal {
width: 588px;
height: 720px;
overflow: auto;
padding: 30px;
}
.title-modal--app-card-authenticate {
min-width: 588px;
}
.app-card-authenticate {
padding: 40px 40px 40px 60px;
text-align: center;
}
.app-card-authenticate__qr-info {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
font-weight: 700;
}
.app-card-authenticate__qr-code {
display: flex;
justify-content: center;
align-items: center;
}
.app-card-authenticate__qr-code img {
width: 200px;
height: 200px;
}
.app-card-authenticate__btns {
display: flex;
gap: 12px;
margin-top: 40px;
}
.app-card-authenticate__btns button {
width: 100%;
}
.app-card-authenticate .count-down {
font-size: 16px;
font-weight: 400;
}
.app-card-authenticate .count-down__time {
color: #f92626;
}
.restock-notification-form__modal {
width: 600px;
padding: 40px;
}
.restock-notification-form__sold-out-option {
width: 100%;
height: 100%;
}
.restock-notification-form__sold-out-option__description, .restock-notification-form__sold-out-option__product-name {
width: 100%;
height: 100%;
font-weight: 500;
font-size: 18px;
}
.restock-notification-form__sold-out-option__description {
margin-bottom: 20px;
}
.restock-notification-form__sold-out-option__wrap {
background-color: var(--gray100);
color: var(--color-secondary);
padding: 20px;
}
.restock-notification-form__sold-out-option__list {
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
max-height: 180px;
}
.restock-notification-form__applicant-info {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 0;
}
.restock-notification-form__item {
display: flex;
flex-direction: row;
gap: 20px;
}
.restock-notification-form__label {
width: 100px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.restock-notification-form__input-wrap {
flex: 1;
}
.restock-notification-form__agreement-content {
background: var(--gray100);
margin-top: 20px;
max-height: 160px;
overflow-y: auto;
padding: 20px;
}
.restock-notification-form__buttons {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 24px;
gap: 1rem;
}
.restock-notification-form__buttons button {
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 400;
}
.shopby-header {
display: block;
min-height: 166px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 40px;
width: 1200px;
margin-inline: auto;
}
.header__logo {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
width: 250px;
height: 33px;
}
.header__logo.center {
justify-content: center;
}
.header__logo-img {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
position: absolute;
width: 250px;
max-height: 76px;
overflow: hidden;
}
.header__search {
position: relative;
width: 480px;
padding-block-end: 5px;
border-block-end: 2px solid var(--color-base-black);
background-color: var(--color-base-white);
font-size: 16px;
}
.header__search.width-270 {
width: 270px;
}
.header__search-input {
width: 100%;
border: 0;
outline: none;
}
.header__search-input::placeholder {
color: var(--gray400);
}
.header__search-btn {
position: absolute;
top: 0;
right: 0;
background-size: 364px 335px;
background-position: -118px -307px;
width: 24px;
height: 24px;
border: 0;
cursor: pointer;
background-color: var(--color-base-white);
}
.header__bottom-line {
width: 100%;
height: 1px;
background-color: var(--gray200);
}
.member {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-weight: 500;
font-size: 18px;
text-transform: uppercase;
line-height: 1;
}
.member.font-14 {
font-size: 14px;
}
.member__menu {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
gap: 20px;
width: 300px;
}
.member__menu-link {
text-decoration: none;
color: inherit;
cursor: pointer;
line-height: 18px;
}
.member__menu-link-badge {
font-size: 12px;
line-height: 12px;
}
.my-menu {
position: relative;
}
.my-menu__label {
padding-right: 15px;
cursor: pointer;
}
.my-menu__label::after {
position: absolute;
top: 50%;
right: 0;
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -305px -164px;
content: "";
transform: translateY(-50%);
width: 12px;
height: 6px;
}
.my-menu__list {
position: absolute;
top: calc(100% + 3px);
right: -20px;
display: none;
z-index: 15;
padding: 20px;
background-color: var(--color-base-white);
box-shadow: inset 0 0 0 1px var(--gray300);
width: max-content;
}
.my-menu__list::before {
position: absolute;
top: -6px;
right: 20px;
transform: rotate(-45deg);
content: "";
width: 12px;
height: 12px;
background-color: inherit;
border: 1px solid var(--gray300);
border-width: 1px 1px 0 0;
}
.my-menu__list > li:nth-child(n+2) {
margin-block-start: 5px;
}
.my-menu__label:hover::after {
transform: translateY(-50%) rotate(180deg);
}
.my-menu__label:hover ~ .my-menu__list {
display: block;
}
.my-menu__list:hover {
display: block;
}
.my-menu:has(.my-menu__list:hover) .my-menu__label::after {
transform: translateY(-50%) rotate(180deg);
}
.my-menu__link {
text-decoration: none;
color: inherit;
font-weight: 400;
font-size: 14px;
}
.nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
font-size: 16px;
padding-block-end: 28px;
line-height: 1;
width: 1200px;
margin-inline: auto;
}
.nav__all-menu-btn {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 0;
background-color: transparent;
border: 0;
cursor: pointer;
font-weight: 500;
}
.nav__all-menu-btn::before {
background-image: url("/assets/images/sprite.png");
background-repeat: no-repeat;
background-size: 364px 335px;
background-position: -314px -281px;
content: "";
width: 24px;
height: 24px;
}
.nav__slide {
position: relative;
width: 650px;
padding-inline: 20px;
}
.nav__slide.width-974 {
width: 974px;
}
.nav__slide-btn {
position: absolute;
top: 50%;
left: 0;
background-size: 364px 335px;
background-position: -354px -200px;
transform: translateY(-50%);
padding: 0;
width: 6px;
height: 12px;
border: 0;
cursor: pointer;
background-color: var(--color-base-white);
}
.nav__slide-next {
left: auto;
right: 0;
transform: translateY(-50%) rotate(180deg);
}
.nav__slider {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.nav__slider-wrap {
margin-left: 0;
}
.nav__slider-item {
display: block;
color: var(--gray600);
text-decoration: none;
font-size: 14px;
line-height: 1.6;
}
.nav__slider .swiper-slide {
width: fit-content;
}
.nav__link-wrap {
display: flex;
justify-content: end;
align-items: center;
flex-direction: row;
width: 200px;
}
.nav__link {
position: relative;
}
.nav__link:first-child {
padding-inline-end: 15px;
}
.nav__link + .nav__link {
padding-inline-start: 15px;
}
.nav__link + .nav__link::before {
position: absolute;
top: 50%;
left: 0;
content: "";
width: 1px;
height: 12px;
transform: translateY(-50%);
background-color: var(--gray300);
}
.nav__link a {
text-decoration: none;
color: inherit;
}
.nav__all-menu {
position: absolute;
top: 100%;
z-index: 10;
border: 1px solid var(--gray300);
overscroll-behavior-x: contain;
}
.all-menu {
overflow: auto;
width: 100%;
height: max-content;
max-height: 660px;
padding: 40px 42px;
background-color: var(--color-base-white);
}
.all-menu:not(.is-active) {
display: none;
}
.all-menu > dl {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 28px;
row-gap: 40px;
}
.all-menu > dl:has(.notice) {
height: 100%;
justify-content: center;
}
.all-menu__category {
width: 160px;
line-height: 1.2;
}
.all-menu__category:last-child {
padding-inline-end: 45px;
}
.all-menu__tit {
margin-block-end: 20px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.33px;
text-transform: uppercase;
}
.all-menu__list > li:nth-child(n+2) {
margin-block-start: 20px;
}
.all-menu__sub-category {
margin-top: 20px;
border-top: 2px solid var(--gray200);
padding-top: 20px;
}
.all-menu__link {
text-decoration: none;
color: var(--gray600);
}
.all-menu__tit > .all-menu__link {
color: initial;
}
.shopby-common-footer__community:has(.board-list) {
border-top: 1px solid #d9d9d9;
padding-block: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.shopby-common-footer__community:has(.board-list) .board-list {
position: relative;
flex-wrap: wrap;
display: inline-flex;
align-items: center;
max-width: 1200px;
gap: 14px 50px;
font-size: 14px;
list-style: 14px;
}
.shopby-common-footer__community:has(.board-list) .board-list a {
text-decoration: none;
color: inherit;
}
.shopby-common-footer__community:has(.board-list) .board-list--normal {
color: var(--gray500) !important;
}
.shopby-common-footer__community:has(.board-list) .board-list + .board-list {
padding-inline-start: 50px;
}
.shopby-common-footer__community:has(.board-list) .board-list + .board-list::before {
position: absolute;
top: 50%;
left: 0;
content: "";
width: 1px;
height: 82%;
transform: translateY(-50%);
background-color: var(--gray300);
}
.shopby-common-footer__community:has(.board-list) .board-list:first-child:not(:only-child) {
padding-inline-end: 50px;
}
.footer {
min-width: 1200px;
padding-block: 60px;
background-color: var(--gray100);
color: var(--gray500);
}
.footer .l-panel {
display: flex;
justify-content: space-between;
gap: 20px;
}
.footer .l-panel.left {
text-align: left;
justify-content: left;
}
.footer .l-panel.center {
text-align: center;
justify-content: center;
}
.footer .l-panel.right {
text-align: right;
justify-content: right;
}
.footer__mall-name {
margin-bottom: 24px;
font-size: 30px;
line-height: 30px;
font-weight: 500;
color: var(--color-base-black);
}
.footer__logo {
background-size: 364px 335px;
background-position: 0px -143px;
margin-block-end: 24px;
display: block;
width: 137px;
height: 22px;
}
.footer a {
text-decoration: none;
color: inherit;
}
.footer__about-company {
margin-block-end: 10px;
color: var(--gray600);
}
.footer__about-company span:nth-child(n+2) {
position: relative;
margin-inline-start: 10px;
padding-inline-start: 10px;
}
.footer__about-company span:nth-child(n+2)::before {
position: absolute;
top: 50%;
left: 0;
content: "";
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: var(--gray300);
}
.footer__about-company a {
text-decoration: none;
color: inherit;
}
.footer__about-company a:last-of-type em {
font-style: normal;
}
.footer address {
margin-block-end: 14px;
font-style: normal;
line-height: 24px;
}
.footer address .font-montserrat {
font-weight: 500;
}
.footer .copyright {
margin-block-end: 24px;
font-weight: 500;
color: initial;
font-family: "Montserrat";
}
.footer__mark {
display: flex;
align-items: center;
gap: 12px;
}
.footer__mark li {
height: 52px;
}
.footer__mark li img {
display: inline-block;
height: inherit;
}
.footer__quick-link {
display: flex;
gap: 40px;
font-weight: 500;
font-size: 16px;
color: initial;
}
.footer__quick-link li:nth-child(n+2) {
margin-block-start: 24px;
}
.footer__quick-link a {
display: block;
width: max-content;
}
.footer__content {
font-size: 14px;
}
.footer__info dt {
margin-block-end: 10px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
color: initial;
}
.footer__info dt:nth-of-type(2) {
margin-block-start: 20px;
}
.footer__info--row {
padding-bottom: 20px;
}
.footer__info--row .title {
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
color: initial;
}
.footer__info--row li {
display: flex;
justify-content: center;
align-items: center;
gap: 0 30px;
}
.footer__info--row li + li {
padding-top: 8px;
}
body:has([shopby-common-footer]) [shopby-quick-menu] {
display: none;
}
.shopby-common-footer {
position: relative;
}
.quick-menu {
position: sticky;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 10px;
top: 100%;
pointer-events: auto;
}
.quick-menu__container {
position: fixed;
top: 0;
right: 55px;
height: calc(100vh - 60px);
z-index: 25;
pointer-events: none;
}
.quick-menu__link-basket {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.quick-menu__link-basket-badge {
position: absolute;
top: 10px;
right: 10px;
}
.my-page-menu {
display: flex;
align-items: flex-start;
flex-direction: row;
flex-direction: column;
float: left;
padding: 0px;
gap: 10px;
width: 204px;
}
.my-page-menu__title {
font-weight: 700;
font-size: 24px;
padding: 30px 0;
}
.my-page-menu__list {
width: 100%;
border-top: 2px solid var(--color-base-black);
}
.my-page-menu__list-item {
margin: 22px 0;
}
.sub-menu__title {
font-weight: 700;
font-size: 18px;
}
.sub-menu__list {
border-bottom: 1px solid var(--gray200);
padding-bottom: 10px;
margin-bottom: 10px;
}
.sub-menu__list-item {
padding: 5px 0 0 0;
}
.sub-menu__list-item.on {
font-weight: 700;
font-size: 16px;
}
.sub-menu__list-item a {
display: block;
padding: 11px 0;
font-size: 16px;
line-height: 16px;
color: var(--gray500);
text-decoration: none;
}
.skin-banner__skeleton {
height: 300px;
}
.skin-banner__img {
object-fit: contain;
margin: auto;
}
.skin-banner__contents.round-24 {
border-radius: 24px;
}
.skin-banner__contents.round-24 img {
border-radius: inherit;
}
.skin-banner--main-left {
max-width: 384px;
max-height: 340px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-inline-end: 24px;
overflow: hidden;
}
.skin-banner--main-center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
overflow: hidden;
height: 100%;
}
.skin-banner--main-center:nth-child(1) {
max-width: 588px;
}
.skin-banner--main-center:nth-child(1) .skin-banner__contents {
margin-block-end: 0;
}
.skin-banner--main-center:nth-child(2) {
max-width: 588px;
}
.skin-banner--main-center:nth-child(3) {
max-width: 588px;
grid-column: 2/2;
grid-row: 1/3;
}
.skin-banner--main-center-single {
width: 100%;
display: block;
}
.skin-banner--floating-left, .skin-banner--floating-right {
height: calc(100% - 120px);
z-index: 10;
pointer-events: none;
}
.skin-banner--floating-left {
position: absolute;
top: 0;
left: calc(50% - 800px);
}
.skin-banner--floating-right {
position: absolute;
top: 0;
right: calc(50% - 800px);
}
.skin-banner--floating-item {
position: sticky;
top: 120px;
left: 0;
max-width: 160px;
max-height: 200px;
width: 100%;
height: 100%;
pointer-events: auto;
}
.skin-banner__slider-nav-warp {
position: absolute;
top: 50%;
left: 50%;
width: 1200px;
z-index: 10;
transform: translateX(-50%);
}
.skin-banner__slider-nav-warp :is(.swiper-button-prev, .swiper-button-next) {
--swiper-navigation-size: 50px;
width: 50px;
height: 50px;
padding: unset;
}
.skin-banner__slider-nav-warp .swiper-button-prev {
justify-content: start;
left: var(--swiper-navigation-sides-offset, 0);
}
.skin-banner__slider-nav-warp .swiper-button-next {
justify-content: end;
right: var(--swiper-navigation-sides-offset, 0);
}
.skin-banner__slider-bullet {
--swiper-pagination-bullet-size: 28px;
--swiper-pagination-bullet-width: 28px;
--swiper-pagination-bullet-height: 28px;
--swiper-pagination-bullet-border-radius: 0;
background-color: transparent !important;
background-size: cover !important;
background-repeat: round !important;
cursor: pointer;
margin: 0 4px;
}
.display-product {
position: relative;
}
.display-product__title {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
padding-block-end: 20px;
font-size: 24px;
line-height: 24px;
color: var(--color-base-black);
}
.display-product__title.center {
text-align: center;
margin-bottom: 60px;
}
.display-product__skeleton-title {
width: 200px;
}
.display-product__contents {
position: relative;
margin-block-end: 120px;
overflow: hidden;
}
.display-product__more {
position: absolute;
top: 0;
right: 0;
text-decoration: unset;
color: var(--color-base-black);
}
.display-product__more .ico {
transform: rotate(-90deg);
}
.display-product__more-btn {
width: 248px;
height: 64px;
font-size: 18px;
font-weight: 500;
display: block;
background-color: var(--color-base-white);
border: 1px solid var(--gray300);
margin: 60px auto 120px;
cursor: pointer;
}
.display-product .btn {
min-width: unset;
}
.display-product .thumb-item__info {
padding: 0;
padding-block: 10px;
}
.display-product :where(.thumb-SIMPLE_IMAGE) .thumb-item__info {
padding: 10px;
padding-block: 0;
}
.display-product :is(.swiper-button-prev, .swiper-button-next) {
width: 50px;
height: 50px;
color: var(--color-base-black);
background-color: var(--color-base-white);
top: 50%;
transform: translateY(-100%);
--swiper-navigation-size: 24px;
}
.display-product .swiper-button-prev {
padding: unset;
left: 1px;
right: auto;
}
.display-product .swiper-button-next {
padding: unset;
right: 1px;
left: auto;
}
.product-thumb-brand {
color: var(--gray600);
}
.product-thumb-title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
padding-right: 5px;
padding-top: 1px;
margin-block-end: 4px;
font-weight: 500;
}
:where(.thumb-SIMPLE_IMAGE) .product-thumb-title {
line-height: 1.4;
}
.product-thumb-promotion-text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
margin-block-end: 4px;
font-size: 12px;
color: var(--gray500);
}
.product-thumb-price-info {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
column-gap: 4px;
flex-wrap: wrap;
font-size: 16px;
}
.product-thumb__custom-properties {
display: flex;
align-items: center;
flex-direction: row;
}
.product-thumb__custom-properties-color {
width: 14px;
height: 14px;
margin-right: 2px;
}
.product-thumb__custom-properties-text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
font-size: 12px;
color: var(--gray500);
margin-right: 4px;
}
.product-thumb__stickers {
display: inline-flex;
align-items: center;
justify-content: start;
margin-top: 12px;
gap: 4px;
}
.product-thumb__sticker {
display: inline-block;
margin-block-start: 5px;
width: max-content;
}
.product-thumb__sticker-img {
height: 20px;
width: auto;
}
.product-thumb__immediately-percent {
color: var(--color-point);
font-weight: 700;
}
.product-thumb-price {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
display: inline-block;
vertical-align: top;
font-family: "Montserrat";
font-size: 16px;
font-weight: 700;
font-style: normal;
}
.product-thumb-price--origin {
font-size: 12px;
color: var(--gray500);
text-decoration: line-through;
}
.product-thumb-discount {
color: var(--color-point);
font-weight: 700;
}
.product-thumb-unit {
font-size: 12px;
vertical-align: baseline;
margin-inline-start: -4px;
}
.thumb-fab {
position: absolute;
right: 0;
bottom: 0;
z-index: 5;
display: block;
background-color: unset;
width: auto;
min-width: auto;
padding: unset;
}
.thumb-fab--cart {
width: 40px;
height: 40px;
right: 48px;
bottom: 8px;
}
.thumb-fab--like {
right: 8px;
bottom: 8px;
}
.thumb-fab--like svg {
fill: var(--color-base-white);
}
.thumb-fab--like:where(.is-active) svg {
fill: var(--color-point);
}
.modal__box--alert .btn {
height: 64px;
}
*::-webkit-scrollbar {
width: 14px;
}
*::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--gray300);
border: 4px solid transparent;
border-radius: 8px;
}
*::-webkit-scrollbar-button:start:decrement, *::-webkit-scrollbar-button:end:increment {
display: block;
height: 1px;
width: 1px;
}
.swiper {
max-width: calc(100dvw - 14px);
}
.swiper-button-prev,
.swiper-button-next {
background: unset;
border: unset;
}
html:has([slot=isOpen] .portal) {
padding-right: 14px;
}
html:has([slot=isOpen] .portal) .quick-menu__container {
right: 69px;
}
.member-modification .btn:disabled {
filter: opacity(0.5);
}
.member-modification .password-authentication-form {
display: none;
}
.member-modification .profile-information {
display: block;
}
.member-modification .member-modification {
display: block;
}
.member-modification.unauthentication .password-authentication-form {
display: block;
}
.member-modification.unauthentication .profile-information {
display: none;
}
.member-modification.unauthentication .member-modification {
display: none;
}
/* 회원탈퇴 페이지 스타일 파일입니다. */
.withdrawal-form .password-authentication-form {
display: none;
}
.withdrawal-form .withdrawal-form-wrap {
display: block;
}
.withdrawal-form.unauthentication .password-authentication-form {
display: block;
}
.withdrawal-form.unauthentication .withdrawal-form-wrap {
display: none;
}