14748 lines
288 KiB
CSS
14748 lines
288 KiB
CSS
@charset "UTF-8";
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
|
color: #030507;
|
|
letter-spacing: -0.02em;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*최상단 띠배너가 있으면 여백추가 */
|
|
body:has(.main-section__main-banner):not(:has(.top-banner[style*="display: none;"])) .content-wrap {
|
|
padding-top: 136px;
|
|
}
|
|
|
|
canvas,
|
|
img,
|
|
picture,
|
|
svg,
|
|
video {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
*,
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box;
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
html {
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
p,
|
|
table,
|
|
blockquote,
|
|
address,
|
|
pre,
|
|
iframe,
|
|
form,
|
|
figure,
|
|
dl {
|
|
margin: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 0;
|
|
}
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
border-top-width: 1px;
|
|
margin: 0;
|
|
clear: both;
|
|
color: inherit;
|
|
}
|
|
|
|
pre {
|
|
font-family: monospace, monospace;
|
|
font-size: inherit;
|
|
}
|
|
|
|
address {
|
|
font-style: inherit;
|
|
}
|
|
|
|
a {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
abbr[title] {
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
font-size: inherit;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
svg,
|
|
img,
|
|
embed,
|
|
object,
|
|
iframe {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
vertical-align: middle;
|
|
color: inherit;
|
|
font: inherit;
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
}
|
|
|
|
button,
|
|
[type=button],
|
|
[type=reset],
|
|
[type=submit] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled,
|
|
[type=button]:disabled,
|
|
[type=reset]:disabled,
|
|
[type=submit]:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
:-moz-focusring {
|
|
outline: auto;
|
|
}
|
|
|
|
select:disabled {
|
|
opacity: inherit;
|
|
}
|
|
|
|
option {
|
|
padding: 0;
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
legend {
|
|
padding: 0;
|
|
}
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
[type=number]::-webkit-inner-spin-button,
|
|
[type=number]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type=search] {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
[type=search]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
font: inherit;
|
|
}
|
|
|
|
[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
label[for] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
details {
|
|
display: block;
|
|
}
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
[contenteditable]:focus {
|
|
outline: auto;
|
|
}
|
|
|
|
table {
|
|
border-color: inherit;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
caption {
|
|
text-align: left;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Thin"), url(../fonts/NotoSansKR-Thin.otf) format("opentype");
|
|
font-weight: 100;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Light"), url(../fonts/NotoSansKR-Light.otf) format("opentype");
|
|
font-weight: 300;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Regular"), url(../fonts/NotoSansKR-Regular.otf) format("opentype");
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Medium"), url(../fonts/NotoSansKR-Medium.otf) format("opentype");
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Bold"), url(../fonts/NotoSansKR-Bold.otf) format("opentype");
|
|
font-weight: 700;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans KR";
|
|
src: local("Noto Sans KR Black"), url(../fonts/NotoSansKR-Black.otf) format("opentype");
|
|
font-weight: 900;
|
|
}
|
|
.clearfix::after {
|
|
clear: both;
|
|
content: "";
|
|
display: table;
|
|
}
|
|
|
|
.hide-text {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
text-indent: 101%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.visually-hidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
caption {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.w-full {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 0 18px;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
background-color: #f2f4f6;
|
|
color: #3a3a37;
|
|
letter-spacing: inherit;
|
|
line-height: 1.2;
|
|
}
|
|
.btn.outline {
|
|
background-color: #ffffff !important;
|
|
border-color: #ced4da;
|
|
color: #343a40;
|
|
}
|
|
.btn.outline:active {
|
|
background-color: #fafafa !important;
|
|
}
|
|
.btn.dark {
|
|
background-color: #343a40;
|
|
color: #ffffff;
|
|
}
|
|
.btn.dark:active {
|
|
background-color: #2b3035;
|
|
}
|
|
.btn.gray {
|
|
background-color: #e0e4e5;
|
|
color: #50514f;
|
|
}
|
|
.btn.gray:active {
|
|
background-color: #d8ddde;
|
|
}
|
|
.btn.gray2 {
|
|
background-color: #7e8282;
|
|
color: #ffffff;
|
|
}
|
|
.btn.gray2:active {
|
|
background-color: #767a7a;
|
|
}
|
|
.btn.small {
|
|
height: 32px;
|
|
}
|
|
.btn.xsm {
|
|
height: 28px;
|
|
font-size: 13px;
|
|
min-width: 56px;
|
|
padding: 0 12px;
|
|
}
|
|
.btn.sm {
|
|
height: 36px;
|
|
font-size: 14px;
|
|
min-width: 72px;
|
|
padding: 0 16px;
|
|
}
|
|
.btn.md {
|
|
height: 46px;
|
|
font-size: 16px;
|
|
min-width: 92px;
|
|
padding: 0 24px;
|
|
font-weight: 500;
|
|
}
|
|
.btn.large, .btn.lg {
|
|
min-width: 152px;
|
|
height: 54px;
|
|
padding: 0 42px;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
}
|
|
.btn.xl {
|
|
min-width: 220px;
|
|
height: 60px;
|
|
padding: 0 42px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
.btn.block {
|
|
display: block;
|
|
}
|
|
.btn.full {
|
|
width: 100%;
|
|
}
|
|
.btn:disabled {
|
|
background-color: #dee2e6 !important;
|
|
color: #495057 !important;
|
|
pointer-events: none;
|
|
}
|
|
.btn.disabled {
|
|
background-color: #dee2e6 !important;
|
|
color: #495057 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bottomBtnControls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 40px;
|
|
}
|
|
.bottomBtnControls .btn {
|
|
flex: 1;
|
|
}
|
|
.bottomBtnControls .btn.lg {
|
|
height: 54px;
|
|
}
|
|
.bottomBtnControls--vertical {
|
|
display: block;
|
|
}
|
|
.bottomBtnControls--vertical .btn + .btn {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.textBtns {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.textBtns__btn {
|
|
position: relative;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
padding: 4px 8px;
|
|
}
|
|
.textBtns__btn + .textBtns__btn::before {
|
|
position: absolute;
|
|
content: "|";
|
|
left: -3px;
|
|
top: 3px;
|
|
color: #ced4da;
|
|
}
|
|
.textBtns__btn:active {
|
|
color: #3a3a37;
|
|
}
|
|
|
|
.gift-btn {
|
|
width: 52px;
|
|
height: 52px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 5px;
|
|
color: #979b9d;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
flex-shrink: 0;
|
|
}
|
|
.gift-btn::before {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("../images/icon_gift.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.gift-btn:hover {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.icon {
|
|
font-style: normal;
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
pointer-events: none;
|
|
}
|
|
.icon_textInfo--sm {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_textInfo--sm.png);
|
|
}
|
|
.icon_kakaoLogin {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: url(../images/icon_kakaoLogin.png);
|
|
}
|
|
.icon_naverLogin {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: url(../images/icon_naverLogin.png);
|
|
}
|
|
.icon_myLogout {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: url(../images/icon_myLogout.png);
|
|
}
|
|
.icon_new-post {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_new-post.png);
|
|
}
|
|
.icon_hot-post {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_hot-post.png);
|
|
}
|
|
.icon_image-badge {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_image-badge.png);
|
|
}
|
|
.icon_manual-download {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../images/icon_manual-download.png);
|
|
}
|
|
.icon_question {
|
|
background-image: url(../images/icon_question.png);
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.icon_info {
|
|
background-image: url(../images/icon_info.png);
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.icon_gcpay {
|
|
width: 85px;
|
|
height: 23px;
|
|
background-image: url(../images/logo_gcpay.png);
|
|
}
|
|
.icon_wish {
|
|
background-image: url(../images/icon_wish.png);
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: 0 0;
|
|
}
|
|
.icon_wish.active {
|
|
background-position: -20px 0;
|
|
}
|
|
.icon_share {
|
|
background-image: url(../images/icon_share.png);
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.icon_download {
|
|
background-image: url(../images/icon_download.png);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.icon_sns-kakao {
|
|
background-image: url(../images/icon_sns.png);
|
|
width: 40px;
|
|
height: 40px;
|
|
background-position: 0 0;
|
|
}
|
|
.icon_sns-band {
|
|
background-image: url(../images/icon_sns.png);
|
|
width: 40px;
|
|
height: 40px;
|
|
background-position: -40px 0;
|
|
}
|
|
.icon_sns-instagram {
|
|
background-image: url(../images/icon_sns.png);
|
|
width: 40px;
|
|
height: 40px;
|
|
background-position: -80px 0;
|
|
}
|
|
.icon_lock {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-image: url(../images/icon_lock.png);
|
|
}
|
|
.icon_phone {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_phone.png);
|
|
}
|
|
.icon_comment-user {
|
|
width: 14px;
|
|
height: 14px;
|
|
background-image: url(../images/icon_comment-user.png);
|
|
}
|
|
.icon_reply {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-image: url(../images/icon_reply.png);
|
|
}
|
|
.icon_top-banner-close {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(../images/icon_top-banner-close.png);
|
|
}
|
|
.icon_search-trend {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(../images/icon_search-trend.png);
|
|
}
|
|
|
|
.product-list-type-2cols {
|
|
padding: 0 14px;
|
|
}
|
|
.product-list-type-2cols__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
-moz-column-gap: 12px;
|
|
column-gap: 12px;
|
|
row-gap: 34px;
|
|
}
|
|
.product-list-type-1col__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.product-list-type-1col .product-unit {
|
|
padding: 0 14px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.product-list-type-1col .product-unit::before {
|
|
position: absolute;
|
|
content: "";
|
|
top: -12px;
|
|
width: calc(100% + 28px);
|
|
left: -14px;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
}
|
|
.product-list-type-1col .product-unit-image {
|
|
width: clamp(148px, 36%, 200px);
|
|
aspect-ratio: 1/1;
|
|
flex-shrink: 0;
|
|
}
|
|
.product-list-type-1col .product-unit-info {
|
|
margin-top: 4px;
|
|
}
|
|
.product-list-singleItem {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
|
|
padding: 0 14px;
|
|
padding-bottom: 12px;
|
|
-moz-column-gap: 12px;
|
|
column-gap: 12px;
|
|
row-gap: 48px;
|
|
}
|
|
.product-list-singleItem .product-unit-image {
|
|
aspect-ratio: 3/2;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.product-list-singleItem .product-unit-image a {
|
|
width: 100%;
|
|
background-color: rgba(15, 17, 17, 0.03);
|
|
}
|
|
.product-list-singleItem .product-unit-image img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.product-list-singleItem .time-sale__top .time {
|
|
font-size: 16px;
|
|
}
|
|
.product-list-singleItem .time-sale__top .left {
|
|
font-size: 15px;
|
|
}
|
|
.product-list-singleItem .product-unit:after {
|
|
position: absolute;
|
|
content: "";
|
|
bottom: -33px;
|
|
width: calc(100% + 28px);
|
|
left: -14px;
|
|
height: 10px;
|
|
background-color: #f4f6f8;
|
|
}
|
|
.product-list-singleItem .product-unit:last-of-type:after {
|
|
display: none;
|
|
}
|
|
|
|
.product-unit {
|
|
position: relative;
|
|
}
|
|
|
|
.product-unit-image {
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
}
|
|
.product-unit-image img {
|
|
transition: all 0.25s;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.product-unit-image .sold-out {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
pointer-events: none;
|
|
}
|
|
.product-unit-image .sold-out > span {
|
|
font-size: clamp(22px, 5vw, 28px);
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
.product-unit-image .sold-out ~ .product-unit-addToCart,
|
|
.product-unit-image .sold-out ~ .icon {
|
|
pointer-events: none;
|
|
}
|
|
.product-unit-image:has(.time-sale__top) {
|
|
display: block;
|
|
aspect-ratio: auto !important;
|
|
}
|
|
|
|
.product-unit-info {
|
|
margin-top: 10px;
|
|
}
|
|
.product-unit-info__inner {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.product-badge-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-height: 18px;
|
|
-moz-column-gap: 3px;
|
|
column-gap: 3px;
|
|
row-gap: 4px;
|
|
}
|
|
.product-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
height: 18px;
|
|
padding: 0 8px;
|
|
border-radius: 40px;
|
|
/*background-color: #b1b6b9;*/
|
|
color: #5c7cfa;
|
|
background-color: #fcfdff;
|
|
border: 1px solid #5c7cfa;
|
|
font-weight: 500;
|
|
}
|
|
.product-badge.new {
|
|
color: #40c057;
|
|
background-color: #f8fef9;
|
|
border: 1px solid #40c057;
|
|
}
|
|
.product-badge.best {
|
|
color: #fab005;
|
|
background-color: #fffdf5;
|
|
border: 1px solid #fab005;
|
|
}
|
|
.product-badge.hot {
|
|
color: #ff6b6b;
|
|
background-color: snow;
|
|
border: 1px solid #ff6b6b;
|
|
}
|
|
.product-badge.md-pick {
|
|
color: #5c7cfa;
|
|
background-color: #fcfdff;
|
|
border: 1px solid #5c7cfa;
|
|
}
|
|
.product-badge.hot-deal {
|
|
color: #f06595;
|
|
background-color: #fffafc;
|
|
border: 1px solid #f06595;
|
|
}
|
|
|
|
.product-unit-title {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.035em;
|
|
color: #16191d;
|
|
line-height: 19px;
|
|
}
|
|
.product-unit-title > a {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.product-unit-price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-top: 3px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.product-unit-price__sale {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #e55454;
|
|
text-align: center;
|
|
}
|
|
.product-unit-price__sale > .percent {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
}
|
|
.product-unit-price__price {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.product-unit-price__price > * + * {
|
|
margin-left: 5px;
|
|
}
|
|
.product-unit-price__original {
|
|
font-size: 11px;
|
|
color: #343a40;
|
|
text-decoration: line-through;
|
|
color: #adb5bd;
|
|
line-height: 16px;
|
|
}
|
|
.product-unit-price__current {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.product-unit-price__monthly-payment {
|
|
font-size: 11px;
|
|
color: #495057;
|
|
}
|
|
.product-unit-price > * + * {
|
|
margin-left: 5px;
|
|
}
|
|
.product-unit-price > .product-unit-price__sale + .product-unit-price__price {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.product-unit-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.product-unit-rating__score {
|
|
margin-left: 4px;
|
|
color: #343a40;
|
|
}
|
|
.product-unit-rating__count {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.product-unit-addToCart {
|
|
font-size: 0;
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
|
|
}
|
|
|
|
.productOption {
|
|
padding-bottom: 150px;
|
|
}
|
|
.productOption__title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-bottom: 6px;
|
|
}
|
|
.productOption__bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
box-shadow: 0px -1px 9px 0px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.product-option {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.product-option__description {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.product-option__item {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 12px;
|
|
min-height: 64px;
|
|
cursor: pointer;
|
|
}
|
|
.product-option__item + .product-option__item {
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
.product-option__item .control-label {
|
|
line-height: 1.4;
|
|
}
|
|
.product-option__item .custom-radio input {
|
|
cursor: pointer;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
.product-option__right {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
line-height: 1.3;
|
|
margin-left: 12px;
|
|
}
|
|
.product-option__price {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
}
|
|
.product-option__monthly-payment {
|
|
font-size: 11px;
|
|
color: #495057;
|
|
}
|
|
.product-option__gift {
|
|
font-size: 12px;
|
|
color: #e03131;
|
|
}
|
|
|
|
.product-count {
|
|
background-color: #f9f9f9;
|
|
padding: 12px 20px;
|
|
margin-bottom: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.product-count__amount-top {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding-right: 24px;
|
|
}
|
|
.product-count__amount-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
word-break: keep-all;
|
|
}
|
|
.product-count__amount-delete {
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(" ../images/icon_modal-close.png");
|
|
opacity: 0.75;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
top: 4px;
|
|
right: 2px;
|
|
}
|
|
.product-count__amount-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.product-count__amount-counter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border: 1px solid #e9ecef;
|
|
min-width: 92px;
|
|
height: 32px;
|
|
border-radius: 100px;
|
|
padding: 0 8px;
|
|
}
|
|
.product-count__amount-counter > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.product-count__amount-number {
|
|
font-weight: 500;
|
|
text-align: center;
|
|
min-width: 20px;
|
|
}
|
|
.product-count__amount-btn {
|
|
width: 24px;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
.product-count__amount-btn.plus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"></path></svg>');
|
|
}
|
|
.product-count__amount-btn.minus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"></path></svg>');
|
|
}
|
|
.product-count__amount-price-box > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.product-count__amount-monthly-price {
|
|
font-size: 12px;
|
|
color: #495057;
|
|
}
|
|
.product-count__amount-price {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
}
|
|
|
|
.product-total__container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.product-total__text {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
font-weight: 500;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.product-total__price {
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
}
|
|
.product-total__price > .won {
|
|
position: relative;
|
|
bottom: 0.1em;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.product-btn-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.product-btn-container .btn {
|
|
flex: 1;
|
|
height: 52px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (min-width: 720px) {
|
|
.product-list-singleItem {
|
|
row-gap: 34px;
|
|
}
|
|
.product-list-singleItem .product-unit:after {
|
|
display: none;
|
|
}
|
|
}
|
|
.number-badge {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 2px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 15px;
|
|
padding: 0 4px;
|
|
height: 15px;
|
|
border-radius: 100px;
|
|
background-color: #f03e3e;
|
|
color: #ffffff;
|
|
font-family: Arial;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.infoSection {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.infoSection:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoSection__title {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-bottom: 12px;
|
|
}
|
|
.infoSection__paragraph {
|
|
font-size: 14px;
|
|
color: #50514f;
|
|
margin-bottom: 12px;
|
|
}
|
|
.infoSection__list {
|
|
margin-bottom: 16px;
|
|
}
|
|
.infoSection__list li {
|
|
position: relative;
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
margin-bottom: 6px;
|
|
padding-left: 10px;
|
|
}
|
|
.infoSection__list li::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: #b1b6b9;
|
|
border-radius: 50%;
|
|
top: 9px;
|
|
left: 2px;
|
|
}
|
|
.infoSection__list li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoSection .bottomBtnControls {
|
|
margin-top: 20px;
|
|
}
|
|
.infoSection > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.infoList li {
|
|
position: relative;
|
|
padding-left: 8px;
|
|
color: #666968;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.infoList li::before {
|
|
position: absolute;
|
|
content: "·";
|
|
display: inline-block;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.reviewRating {
|
|
max-width: 360px;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-inline: auto;
|
|
}
|
|
.reviewRating__title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
.reviewRating__inner {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
flex-direction: row-reverse;
|
|
position: relative;
|
|
}
|
|
.reviewRating__inner .rating-0 {
|
|
filter: grayscale(100%);
|
|
}
|
|
.reviewRating__inner > input {
|
|
display: none;
|
|
}
|
|
.reviewRating__inner > label {
|
|
cursor: pointer;
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-top: auto;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 76%;
|
|
}
|
|
.reviewRating__inner > input:checked ~ label,
|
|
.reviewRating__inner > input:checked ~ label ~ label {
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
|
|
}
|
|
.reviewRating__inner > input:not(:checked) ~ label:active,
|
|
.reviewRating__inner > input:not(:checked) ~ label:active ~ label {
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23f0cd2f' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.reviewRadio {
|
|
margin-bottom: 40px;
|
|
}
|
|
.reviewRadio__item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 20px 4px 28px;
|
|
border-top: 1px dashed #dee2e6;
|
|
gap: 8px;
|
|
}
|
|
.reviewRadio__item:last-child {
|
|
border-bottom: 1px dashed #dee2e6;
|
|
}
|
|
.reviewRadio__item .custom-radio-container {
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
-moz-column-gap: 18px;
|
|
column-gap: 18px;
|
|
row-gap: 24px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
.reviewRadio__item .custom-radio-container .custom-radio {
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
width: 100%;
|
|
}
|
|
.reviewRadio__item .custom-radio-container .custom-radio input:checked + label {
|
|
color: #212529;
|
|
}
|
|
.reviewRadio__item .custom-radio-container .custom-radio label {
|
|
width: 100%;
|
|
}
|
|
.reviewRadio__item .b-checkbox-container {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
-moz-column-gap: 8px;
|
|
column-gap: 8px;
|
|
row-gap: 24px;
|
|
}
|
|
.reviewRadio__item .b-checkbox.checkbox {
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
font-size: 16px;
|
|
margin-right: 0;
|
|
}
|
|
.reviewRadio__item .b-checkbox.checkbox input:checked ~ .control-label {
|
|
color: #212529;
|
|
}
|
|
.reviewRadio__item .b-checkbox.checkbox .control-label {
|
|
word-break: break-all;
|
|
}
|
|
.reviewRadio__item .select-box {
|
|
width: 100%;
|
|
}
|
|
.reviewRadio__title {
|
|
flex-shrink: 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-bottom: 20px;
|
|
width: 92px;
|
|
}
|
|
.reviewRadio__inputRow {
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
}
|
|
.reviewRadio__inputRow .input-text {
|
|
margin-bottom: 12px;
|
|
}
|
|
.reviewRadio__inputRow .input-text:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.quick-menu__to-top {
|
|
position: fixed;
|
|
display: inline-block;
|
|
bottom: 70px;
|
|
right: 20px;
|
|
z-index: 10;
|
|
padding-bottom: 10px;
|
|
}
|
|
.quick-menu__to-top button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.quick-menu__to-top button:active {
|
|
filter: brightness(95%);
|
|
}
|
|
|
|
.userText {
|
|
margin-bottom: 32px;
|
|
}
|
|
.userText__title {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.userText__item {
|
|
margin-bottom: 24px;
|
|
}
|
|
.userText__item .select-box {
|
|
height: 50px;
|
|
}
|
|
.userText__item .nice-select {
|
|
height: 50px;
|
|
line-height: 48px;
|
|
}
|
|
.userText__itemTitle {
|
|
display: block;
|
|
color: #212529;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.fileUplaod {
|
|
margin-bottom: 32px;
|
|
}
|
|
.fileUplaod__title {
|
|
display: block;
|
|
color: #212529;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dropzone-wrapper {
|
|
width: 100%;
|
|
padding: 8px 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
.dropzone-wrapper .dropzone {
|
|
padding: 8px;
|
|
}
|
|
.dropzone-wrapper #image-dropzone {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 6px;
|
|
min-width: 116px;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-message {
|
|
margin: 0;
|
|
width: 100%;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #979b9d;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-message::before {
|
|
content: "";
|
|
display: block;
|
|
margin: 16px auto 0;
|
|
width: 52px;
|
|
height: 94px;
|
|
background-image: url(../images/icon_dropzone-add.png);
|
|
background-size: cover;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-preview {
|
|
margin: 8px;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-preview .dz-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 0;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-preview .dz-remove {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
font-size: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-image: url(../images/icon_dropzone-remove.png);
|
|
z-index: 21;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-preview .dz-remove:active {
|
|
opacity: 0.9;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-preview .dz-progress {
|
|
margin-top: 13px;
|
|
}
|
|
.dropzone-wrapper #image-dropzone .dz-default {
|
|
order: 1;
|
|
width: 100px;
|
|
display: block;
|
|
}
|
|
|
|
.reviewStars {
|
|
position: relative;
|
|
width: 116px;
|
|
height: 24px;
|
|
background-color: #e3e3e3;
|
|
}
|
|
.reviewStars__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.reviewStars__num {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
margin-left: 8px;
|
|
line-height: 24px;
|
|
}
|
|
.reviewStars::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: #FFD43B;
|
|
}
|
|
.reviewStars.star-1::before {
|
|
width: 20%;
|
|
}
|
|
.reviewStars.star-2::before {
|
|
width: 40%;
|
|
}
|
|
.reviewStars.star-3::before {
|
|
width: 60%;
|
|
}
|
|
.reviewStars.star-4::before {
|
|
width: 80%;
|
|
}
|
|
.reviewStars.star-5::before {
|
|
width: 100%;
|
|
}
|
|
.reviewStars::after {
|
|
content: "";
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../images/icon_reviewStars.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.reviewStars__wrapper--sm {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars {
|
|
position: relative;
|
|
width: 104px;
|
|
height: 20px;
|
|
background-color: #e3e3e3;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars.star-1::before {
|
|
width: 20%;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars.star-2::before {
|
|
width: 40%;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars.star-3::before {
|
|
width: 60%;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars.star-4::before {
|
|
width: 80%;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars.star-5::before {
|
|
width: 100%;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: #FFD43B;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars::after {
|
|
content: "";
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../images/icon_reviewStars--sm.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.reviewStars__wrapper--sm .reviewStars + .reviewStars__num {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
margin-left: 4px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.inputWithBtn {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.inputWithBtn .btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inputHalf {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.inputHalf .nice-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.inputAddress .input-text {
|
|
margin-bottom: 10px;
|
|
}
|
|
.inputAddress__postalCode {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.phoneAuth {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #f1f3f5;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
.phoneAuth > * {
|
|
margin-bottom: 12px;
|
|
}
|
|
.phoneAuth > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.required-asterisk {
|
|
color: #f03e3e;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.textInfo {
|
|
gap: 6px;
|
|
color: #666968;
|
|
font-size: 13px;
|
|
word-break: keep-all;
|
|
margin-bottom: 8px;
|
|
line-height: 22px;
|
|
}
|
|
.textInfo .icon {
|
|
margin-top: 3px;
|
|
margin-right: 3px;
|
|
vertical-align: top;
|
|
}
|
|
.textInfo em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #252521;
|
|
}
|
|
.textInfo em.blue {
|
|
color: #228be6;
|
|
}
|
|
.textInfo--dot {
|
|
position: relative;
|
|
}
|
|
.textInfo--dot::before {
|
|
content: "·";
|
|
display: inline-block;
|
|
}
|
|
.textInfo:has(.icon) {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
}
|
|
.textInfo:has(.icon) .icon {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.infoText {
|
|
margin-bottom: 20px;
|
|
}
|
|
.infoText:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoText__list {
|
|
margin-bottom: 16px;
|
|
}
|
|
.infoText__list li {
|
|
position: relative;
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
margin-bottom: 4px;
|
|
padding-left: 12px;
|
|
}
|
|
.infoText__list li::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: #b1b6b9;
|
|
border-radius: 50%;
|
|
top: 9px;
|
|
left: 2px;
|
|
}
|
|
.infoText__list li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoText > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.infoBox {
|
|
background-color: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.infoBox:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoBox__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
margin-bottom: 12px;
|
|
}
|
|
.infoBox__paragraph {
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
margin-bottom: 12px;
|
|
}
|
|
.infoBox__list {
|
|
margin-bottom: 16px;
|
|
}
|
|
.infoBox__list li {
|
|
position: relative;
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
margin-bottom: 4px;
|
|
padding-left: 12px;
|
|
}
|
|
.infoBox__list li::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: #b1b6b9;
|
|
border-radius: 50%;
|
|
top: 9px;
|
|
left: 2px;
|
|
}
|
|
.infoBox__list li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoBox > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.infoBox .textInfo {
|
|
color: #50514f;
|
|
}
|
|
.infoBox em {
|
|
font-style: normal;
|
|
color: #f03e3e;
|
|
font-weight: 500;
|
|
}
|
|
.infoBox i {
|
|
font-style: normal;
|
|
color: #3a3a37;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.section-title {
|
|
position: relative;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
display: block;
|
|
color: #0d0f12;
|
|
padding-bottom: 10px;
|
|
}
|
|
.section-title--sm {
|
|
font-size: 16px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.section-title--border {
|
|
border-bottom: 1px solid #495057;
|
|
}
|
|
|
|
.sub-tab__trigger {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 10px 0;
|
|
}
|
|
.sub-tab__trigger::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.sub-tab__btn {
|
|
white-space: nowrap;
|
|
min-height: 36px;
|
|
border-radius: 32px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #979b9d;
|
|
border: 1px solid #ced4da;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
}
|
|
.sub-tab__btn + .sub-tab__btn {
|
|
margin-left: 6px;
|
|
}
|
|
.sub-tab__btn:hover {
|
|
background-color: #fafafa;
|
|
}
|
|
.sub-tab__btn.current {
|
|
color: #ffffff;
|
|
background-color: #343a40;
|
|
border-color: transparent;
|
|
}
|
|
.sub-tab__content {
|
|
display: none;
|
|
}
|
|
.sub-tab__content.current {
|
|
display: block;
|
|
}
|
|
|
|
.dateSearch > * + * {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.fullBtnSection {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
gap: 6px;
|
|
}
|
|
.fullBtnSection:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.fullBtnSection__more {
|
|
position: relative;
|
|
margin-right: 16px;
|
|
}
|
|
.fullBtnSection__more:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -18px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-right: 2px solid #495057;
|
|
border-bottom: 2px solid #495057;
|
|
transform: translateY(calc(-50% - 2px)) rotate(45deg);
|
|
}
|
|
.fullBtnSection .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.topSearchBox {
|
|
position: relative;
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
.topSearchBox .sub-tab__trigger {
|
|
padding-top: 0;
|
|
margin-bottom: 4px;
|
|
}
|
|
.topSearchBox .select-box {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
.topSearchBox .inputWithBtn .input-text {
|
|
font-size: 14px;
|
|
}
|
|
.topSearchBox .inputWithBtn .btn {
|
|
height: 48px;
|
|
}
|
|
|
|
.bottomFixedControls {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
z-index: 10;
|
|
box-shadow: 0 -1px 6px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.bottomFixedControls__inner {
|
|
margin-inline: auto;
|
|
max-width: 720px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
}
|
|
.bottomFixedControls__inner + .bottomFixedControls__inner {
|
|
padding-top: 0;
|
|
}
|
|
.bottomFixedControls .btn {
|
|
flex: 1;
|
|
height: 52px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.bottomFixedControls__totalPrice {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
}
|
|
.bottomFixedControls__totalPrice dt {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
font-weight: 400;
|
|
}
|
|
.bottomFixedControls__totalPrice dd {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
letter-spacing: -0.034em;
|
|
}
|
|
.bottomFixedControls__totalPrice dd > .priceUnit {
|
|
position: relative;
|
|
font-size: 18px;
|
|
margin-left: 2px;
|
|
top: -2px;
|
|
color: #16191d;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.popModal .popModal_content {
|
|
font-family: "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.popModalContent {
|
|
display: none;
|
|
}
|
|
.popModalContent__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
padding-bottom: 16px;
|
|
}
|
|
.popModalContent__inner {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding-right: 12px;
|
|
}
|
|
.popModalContent__inner::-webkit-scrollbar {
|
|
width: 4px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.popModalContent__inner::-webkit-scrollbar-thumb {
|
|
background-color: #b3b3b3;
|
|
}
|
|
.popModalContent__sellerInfo dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.popModalContent__sellerInfo dl dt {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #7e8282;
|
|
width: 90px;
|
|
font-weight: 400;
|
|
}
|
|
.popModalContent__sellerInfo dl dd {
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #3a3a37;
|
|
}
|
|
.popModalContent__discountList dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.popModalContent__discountList dl dt {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #7e8282;
|
|
width: 90px;
|
|
font-weight: 400;
|
|
}
|
|
.popModalContent__discountList dl dd {
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #3a3a37;
|
|
font-weight: 500;
|
|
}
|
|
.popModalContent__sellerPrivacy__item {
|
|
margin-bottom: 10px;
|
|
}
|
|
.popModalContent__sellerPrivacy__item em {
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #50514f;
|
|
font-weight: 500;
|
|
}
|
|
.popModalContent__sellerPrivacy__item p {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
padding-left: 12px;
|
|
font-weight: 300;
|
|
}
|
|
.popModalContent__sellerPrivacy__item table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 4px;
|
|
}
|
|
.popModalContent__sellerPrivacy__item table th,
|
|
.popModalContent__sellerPrivacy__item table td {
|
|
border: 1px solid #e9ecef;
|
|
padding: 8px;
|
|
font-size: 13px;
|
|
}
|
|
.popModalContent__sellerPrivacy__item table td {
|
|
color: #666968;
|
|
}
|
|
.popModalContent__sellerPrivacy__item table th {
|
|
background-color: #f1f3f5;
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
}
|
|
.popModalContent__sellerPrivacy__time {
|
|
border-top: 1px solid #e9ecef;
|
|
padding: 8px 0;
|
|
margin-top: 20px;
|
|
color: #3a3a37;
|
|
}
|
|
.popModalContent__snsShare {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 28px;
|
|
}
|
|
.popModalContent__snsShare__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
}
|
|
.popModalContent__snsShare__item .icon {
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
.popModalContent__reviewBenefit dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.popModalContent__reviewBenefit dl dt {
|
|
flex-shrink: 0;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
color: #0d0f12;
|
|
width: 140px;
|
|
font-weight: 400;
|
|
}
|
|
.popModalContent__reviewBenefit dl dd {
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
color: #666968;
|
|
}
|
|
.popModalContent__reviewBenefit dl dd > em {
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
color: #1c7ed6;
|
|
}
|
|
.popModalContent__reviewBenefit dl:last-of-type {
|
|
margin-bottom: 12px;
|
|
}
|
|
.popModalContent__deliveryFeeInfo {
|
|
min-width: 320px;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item em {
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #50514f;
|
|
font-weight: 500;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item p {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
padding-left: 12px;
|
|
font-weight: 300;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 4px;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item table th,
|
|
.popModalContent__deliveryFeeInfo__item table td {
|
|
border: 1px solid #e9ecef;
|
|
padding: 8px;
|
|
font-size: 13px;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item table td {
|
|
color: #666968;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__item table th {
|
|
background-color: #f1f3f5;
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
}
|
|
.popModalContent__deliveryFeeInfo__controls {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.popModal {
|
|
max-width: 560px !important;
|
|
/* Set your desired width */
|
|
}
|
|
.popModal .close {
|
|
right: 26px !important;
|
|
top: 24px !important;
|
|
}
|
|
|
|
.popModal .popModal_content {
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.infoBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.member-badge {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
height: 23px;
|
|
padding: 0 15px;
|
|
border-radius: 40px;
|
|
background-color: #b1b6b9;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
}
|
|
.member-badge.vip {
|
|
color: #116EBB;
|
|
background-color: #DCF0FF;
|
|
}
|
|
|
|
.categoryTriggerBtn {
|
|
position: relative;
|
|
height: 48px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #030507;
|
|
padding-left: 8px;
|
|
padding-right: 30px;
|
|
}
|
|
.categoryTriggerBtn::after {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-top: -4.5px;
|
|
border-bottom: 2px solid #999;
|
|
border-right: 2px solid #999;
|
|
display: block;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform-origin: 66% 66%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.loadingImg {
|
|
position: fixed;
|
|
width: 52px;
|
|
height: 52px;
|
|
opacity: 0.3;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(-50% - 40px));
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.productDetailInfo__count__additionalSelect {
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.file_attachments {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
.file_attachments__title {
|
|
font-size: 15px;
|
|
color: #343a40;
|
|
font-weight: 700;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.file_attachments_inner {
|
|
background-color: #fafafa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
padding: 4px;
|
|
}
|
|
.file_attachments_inner .file_item {
|
|
display: flex;
|
|
padding: 8px;
|
|
}
|
|
.file_attachments_inner .file_link {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.file_attachments_inner .file_info_area {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.file_attachments_inner .file_title_wrap {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.file_attachments_inner .file_title {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
}
|
|
.file_attachments_inner .file_title .text {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.file_attachments_inner .file_extension {
|
|
margin-right: 6px;
|
|
font-size: 13px;
|
|
flex: 0 0 auto;
|
|
display: inline-block;
|
|
}
|
|
.file_attachments_inner .file_volume {
|
|
font-size: 13px;
|
|
flex: 0 0 auto;
|
|
display: inline-block;
|
|
color: #979b9d;
|
|
}
|
|
.file_attachments_inner .task {
|
|
margin-right: 6px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.file_attachments_inner .task .file_attachments_inner .task [class*=button_] {
|
|
flex: 0 0 auto;
|
|
margin-left: 15px;
|
|
}
|
|
.file_attachments_inner .button_svg_download::before {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M15.75%2011.25V12.15C15.75%2013.4101%2015.75%2014.0402%2015.5048%2014.5215C15.289%2014.9448%2014.9448%2015.289%2014.5215%2015.5048C14.0402%2015.75%2013.4101%2015.75%2012.15%2015.75H5.85C4.58988%2015.75%203.95982%2015.75%203.47852%2015.5048C3.05516%2015.289%202.71095%2014.9448%202.49524%2014.5215C2.25%2014.0402%202.25%2013.4101%202.25%2012.15V11.25M12.75%207.5L9%2011.25M9%2011.25L5.25%207.5M9%2011.25V2.25%22%20stroke%3D%22%23969696%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
|
|
background-repeat: no-repeat;
|
|
content: "";
|
|
}
|
|
|
|
.menu_navigation_wrap .side_menu > li > div {
|
|
position: relative;
|
|
padding: 0 55px 0 20px;
|
|
border-bottom: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > div .depth {
|
|
display: block;
|
|
height: 50px;
|
|
color: #16191d;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 50px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > div .moer {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 5px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: url(../images/ico_arw_direct.png) no-repeat center center/14px;
|
|
background-size: 7px 11px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > div.on .moer {
|
|
background-image: url(../images/ico_arw_direct.png);
|
|
background-size: 7px 11px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul {
|
|
display: none;
|
|
padding: 15px 20px;
|
|
background: #f8f8f8;
|
|
border-bottom: 1px solid #eee;
|
|
line-height: 29px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul.on {
|
|
display: block;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li a {
|
|
display: block;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > div {
|
|
position: relative;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > div a.hasSub {
|
|
height: 30px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > div a.hasSub + a {
|
|
width: 30px;
|
|
height: 30px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: url(../images/ico_arw_direct.png) no-repeat center center/12px;
|
|
display: block;
|
|
background-size: 7px 11px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub + a {
|
|
background: url(../images/ico_arw_direct.png) no-repeat center center/12px;
|
|
background-size: 7px 11px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > ul {
|
|
background: #fff;
|
|
padding-left: 10px;
|
|
display: none;
|
|
border-radius: 4px;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > ul li a {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > ul li a::before {
|
|
content: "-";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.recently_side {
|
|
position: relative;
|
|
border: none;
|
|
}
|
|
.recently_side h1 {
|
|
border-bottom: none;
|
|
background: #fff;
|
|
color: #16191d;
|
|
font-size: 14px;
|
|
text-indent: 20px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
.recently_side a.mitem_goodsview {
|
|
display: block;
|
|
float: none;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 11px;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-position: center;
|
|
border: none;
|
|
background: url(../images/ico_arw_direct.png) no-repeat center center/14px;
|
|
background-size: 7px 11px;
|
|
text-indent: -9999px;
|
|
}
|
|
.recently_side .recentlySide-swiper {
|
|
max-width: 320px;
|
|
padding: 20px;
|
|
}
|
|
.recently_side .recentlySide-swiper .swiper-pagination {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.quick-menu__to-top {
|
|
right: calc(50% - 330px);
|
|
}
|
|
.fullBtnSection {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.sheet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 12;
|
|
visibility: visible;
|
|
transition: opacity 0.5s, visibility 0.5s;
|
|
}
|
|
|
|
.sheet[aria-hidden=true] {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sheet .overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.sheet .contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 16px 16px 0 0;
|
|
background-color: #ffffff;
|
|
overflow-y: hidden;
|
|
--default-transitions: transform 0.5s, border-radius 0.5s;
|
|
transition: var(--default-transitions);
|
|
transform: translateY(0);
|
|
max-width: 720px;
|
|
max-height: 100vh;
|
|
width: 100%;
|
|
height: 30vh;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.sheet .contents:not(.not-selectable) {
|
|
transition: var(--default-transitions), height 0.5s;
|
|
}
|
|
|
|
.sheet[aria-hidden=true] .contents {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.sheet .sheet__controls {
|
|
display: flex;
|
|
}
|
|
|
|
.sheet .draggable-area {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 12px 0 28px;
|
|
cursor: grab;
|
|
}
|
|
|
|
.sheet .draggable-thumb {
|
|
width: 48px;
|
|
height: 4px;
|
|
background-color: #dcdcdc;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.sheet .close-sheet {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: 2px;
|
|
border: none;
|
|
font-size: 22px;
|
|
padding: 10px;
|
|
color: #909090;
|
|
}
|
|
|
|
.sheet .sheet__body {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
gap: 1rem;
|
|
padding: 8px 16px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 체크박스 */
|
|
.b-checkbox.checkbox {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* Box-shadow on hover */
|
|
.b-checkbox.checkbox {
|
|
outline: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.b-checkbox.checkbox:not(.button) {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.b-checkbox.checkbox:not(.button) + .checkbox:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.b-checkbox.checkbox input[type=checkbox] {
|
|
position: absolute;
|
|
left: 0;
|
|
opacity: 0;
|
|
outline: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.b-checkbox.checkbox input[type=checkbox] + .check {
|
|
width: 1.4em;
|
|
height: 1.4em;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
border: 1px solid #ebedef;
|
|
background: #ebedef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
|
|
background-size: 83% 83%;
|
|
background-position: 60% 40%;
|
|
}
|
|
|
|
.b-checkbox.checkbox input[type=checkbox]:checked + .check {
|
|
background: #343a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
|
|
background-size: 83% 83%;
|
|
background-position: 60% 40%;
|
|
border-color: #343a40;
|
|
}
|
|
|
|
.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check,
|
|
.b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check {
|
|
background: #343a40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;
|
|
border-color: #343a40;
|
|
}
|
|
|
|
.b-checkbox.checkbox .control-label {
|
|
padding-left: calc(0.5em - 1px);
|
|
}
|
|
|
|
.b-checkbox.checkbox.button {
|
|
display: flex;
|
|
}
|
|
|
|
.b-checkbox.checkbox[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.b-checkbox.checkbox.is-small {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b-checkbox.checkbox.is-medium {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.b-checkbox.checkbox.is-large {
|
|
font-size: 20px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.b-checkbox-container.vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.b-checkbox-container.vertical .b-checkbox.checkbox:not(.button) {
|
|
margin-right: 0;
|
|
}
|
|
.b-checkbox-container.vertical .b-checkbox + .b-checkbox {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* 라디오 버튼 */
|
|
.custom-radio-container {
|
|
display: flex;
|
|
align-items: center;
|
|
row-gap: 8px;
|
|
-moz-column-gap: 12px;
|
|
column-gap: 12px;
|
|
}
|
|
.custom-radio-container.vertical {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.custom-radio.inner-input {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.custom-radio.no-text label {
|
|
margin-bottom: 6px;
|
|
}
|
|
.custom-radio > input:checked,
|
|
.custom-radio > input:not(:checked) {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
.custom-radio > input:checked + label,
|
|
.custom-radio > input:not(:checked) + label {
|
|
position: relative;
|
|
padding-left: 24px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
.custom-radio > input:checked + label:before,
|
|
.custom-radio > input:not(:checked) + label:before {
|
|
content: "";
|
|
box-sizing: content-box;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 100%;
|
|
background: #fff;
|
|
}
|
|
|
|
.custom-radio > input:checked + label:after,
|
|
.custom-radio > input:not(:checked) + label:after {
|
|
content: "";
|
|
width: 9px;
|
|
height: 9px;
|
|
background: #495057;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 4px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.custom-radio > input:not(:checked) + label:after {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
|
|
.custom-radio > input:checked + label:after {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(-50%);
|
|
}
|
|
|
|
.custom-radio.is-medium label {
|
|
font-size: 16px;
|
|
}
|
|
.custom-radio.is-medium > input:checked + label,
|
|
.custom-radio.is-medium > input:not(:checked) + label {
|
|
padding-left: 28px;
|
|
}
|
|
.custom-radio.is-medium > input:checked + label:before,
|
|
.custom-radio.is-medium > input:not(:checked) + label:before {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.custom-radio.is-medium > input:checked + label:after,
|
|
.custom-radio.is-medium > input:not(:checked) + label:after {
|
|
width: 12px;
|
|
height: 12px;
|
|
left: 5px;
|
|
}
|
|
|
|
/* 셀렉트 */
|
|
.select-box .nice-select {
|
|
height: 48px;
|
|
line-height: 46px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
padding-left: 8px;
|
|
padding-right: 30px;
|
|
font-size: 15px;
|
|
}
|
|
.select-box .nice-select .current {
|
|
display: inline-block;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.select-box .nice-select:focus {
|
|
border-color: #868e96;
|
|
}
|
|
.select-box .nice-select:after {
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-top: -4.5px;
|
|
}
|
|
.select-box .nice-select.short {
|
|
min-width: 60px;
|
|
}
|
|
.select-box .nice-select.short2 {
|
|
min-width: 80px;
|
|
}
|
|
.select-box .nice-select.md {
|
|
min-width: 200px;
|
|
}
|
|
.select-box .nice-select.lg {
|
|
min-width: 320px;
|
|
}
|
|
.select-box .nice-select.full {
|
|
width: 100%;
|
|
}
|
|
.select-box .nice-select .list {
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
min-width: 100%;
|
|
}
|
|
.select-box .nice-select .list::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.select-box .nice-select .list::-webkit-scrollbar-track {
|
|
background: #f3f3f3;
|
|
}
|
|
.select-box .nice-select .list::-webkit-scrollbar-thumb {
|
|
background: #909090;
|
|
border-radius: 6px;
|
|
}
|
|
.select-box .nice-select .list::-webkit-scrollbar-thumb:hover {
|
|
background: #707070;
|
|
}
|
|
.select-box .nice-select .list li.disabled {
|
|
display: none;
|
|
}
|
|
.select-box .nice-select .option {
|
|
padding-left: 8px;
|
|
}
|
|
.select-box .nice-select.above .list {
|
|
top: auto;
|
|
bottom: 100%;
|
|
margin-bottom: 4px;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.nativeSelect {
|
|
position: relative;
|
|
}
|
|
.nativeSelect select {
|
|
display: block;
|
|
height: 48px;
|
|
line-height: 46px;
|
|
border: 1px solid #ced4da;
|
|
background-color: #ffffff;
|
|
border-radius: 4px;
|
|
padding-left: 8px;
|
|
padding-right: 30px;
|
|
font-size: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.nativeSelect select:focus {
|
|
border-color: #868e96;
|
|
}
|
|
.nativeSelect select:after {
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-top: -4.5px;
|
|
}
|
|
.nativeSelect select.short {
|
|
min-width: 60px;
|
|
}
|
|
.nativeSelect select.short2 {
|
|
min-width: 80px;
|
|
}
|
|
.nativeSelect select.md {
|
|
min-width: 200px;
|
|
}
|
|
.nativeSelect select.lg {
|
|
min-width: 320px;
|
|
}
|
|
.nativeSelect select.full {
|
|
width: 100%;
|
|
}
|
|
.nativeSelect:after {
|
|
border-bottom: 2px solid #999;
|
|
border-right: 2px solid #999;
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-top: -5px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform-origin: 66% 66%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.textarea {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
outline: none;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
resize: none;
|
|
scrollbar-width: thin;
|
|
font-size: 16px;
|
|
}
|
|
.textarea:focus {
|
|
border-color: #868e96;
|
|
}
|
|
.textarea:-moz-read-only {
|
|
background-color: #f1f3f5;
|
|
}
|
|
.textarea:disabled, .textarea:read-only {
|
|
background-color: #f1f3f5;
|
|
}
|
|
|
|
/* 텍스트 인풋 */
|
|
.input-text {
|
|
height: 48px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
padding: 0 8px;
|
|
outline: none;
|
|
transition: all 0.2s ease-in-out;
|
|
width: 100%;
|
|
max-width: 172px;
|
|
background-color: #ffffff;
|
|
min-width: 52px;
|
|
font-size: 16px;
|
|
}
|
|
.input-text:focus {
|
|
border-color: #868e96;
|
|
}
|
|
.input-text.sm {
|
|
max-width: 128px;
|
|
}
|
|
.input-text.xsm {
|
|
max-width: 80px;
|
|
}
|
|
.input-text.xxsm {
|
|
max-width: 44px;
|
|
min-width: none;
|
|
}
|
|
.input-text.md {
|
|
max-width: 298px;
|
|
}
|
|
.input-text.lg {
|
|
max-width: 420px;
|
|
}
|
|
.input-text.xl {
|
|
max-width: 600px;
|
|
}
|
|
.input-text:-moz-read-only {
|
|
background-color: #f1f3f5;
|
|
}
|
|
.input-text:disabled, .input-text:read-only {
|
|
background-color: #f1f3f5;
|
|
}
|
|
.input-text.full {
|
|
display: block;
|
|
max-width: none;
|
|
}
|
|
.input-text::-webkit-outer-spin-button, .input-text::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 데이트 피커 */
|
|
.datepicker {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
padding: 0 8px 0 12px;
|
|
height: 44px;
|
|
background-image: url(../images/icon_calendar.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 17px;
|
|
background-position: right 12px center;
|
|
outline: none;
|
|
transition: all 0.2s ease-in-out;
|
|
font-size: 15px;
|
|
}
|
|
.datepicker:focus {
|
|
border-color: #868e96;
|
|
}
|
|
.datepicker:disabled {
|
|
background-color: #f1f3f5;
|
|
color: #868e96;
|
|
}
|
|
|
|
.datepicker-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.datepicker-container input[type=text].datepicker {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.date #ui-datepicker-div {
|
|
z-index: 104 !important;
|
|
}
|
|
|
|
.ui-widget.ui-widget-content {
|
|
border: 1px solid #efefef !important;
|
|
box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.172);
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
margin: 0 20px 0 42px !important;
|
|
}
|
|
|
|
.ui-datepicker-title * {
|
|
font-family: "Noto Sans KR", sans-serif !important;
|
|
}
|
|
|
|
.ui-datepicker-title select {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
background-color: transparent;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.ui-state-default {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.ui-datepicker {
|
|
width: 230px !important;
|
|
padding: 5px !important;
|
|
border-radius: none !important;
|
|
}
|
|
|
|
.ui-datepicker select.ui-datepicker-year {
|
|
width: 25% !important;
|
|
}
|
|
|
|
.ui-datepicker-calendar th {
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
.ui-datepicker th {
|
|
padding: 0.2em 0.3em 0.7em !important;
|
|
}
|
|
|
|
.ui-datepicker-calendar th > span {
|
|
font-family: "Noto Sans KR", sans-serif !important;
|
|
color: #7b7e81;
|
|
}
|
|
|
|
.ui-datepicker-calendar td:nth-child(1) > a {
|
|
color: #ff6464;
|
|
}
|
|
|
|
.ui-datepicker-calendar td:nth-child(7) > a {
|
|
color: #5757ff;
|
|
}
|
|
|
|
.ui-state-highlight,
|
|
.ui-widget-content .ui-state-highlight,
|
|
.ui-widget-header .ui-state-highlight {
|
|
color: #444444 !important;
|
|
font-weight: 700 !important;
|
|
background-color: rgb(240, 240, 240) !important;
|
|
border-radius: 5px !important;
|
|
text-underline-position: under;
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.ui-state-active,
|
|
.ui-widget-content .ui-state-active {
|
|
color: #454545 !important;
|
|
}
|
|
|
|
.ui-datepicker-prev span {
|
|
background-image: url(../images/icon_chevron2.png) !important;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
.ui-datepicker-next span {
|
|
background-image: url(../images/icon_chevron.png) !important;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
.ui-datepicker .ui-datepicker-prev,
|
|
.ui-datepicker .ui-datepicker-next {
|
|
top: 5px !important;
|
|
cursor: pointer;
|
|
border: 1px solid transparent !important;
|
|
}
|
|
|
|
.tilde {
|
|
margin: 0 4px;
|
|
font-size: 15px;
|
|
color: #7e8282;
|
|
}
|
|
|
|
.inputTimer {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
.inputTimer .input-text {
|
|
padding-right: 56px;
|
|
}
|
|
.inputTimer__time {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #228be6;
|
|
font-size: 15px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dateRange-btnContainer {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
.dateRange-btnContainer .dateRange-btn {
|
|
position: relative;
|
|
height: 44px;
|
|
flex: 1;
|
|
border: 1px solid #dee2e6;
|
|
padding: 0 6px;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
color: #868e96;
|
|
font-size: 14px;
|
|
margin-left: -1px;
|
|
}
|
|
.dateRange-btnContainer .dateRange-btn:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
margin-left: 0;
|
|
}
|
|
.dateRange-btnContainer .dateRange-btn:last-child {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.dateRange-btnContainer .dateRange-btn.selected {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: #212529;
|
|
font-weight: 500;
|
|
border: 1px solid #495057;
|
|
}
|
|
.dateRange-btnContainer .dateRange-btn:disabled {
|
|
color: #868e96;
|
|
background-color: #f1f3f5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.innerSearch {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f1f3f5;
|
|
border-radius: 24px;
|
|
padding: 4px 16px;
|
|
}
|
|
.innerSearch input[type=search] {
|
|
border: none;
|
|
background-color: transparent;
|
|
outline: none;
|
|
height: 36px;
|
|
flex: 1;
|
|
font-size: 16px;
|
|
}
|
|
.innerSearch input[type=search]::-webkit-search-decoration, .innerSearch input[type=search]::-webkit-search-cancel-button, .innerSearch input[type=search]::-webkit-search-results-button, .innerSearch input[type=search]::-webkit-search-results-decoration {
|
|
display: none;
|
|
}
|
|
.innerSearch .icon_nav-search {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.microModal__overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.microAlert .microModal__container {
|
|
position: relative;
|
|
background-color: #fff;
|
|
width: 300px;
|
|
max-height: 100vh;
|
|
padding: 32px 16px 8px 16px;
|
|
border-radius: 12px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.microAlert .microModal__top {
|
|
text-align: center;
|
|
padding: 0 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.microAlert .microModal__title {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 1.25;
|
|
color: #16191d;
|
|
box-sizing: border-box;
|
|
}
|
|
.microAlert .microModal__close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: transparent;
|
|
border: 0;
|
|
font-size: 22px;
|
|
color: #50514f;
|
|
padding: 8px;
|
|
}
|
|
.microAlert .microModal__top .microModal__close:before {
|
|
content: "✕";
|
|
}
|
|
.microAlert .microModal__content {
|
|
font-size: 14px;
|
|
padding: 0 4px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.5;
|
|
color: #7e8282;
|
|
text-align: center;
|
|
}
|
|
.microAlert .microModal__btnContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.microAlert .microModal__btn {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
color: #666968;
|
|
border-radius: 4px;
|
|
border-style: none;
|
|
border-width: 0;
|
|
cursor: pointer;
|
|
-webkit-appearance: button;
|
|
text-transform: none;
|
|
overflow: visible;
|
|
line-height: 1.15;
|
|
min-height: 44px;
|
|
margin: 0;
|
|
will-change: transform;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
backface-visibility: hidden;
|
|
transform: translateZ(0);
|
|
transition: transform 0.25s ease-out;
|
|
}
|
|
.microAlert .microModal__btn:active {
|
|
transform: scale(1.05);
|
|
}
|
|
.microAlert .microModal__btn-primary {
|
|
color: #1971c2;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.microFullScreen .microModal__container,
|
|
.microFullMenu .microModal__container {
|
|
position: fixed;
|
|
background-color: #fff;
|
|
max-width: 720px;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
margin-inline: auto;
|
|
box-sizing: border-box;
|
|
z-index: 1000;
|
|
}
|
|
.microFullScreen .microModal__body,
|
|
.microFullMenu .microModal__body {
|
|
height: 100%;
|
|
}
|
|
.microFullScreen .microModal__top,
|
|
.microFullMenu .microModal__top {
|
|
z-index: 9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
height: 48px;
|
|
top: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-bottom: 1px solid #EDEDED;
|
|
}
|
|
.microFullScreen .microModal__title,
|
|
.microFullMenu .microModal__title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
}
|
|
.microFullScreen .microModal__content,
|
|
.microFullMenu .microModal__content {
|
|
overflow-y: auto;
|
|
position: relative;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #7e8282;
|
|
height: calc(100% - 48px);
|
|
color: #030507;
|
|
}
|
|
.microFullScreen .microModal__inner,
|
|
.microFullMenu .microModal__inner {
|
|
padding: 16px;
|
|
}
|
|
.microFullScreen .microModal__close,
|
|
.microFullMenu .microModal__close {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
width: 32px;
|
|
height: 32px;
|
|
top: 8px;
|
|
right: 10px;
|
|
color: #16191d;
|
|
}
|
|
.microFullScreen .microModal__close::after,
|
|
.microFullMenu .microModal__close::after {
|
|
content: "";
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url("../images/icon_modal-close.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.microFullScreen.myReviewImagePop .microModal__top,
|
|
.microFullMenu.myReviewImagePop .microModal__top {
|
|
background-color: #000000;
|
|
border-bottom: none;
|
|
}
|
|
.microFullScreen.myReviewImagePop .microModal__close::after,
|
|
.microFullMenu.myReviewImagePop .microModal__close::after {
|
|
background-position: -18px 0;
|
|
}
|
|
.microBottomSheet .microModal__container {
|
|
position: fixed;
|
|
background-color: #fff;
|
|
max-width: 720px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
margin-inline: auto;
|
|
box-sizing: border-box;
|
|
z-index: 1000;
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
.microBottomSheet .microModal__body {
|
|
height: 100%;
|
|
}
|
|
.microBottomSheet .microModal__top {
|
|
z-index: 9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
height: 40px;
|
|
top: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
.microBottomSheet .microModal__content {
|
|
overflow-y: auto;
|
|
position: relative;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #7e8282;
|
|
padding: 8px 16px 20px;
|
|
color: #030507;
|
|
min-height: 30vh;
|
|
min-height: 30svh;
|
|
max-height: 60vh;
|
|
max-height: 60svh;
|
|
}
|
|
.microBottomSheet .microModal__content:has(.product-option) {
|
|
max-height: 80vh;
|
|
max-height: 80svh;
|
|
}
|
|
.microBottomSheet .microModal__close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.microBottomSheet .microModal__close::after {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
height: 10px;
|
|
background-image: url("../images/icon_bottom-chevron.png");
|
|
background-size: cover;
|
|
}
|
|
.microBottomSheet.myReviewImagePop .microModal__top {
|
|
background-color: #000000;
|
|
border-bottom: none;
|
|
}
|
|
.microBottomSheet.myReviewImagePop .microModal__close {
|
|
background-position: -18px 0;
|
|
}
|
|
|
|
.microPromotion .microModal__container {
|
|
position: relative;
|
|
background-color: #fff;
|
|
max-width: 400px;
|
|
max-height: 100vh;
|
|
border-radius: 12px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
margin: 0 16px;
|
|
}
|
|
.microPromotion .microModal__close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: transparent;
|
|
border: 0;
|
|
font-size: 22px;
|
|
color: #50514f;
|
|
padding: 8px;
|
|
}
|
|
.microPromotion .microModal__top .microModal__close:before {
|
|
content: "✕";
|
|
}
|
|
.microPromotion .microModal__content {
|
|
font-size: 14px;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
color: #7e8282;
|
|
text-align: center;
|
|
}
|
|
.microPromotion .microModal__btnContainer {
|
|
background-color: #f7f7f7;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.microPromotion .microModal__btn {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
color: #666968;
|
|
border-radius: 4px;
|
|
border-style: none;
|
|
border-width: 0;
|
|
cursor: pointer;
|
|
-webkit-appearance: button;
|
|
text-transform: none;
|
|
overflow: visible;
|
|
line-height: 1.15;
|
|
min-height: 44px;
|
|
margin: 0;
|
|
will-change: transform;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
backface-visibility: hidden;
|
|
transform: translateZ(0);
|
|
transition: transform 0.25s ease-out;
|
|
}
|
|
.microPromotion .microModal__btn:active {
|
|
transform: scale(1.05);
|
|
}
|
|
.microPromotion .microModal__btn-primary {
|
|
color: #1971c2;
|
|
font-weight: 700;
|
|
}
|
|
.microPromotion__bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 8px;
|
|
}
|
|
.microPromotion__bottom .microModal__btn {
|
|
flex: none;
|
|
padding: 8px 12px 8px 28px;
|
|
}
|
|
|
|
/**************************\
|
|
Demo Animation Style
|
|
\**************************/
|
|
@keyframes mmfadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes mmfadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes mmslideIn {
|
|
from {
|
|
transform: translateY(15%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes mmslideOut {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
transform: translateY(-10%);
|
|
}
|
|
}
|
|
@keyframes mmslideDown {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
transform: translateY(10%);
|
|
}
|
|
}
|
|
@keyframes mmslideLeftIn {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes mmslideLeftOut {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-10%);
|
|
}
|
|
}
|
|
.microAlert,
|
|
.microFullScreen,
|
|
.microBottomSheet,
|
|
.microFullMenu,
|
|
.microPromotion {
|
|
display: none;
|
|
}
|
|
|
|
.microAlert.is-open,
|
|
.microFullScreen.is-open,
|
|
.microBottomSheet.is-open,
|
|
.microFullMenu.is-open,
|
|
.microPromotion.is-open {
|
|
display: block;
|
|
}
|
|
|
|
.microAlert[aria-hidden=false] .microModal__overlay,
|
|
.microFullScreen[aria-hidden=false] .microModal__overlay,
|
|
.microBottomSheet[aria-hidden=false] .microModal__overlay,
|
|
.microPromotion[aria-hidden=false] .microModal__overlay {
|
|
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microAlert[aria-hidden=false] .microModal__container,
|
|
.microFullScreen[aria-hidden=false] .microModal__container,
|
|
.microBottomSheet[aria-hidden=false] .microModal__container,
|
|
.microPromotion[aria-hidden=false] .microModal__container {
|
|
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microAlert[aria-hidden=true] .microModal__overlay,
|
|
.microFullScreen[aria-hidden=true] .microModal__overlay,
|
|
.microBottomSheet[aria-hidden=true] .microModal__overlay,
|
|
.microPromotion[aria-hidden=true] .microModal__overlay {
|
|
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microAlert[aria-hidden=true] .microModal__container,
|
|
.microFullScreen[aria-hidden=true] .microModal__container,
|
|
.microBottomSheet[aria-hidden=true] .microModal__container {
|
|
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microBottomSheet[aria-hidden=true] .microModal__container {
|
|
animation: mmslideDown 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microFullMenu[aria-hidden=false] .microModal__container {
|
|
animation: mmslideLeftIn 0.5s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microFullMenu[aria-hidden=true] .microModal__container {
|
|
animation: mmslideLeftOut 0.5s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microFullMenu[aria-hidden=false] .microModal__overlay {
|
|
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microFullMenu[aria-hidden=true] .microModal__overlay {
|
|
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.microAlert .microModal__container,
|
|
.microAlert .microModal__overlay,
|
|
.microFullScreen .microModal__container,
|
|
.microFullScreen .microModal__overlay,
|
|
.microBottomSheet .microModal__container,
|
|
.microBottomSheet .microModal__overlay,
|
|
.microFullMenu .microModal__container,
|
|
.microFullMenu .microModal__overlay,
|
|
.microPromotion .microModal__container,
|
|
.microPromotion .microModal__overlay {
|
|
will-change: transform;
|
|
}
|
|
|
|
.microAlert .microModal__overlay,
|
|
.microFullScreen .microModal__overlay,
|
|
.microBottomSheet .microModal__overlay,
|
|
.microPromotion .microModal__overlay {
|
|
transform: translate(0, 0.01px);
|
|
}
|
|
|
|
.modalInfo__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-bottom: 8px;
|
|
}
|
|
.modalInfo .table th {
|
|
font-size: 13px;
|
|
}
|
|
.modalInfo .table td {
|
|
font-size: 13px;
|
|
}
|
|
.modalInfo .bottomBtnControls {
|
|
margin-top: 0;
|
|
}
|
|
.modalInfo__deliveryTable th {
|
|
background-color: #ffffff !important;
|
|
font-weight: 400 !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.modalInfo__deliveryTable td {
|
|
color: #7e8282 !important;
|
|
}
|
|
.modalInfo__deliveryTable tr.deliveryCompleted td {
|
|
color: #16191d !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modalSelect__title {
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
padding-bottom: 12px;
|
|
}
|
|
.modalSelect__item {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
padding: 22px 0;
|
|
color: #212529;
|
|
min-height: 60px;
|
|
cursor: pointer;
|
|
}
|
|
.modalSelect__item input {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
.modalSelect__item input:checked + span {
|
|
color: #228be6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.fullscreenBg {
|
|
background-color: #f4f6f8;
|
|
padding-bottom: 100px;
|
|
height: 100%;
|
|
}
|
|
|
|
.microModal__requsetText {
|
|
font-size: 14px;
|
|
color: #030507;
|
|
font-weight: 400;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Colors: Default (blue) */
|
|
.toggle-switchy {
|
|
color: #fff;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:before {
|
|
content: "ON";
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:after {
|
|
content: "OFF";
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle > .switch {
|
|
background: #fff;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle + .label {
|
|
color: #000;
|
|
}
|
|
|
|
.toggle-switchy > input:checked + .toggle {
|
|
background: #3498db;
|
|
}
|
|
|
|
.toggle-switchy > input:not(:checked) + .toggle {
|
|
background: #ccc;
|
|
}
|
|
|
|
.toggle-switchy > input:checked + .toggle > .switch {
|
|
border: 3px solid #3498db;
|
|
}
|
|
|
|
.toggle-switchy > input:not(:checked) + .toggle > .switch {
|
|
border: 3px solid #ccc;
|
|
}
|
|
|
|
/* Rounded switch corners */
|
|
.toggle-switchy > input + .toggle {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle .switch {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* //////////////////////////
|
|
CORE STYLES BELOW - NO TOUCHY
|
|
////////////////////////// */
|
|
.toggle-switchy {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.toggle-switchy:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-switchy > input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle {
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle {
|
|
overflow: hidden;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-switchy > input[disabled] + .toggle {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.toggle-switchy > input[disabled] + .toggle:hover {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle > .switch {
|
|
display: block;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Labels */
|
|
.toggle-switchy > input + .toggle:before,
|
|
.toggle-switchy > input + .toggle:after {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
z-index: 2;
|
|
height: 100%;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:before {
|
|
right: 55%;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:after {
|
|
left: 50%;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle + .label {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.toggle-switchy[data-label=left] > input + .toggle {
|
|
order: 2;
|
|
}
|
|
|
|
.toggle-switchy[data-label=left] > input + .toggle + .label {
|
|
order: 1;
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Show / Hide */
|
|
.toggle-switchy > input + .toggle:before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.toggle-switchy > input:checked + .toggle:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.toggle-switchy > input:checked + .toggle:after {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Transitions */
|
|
.toggle-switchy > input + .toggle {
|
|
transition: background 200ms ease-in-out;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:before,
|
|
.toggle-switchy > input + .toggle:after {
|
|
transition: all 200ms ease-in-out;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle > .switch {
|
|
transition: right 200ms ease-in-out, border-color 200ms ease-in-out;
|
|
}
|
|
|
|
/* //////////////////////////
|
|
CORE STYLES ABOVE - NO TOUCHY
|
|
////////////////////////// */
|
|
/* Size: Extra Large */
|
|
.toggle-switchy[data-size=xl] > input + .toggle {
|
|
width: 85px;
|
|
height: 40px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xl] > input + .toggle > .switch {
|
|
width: 40px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xl] > input + .toggle:before,
|
|
.toggle-switchy[data-size=xl] > input + .toggle:after {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xl] > input:not(:checked) + .toggle > .switch {
|
|
right: calc(100% - 40px);
|
|
}
|
|
|
|
/* Size: Large */
|
|
.toggle-switchy[data-size=lg] > input + .toggle {
|
|
width: 75px;
|
|
height: 35px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=lg] > input + .toggle > .switch {
|
|
width: 35px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=lg] > input + .toggle:before,
|
|
.toggle-switchy[data-size=lg] > input + .toggle:after {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.toggle-switchy[data-size=lg] > input:not(:checked) + .toggle > .switch {
|
|
right: calc(100% - 35px);
|
|
}
|
|
|
|
/* Size: Default (Medium) */
|
|
.toggle-switchy > input + .toggle {
|
|
width: 65px;
|
|
height: 30px;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle > .switch {
|
|
width: 30px;
|
|
}
|
|
|
|
.toggle-switchy > input + .toggle:before,
|
|
.toggle-switchy > input + .toggle:after {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.toggle-switchy > input:not(:checked) + .toggle > .switch {
|
|
right: calc(100% - 30px);
|
|
}
|
|
|
|
/* Size: Small */
|
|
.toggle-switchy[data-size=sm] > input + .toggle {
|
|
width: 55px;
|
|
height: 25px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=sm] > input + .toggle > .switch {
|
|
width: 25px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=sm] > input + .toggle:before,
|
|
.toggle-switchy[data-size=sm] > input + .toggle:after {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.toggle-switchy[data-size=sm] > input:not(:checked) + .toggle > .switch {
|
|
right: calc(100% - 25px);
|
|
}
|
|
|
|
/* Size: Extra Small */
|
|
.toggle-switchy[data-size=xs] > input + .toggle {
|
|
width: 45px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xs] > input + .toggle > .switch {
|
|
width: 20px;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xs] > input + .toggle:before,
|
|
.toggle-switchy[data-size=xs] > input + .toggle:after {
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
.toggle-switchy[data-size=xs] > input:not(:checked) + .toggle > .switch {
|
|
right: calc(100% - 20px);
|
|
}
|
|
|
|
/* Style: Rounded */
|
|
.toggle-switchy[data-style=rounded] > input + .toggle,
|
|
.toggle-switchy[data-style=rounded] > input + .toggle > .switch {
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.toggle-switchy[data-style=rounded] > input + .toggle:before {
|
|
right: 50%;
|
|
}
|
|
|
|
.toggle-switchy[data-style=rounded] > input + .toggle:after {
|
|
left: 50%;
|
|
}
|
|
|
|
/* Style: Square */
|
|
.toggle-switchy[data-style=square] > input + .toggle {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.toggle-switchy[data-style=square] > input + .toggle .switch {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Text: Off */
|
|
.toggle-switchy[data-text=false] > input + .toggle:before,
|
|
.toggle-switchy[data-text=false] > input + .toggle:after {
|
|
content: "";
|
|
}
|
|
|
|
.toggle-switchy[data-text=false][data-size=xl] > input + .toggle {
|
|
width: 80px;
|
|
}
|
|
|
|
.toggle-switchy[data-text=false][data-size=lg] > input + .toggle {
|
|
width: 70px;
|
|
}
|
|
|
|
.toggle-switchy[data-text=false] > input + .toggle {
|
|
width: 60px;
|
|
}
|
|
|
|
.toggle-switchy[data-text=false][data-size=sm] > input + .toggle {
|
|
width: 50px;
|
|
}
|
|
|
|
.toggle-switchy[data-text=false][data-size=xs] > input + .toggle {
|
|
width: 40px;
|
|
}
|
|
|
|
/* Color: Red */
|
|
.toggle-switchy[data-color=red] > input:checked + .toggle {
|
|
background: #e74c3c;
|
|
}
|
|
|
|
.toggle-switchy[data-color=red] > input:checked + .toggle > .switch {
|
|
border-color: #e74c3c;
|
|
}
|
|
|
|
/* Color: Orange */
|
|
.toggle-switchy[data-color=orange] > input:checked + .toggle {
|
|
background: #e67e22;
|
|
}
|
|
|
|
.toggle-switchy[data-color=orange] > input:checked + .toggle > .switch {
|
|
border-color: #e67e22;
|
|
}
|
|
|
|
/* Color: Yellow */
|
|
.toggle-switchy[data-color=yellow] > input:checked + .toggle {
|
|
background: #f1c40f;
|
|
}
|
|
|
|
.toggle-switchy[data-color=yellow] > input:checked + .toggle > .switch {
|
|
border-color: #f1c40f;
|
|
}
|
|
|
|
/* Color: Green */
|
|
.toggle-switchy[data-color=green] > input:checked + .toggle {
|
|
background: #2ecc71;
|
|
}
|
|
|
|
.toggle-switchy[data-color=green] > input:checked + .toggle > .switch {
|
|
border-color: #2ecc71;
|
|
}
|
|
|
|
/* Color: Blue */
|
|
.toggle-switchy[data-color=blue] > input:checked + .toggle {
|
|
background: #3498db;
|
|
}
|
|
|
|
.toggle-switchy[data-color=blue] > input:checked + .toggle > .switch {
|
|
border-color: #3498db;
|
|
}
|
|
|
|
/* Color: Purple */
|
|
.toggle-switchy[data-color=purple] > input:checked + .toggle {
|
|
background: #9b59b6;
|
|
}
|
|
|
|
.toggle-switchy[data-color=purple] > input:checked + .toggle > .switch {
|
|
border-color: #9b59b6;
|
|
}
|
|
|
|
/* Color: Gray */
|
|
.toggle-switchy[data-color=gray] > input:checked + .toggle {
|
|
background: #555;
|
|
}
|
|
|
|
.toggle-switchy[data-color=gray] > input:checked + .toggle > .switch {
|
|
border-color: #555;
|
|
}
|
|
|
|
.table-wrapper {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
box-shadow: 0px -1px 0px 0px #ced4da;
|
|
}
|
|
.table tr {
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.table tr.checked td {
|
|
background-color: #f5fbff;
|
|
}
|
|
.table tr.fixed-notice td {
|
|
background-color: #fafafa;
|
|
}
|
|
.table tr.fixed-notice td .icon_notice-fixed {
|
|
vertical-align: top;
|
|
margin-top: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.table th {
|
|
vertical-align: middle;
|
|
padding: 10px 10px;
|
|
font-weight: 500;
|
|
color: #50514f;
|
|
background-color: #f8f9fa;
|
|
height: 40px;
|
|
word-break: keep-all;
|
|
font-size: 14px;
|
|
}
|
|
.table td {
|
|
vertical-align: middle;
|
|
padding: 10px 10px;
|
|
height: 40px;
|
|
background-color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
.table td .td-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
-moz-column-gap: 5px;
|
|
column-gap: 5px;
|
|
row-gap: 8px;
|
|
}
|
|
.table td .td-inner.vertical {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.table td > img {
|
|
display: inline-block;
|
|
}
|
|
.table.vertical th,
|
|
.table.vertical td {
|
|
text-align: center;
|
|
}
|
|
.table.vertical th.left,
|
|
.table.vertical td.left {
|
|
text-align: left;
|
|
}
|
|
.table.vertical th.right,
|
|
.table.vertical td.right {
|
|
text-align: right;
|
|
}
|
|
.table.vertical th,
|
|
.table.vertical td {
|
|
padding: 10px 5px;
|
|
}
|
|
.table.tight th,
|
|
.table.tight td {
|
|
font-size: 13px;
|
|
height: 36px;
|
|
padding: 8px 5px;
|
|
}
|
|
.table.transparent {
|
|
border-top: none;
|
|
}
|
|
.table.transparent tr {
|
|
border-bottom: none;
|
|
}
|
|
.table.transparent th {
|
|
background-color: transparent;
|
|
}
|
|
.table.transparent td {
|
|
background-color: transparent;
|
|
}
|
|
.table.thTransparent th {
|
|
background-color: transparent;
|
|
}
|
|
.table .tr-foldable {
|
|
visibility: collapse;
|
|
}
|
|
.table .tr-foldable-trigger {
|
|
cursor: pointer;
|
|
}
|
|
.table .tr-foldable__content {
|
|
padding: 26px 32px;
|
|
text-align: left;
|
|
}
|
|
.table .tr-foldable > td {
|
|
background-color: #fafafa;
|
|
padding: 0;
|
|
}
|
|
.table .tr-foldable.active {
|
|
visibility: visible;
|
|
}
|
|
.table .tr-foldable__qna {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 48px;
|
|
line-height: 1.4;
|
|
}
|
|
.table .tr-foldable__qna::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -24px;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
}
|
|
.table .tr-foldable__qna .icon {
|
|
flex-shrink: 0;
|
|
}
|
|
.table .tr-foldable__qna-content {
|
|
margin-left: 8px;
|
|
word-break: break-all;
|
|
margin-top: -2px;
|
|
color: #16191d;
|
|
font-size: 15px;
|
|
}
|
|
.table .tr-foldable__qna-title {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
color: #030507;
|
|
}
|
|
.table .tr-foldable__btn-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.table .tr-foldable__btn-container > * + * {
|
|
margin-left: 8px;
|
|
}
|
|
.table__no-result {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 72px 0 84px;
|
|
}
|
|
.table__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
|
|
table:has(.select-box) {
|
|
table-layout: fixed;
|
|
}
|
|
table:has(.select-box) .td-inner {
|
|
width: 100%;
|
|
}
|
|
table:has(.select-box) .td-inner .select-box {
|
|
width: 100%;
|
|
}
|
|
table:has(.select-box) .select-box .nice-select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
table:has(.select-box) .select-box .nice-select .list {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
table:has(.select-box) .nice-select .option {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
:root {
|
|
--swiper-pagination-color: var(--swiper-theme-color);
|
|
--swiper-pagination-bullet-size: 10px;
|
|
--swiper-pagination-bullet-width: 10px;
|
|
--swiper-pagination-bullet-height: 10px;
|
|
--swiper-pagination-bullet-inactive-color: #000;
|
|
--swiper-pagination-bullet-inactive-opacity: 0.2;
|
|
--swiper-pagination-bullet-opacity: 1;
|
|
--swiper-pagination-bullet-horizontal-gap: 8px;
|
|
--swiper-pagination-bullet-vertical-gap: 6px;
|
|
--swiper-scrollbar-sides-offset: 14px ;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
background-color: #f4f6f8;
|
|
}
|
|
|
|
.screen-wrap.is-fixed {
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.content-wrap {
|
|
position: relative;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
padding-top: 96px;
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
.main {
|
|
background-color: #f4f6f8;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
.header__wrapper {
|
|
height: 100%;
|
|
}
|
|
.header__controls {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 48px;
|
|
padding: 0 6px;
|
|
gap: 8px;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
}
|
|
.header__controls-wrapper {
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.header__controls::before, .header__controls::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 48px;
|
|
width: 16px;
|
|
height: calc(100% + 16px);
|
|
background-color: #f4f6f8;
|
|
}
|
|
.header__controls::before {
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
.header__controls::after {
|
|
left: auto;
|
|
right: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
.header__btn-container {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
.header__btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
padding: 8px;
|
|
}
|
|
.header__home-link {
|
|
padding: 4px;
|
|
margin-left: 6px;
|
|
}
|
|
.header.scroll {
|
|
transform: translateY(-48px);
|
|
}
|
|
.header:not(:has(.top-banner[style*="display: none;"])).scroll {
|
|
transform: translateY(-88px);
|
|
}
|
|
.header__title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
}
|
|
.header__toBack__btn {
|
|
padding: 8px;
|
|
}
|
|
.header--sub ~ .content-wrap {
|
|
padding-top: 48px;
|
|
}
|
|
.header--sub:has(.headerTab) ~ .content-wrap {
|
|
padding-top: 96px;
|
|
}
|
|
.header--sub::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 48px;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #ededed;
|
|
z-index: 2;
|
|
}
|
|
.header--sub:has(.headerTab)::before {
|
|
display: none;
|
|
}
|
|
.header__category {
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
z-index: 2;
|
|
display: none;
|
|
border-radius: 0 0 10px 10px;
|
|
}
|
|
.header__category.opened {
|
|
display: block;
|
|
}
|
|
.header__category__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 12px;
|
|
gap: 4px;
|
|
}
|
|
.header__category__list li a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #16191d;
|
|
padding: 0 12px 0 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.header__category__list li.active a {
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
background-color: #f8fafb;
|
|
}
|
|
.header__selectTitle {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
gap: 8px;
|
|
padding-right: 24px;
|
|
}
|
|
.header__selectTitle::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-top: 2px solid #495057;
|
|
border-right: 2px solid #495057;
|
|
transform: translateY(calc(-50% - 2px)) rotate(135deg);
|
|
}
|
|
.header__selectTitle.opened::after {
|
|
transform: translateY(calc(-50% + 4px)) rotate(-45deg);
|
|
}
|
|
.header.categoryDimmed {
|
|
z-index: 1001;
|
|
}
|
|
.header.categoryDimmed .header__controls::before, .header.categoryDimmed .header__controls::after {
|
|
display: none;
|
|
}
|
|
|
|
.home-category {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
padding-left: 2px;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
|
|
overflow: hidden;
|
|
}
|
|
.home-category__list {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 48px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
.home-category__list::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 32px;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
|
}
|
|
.home-category__list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.home-category__item {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 48px;
|
|
}
|
|
.home-category__item a {
|
|
font-size: 16px;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
word-break: keep-all;
|
|
padding: 0 14px 0;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
.home-category__item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
display: block;
|
|
width: calc(100% - 28px);
|
|
height: 3px;
|
|
background-color: #343a40;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.headerTab {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
overflow: hidden;
|
|
}
|
|
.headerTab__list {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 48px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.headerTab__list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.headerTab__item {
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 48px;
|
|
}
|
|
.headerTab__item::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #dee2e6;
|
|
}
|
|
.headerTab__item a {
|
|
font-size: 15px;
|
|
display: block;
|
|
font-weight: 700;
|
|
color: #979b9d;
|
|
word-break: keep-all;
|
|
padding: 0 24px 0;
|
|
}
|
|
.headerTab__item.active a {
|
|
color: #16191d;
|
|
}
|
|
.headerTab__item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 1px;
|
|
display: block;
|
|
width: calc(100% - 48px);
|
|
max-width: 210px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 3px;
|
|
background-color: #212529;
|
|
}
|
|
|
|
.headerCategoryDim {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.header-search-pop__auto-complete {
|
|
position: absolute;
|
|
display: none;
|
|
overflow-y: auto;
|
|
top: 65px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
z-index: 1;
|
|
}
|
|
.header-search-pop__auto-complete.active {
|
|
display: block;
|
|
}
|
|
.header-search-pop__auto-complete > ul {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 65px);
|
|
height: calc(100svh - 65px);
|
|
padding: 4px 0;
|
|
}
|
|
.header-search-pop__auto-complete > ul > li a {
|
|
display: block;
|
|
font-size: 15px;
|
|
padding: 6px 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.header-search-pop__auto-complete > ul > li a:hover {
|
|
text-decoration: underline;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.header-search-pop__auto-complete > ul > li + li {
|
|
margin-top: 3px;
|
|
}
|
|
.header-search-pop__auto-complete em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
.header-search-pop__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
flex-shrink: 0;
|
|
height: 34px;
|
|
border-top: 1px solid #f1f3f5;
|
|
}
|
|
.header-search-pop__close {
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.header-search-pop__close > span {
|
|
color: #50514f;
|
|
}
|
|
.header-search-pop__close:hover > span {
|
|
color: #252521;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.fullMenu {
|
|
background-color: #f4f6f8;
|
|
}
|
|
.fullMenu__top {
|
|
display: flex;
|
|
padding: 12px 16px;
|
|
gap: 8px;
|
|
background-color: #ffffff;
|
|
}
|
|
.fullMenu__top > .btn {
|
|
flex: 1;
|
|
}
|
|
.fullMenu__top .member-rank-summary {
|
|
width: 100%;
|
|
}
|
|
.fullMenu__top .member-rank-summary .textBtns {
|
|
justify-content: flex-end;
|
|
}
|
|
.fullMenu__top .member-rank-summary__top {
|
|
padding: 12px 0;
|
|
}
|
|
.fullMenu .product-tab {
|
|
margin-bottom: 0;
|
|
background-color: #ffffff;
|
|
}
|
|
.fullMenu .product-tab__btn {
|
|
font-size: 16px;
|
|
height: 50px;
|
|
}
|
|
.fullMenu__content {
|
|
display: none;
|
|
align-items: flex-start;
|
|
height: calc(100vh - 165px);
|
|
height: calc(100svh - 165px);
|
|
overflow-y: hidden;
|
|
}
|
|
.fullMenu__content.active {
|
|
display: flex;
|
|
}
|
|
.fullMenu__content:has(.fullMenu__menu--noSub) {
|
|
height: auto;
|
|
}
|
|
.fullMenu__menu {
|
|
width: 128px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
scrollbar-width: none;
|
|
}
|
|
.fullMenu__menu::-webkit-scrollbar {
|
|
display: none;
|
|
width: 4px;
|
|
}
|
|
.fullMenu__menu::-webkit-scrollbar-thumb {
|
|
background-color: #a3a3a3;
|
|
border-radius: 6px;
|
|
}
|
|
.fullMenu__menu:hover::-webkit-scrollbar {
|
|
display: block;
|
|
}
|
|
.fullMenu__menu__btn {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
background-color: #f4f4f4;
|
|
color: #6B6B6B;
|
|
padding: 12px 10px 12px 14px;
|
|
border-bottom: 1px solid #eeeeee;
|
|
border-right: 1px solid #eeeeee;
|
|
}
|
|
.fullMenu__menu__btn.current {
|
|
background-color: #ffffff;
|
|
color: #16191d;
|
|
font-weight: 700;
|
|
border-color: #ffffff;
|
|
}
|
|
.fullMenu__menu--noSub {
|
|
width: auto;
|
|
flex-grow: 1;
|
|
}
|
|
.fullMenu__menu--noSub .fullMenu__menu__btn {
|
|
background-color: #ffffff;
|
|
font-weight: 400;
|
|
color: #16191d;
|
|
}
|
|
.fullMenu__rightSection {
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
}
|
|
.fullMenu__rightSection::-webkit-scrollbar {
|
|
display: none;
|
|
width: 4px;
|
|
}
|
|
.fullMenu__rightSection::-webkit-scrollbar-thumb {
|
|
background-color: #a3a3a3;
|
|
border-radius: 6px;
|
|
}
|
|
.fullMenu__rightSection:hover::-webkit-scrollbar {
|
|
display: block;
|
|
}
|
|
.fullMenu__itemSection {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
.fullMenu__sectionTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
padding: 6px 4px;
|
|
}
|
|
.fullMenu__sectionTitle::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
}
|
|
.fullMenu__itemList li a {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
padding: 0 4px;
|
|
}
|
|
.fullMenu .mainNotice__customerContact {
|
|
border: none;
|
|
}
|
|
.fullMenu__miscLinks {
|
|
padding: 16px;
|
|
}
|
|
.fullMenu__miscLinks__title {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #979b9d;
|
|
margin-bottom: 8px;
|
|
}
|
|
.fullMenu__miscLinks__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.fullMenu__miscLinks__link {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.header-trend {
|
|
flex: 1;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0 4px;
|
|
height: 36px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
overflow: hidden;
|
|
}
|
|
.header-trend__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background-color: #ffffff;
|
|
padding: 12px 14px 10px;
|
|
}
|
|
.header-trend__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-trend {
|
|
width: 100%;
|
|
}
|
|
.search-trend a {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.search-trend ul {
|
|
width: 100%;
|
|
}
|
|
.search-trend__number {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
.search-trend__text {
|
|
display: inline-block;
|
|
line-height: 16px;
|
|
height: 16px;
|
|
margin-left: 4px;
|
|
color: #16191d;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-right: auto;
|
|
}
|
|
.search-trend .icon {
|
|
margin-left: 4px;
|
|
margin-top: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.top-banner {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
}
|
|
.top-banner__btn-container {
|
|
position: absolute;
|
|
max-width: 720px;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.top-banner__close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 32px;
|
|
pointer-events: auto;
|
|
opacity: 0.85;
|
|
}
|
|
.top-banner__close:before, .top-banner__close::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 18px;
|
|
height: 1px;
|
|
background-color: #ffffff;
|
|
}
|
|
.top-banner__close:before {
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
}
|
|
.top-banner__close::after {
|
|
right: 50%;
|
|
transform: translateX(50%) translateY(-50%) rotate(-45deg);
|
|
}
|
|
|
|
.top-banner-swiper {
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
}
|
|
.top-banner-swiper .top-banner__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.footer {
|
|
padding: 16px 0;
|
|
}
|
|
.footer__first {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
word-break: keep-all;
|
|
-moz-column-gap: 4px;
|
|
column-gap: 4px;
|
|
row-gap: 2px;
|
|
}
|
|
.footer__first li {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.footer__first li a {
|
|
display: block;
|
|
font-size: 13px;
|
|
padding: 4px 14px;
|
|
color: #495057;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
.footer__first li::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 12px;
|
|
right: -2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: #ced4da;
|
|
}
|
|
.footer__first li:last-child::after {
|
|
display: none;
|
|
}
|
|
.footer__second {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
padding: 0 14px;
|
|
}
|
|
.footer__second__detailBtn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 32px;
|
|
font-size: 14px;
|
|
color: #212529;
|
|
padding-right: 12px;
|
|
}
|
|
.footer__second__detailBtn::after {
|
|
position: absolute;
|
|
content: "";
|
|
right: 0;
|
|
top: 50%;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 1px solid transparent;
|
|
border-bottom-color: #868e96;
|
|
border-right-color: #868e96;
|
|
transform: rotate(45deg) translateY(calc(-50% - 6px));
|
|
}
|
|
.footer__third {
|
|
margin-bottom: 10px;
|
|
word-break: keep-all;
|
|
line-height: 1.35;
|
|
padding: 0 14px;
|
|
}
|
|
.footer__third li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 2px;
|
|
}
|
|
.footer__third__th {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #495057;
|
|
font-size: 13px;
|
|
}
|
|
.footer__third__th::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 11px;
|
|
margin: 0 8px;
|
|
background-color: #ced4da;
|
|
}
|
|
.footer__third__td {
|
|
color: #495057;
|
|
font-size: 13px;
|
|
margin-right: 8px;
|
|
}
|
|
.footer__logo {
|
|
margin-bottom: 10px;
|
|
padding: 8px 14px;
|
|
max-width: 160px;
|
|
}
|
|
.footer__description {
|
|
color: #495057;
|
|
font-size: 12px;
|
|
word-break: keep-all;
|
|
margin-bottom: 2px;
|
|
line-height: 1.35;
|
|
padding: 0 14px;
|
|
}
|
|
.footer__sellerLink {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 0 14px;
|
|
}
|
|
.footer__copyright {
|
|
color: #495057;
|
|
font-size: 13px;
|
|
word-break: keep-all;
|
|
margin-bottom: 10px;
|
|
padding: 0 14px;
|
|
}
|
|
.footer__underLine {
|
|
color: #343a40;
|
|
font-size: 13px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.family-site-link li.disabled {
|
|
display: none;
|
|
}
|
|
.family-site-link.nice-select {
|
|
height: 38px;
|
|
line-height: 36px;
|
|
font-size: 13px;
|
|
}
|
|
.family-site-link.nice-select .list {
|
|
top: auto;
|
|
left: auto;
|
|
right: 0;
|
|
bottom: 100%;
|
|
margin-top: 0;
|
|
margin-bottom: 12px;
|
|
transform-origin: 50% 100%;
|
|
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.family-site-link.nice-select .list .option {
|
|
line-height: 34px;
|
|
min-height: 34px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tab-bar {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 54px;
|
|
z-index: 11;
|
|
}
|
|
.tab-bar__nav {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
z-index: 1;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
color: #3c3c3c;
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
}
|
|
.tab-bar__link {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
.tab-bar__home {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 6px;
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: #f1f3f5;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.tab-bar__home-wrapper {
|
|
position: relative;
|
|
flex: 1;
|
|
max-width: 108px;
|
|
}
|
|
.tab-bar__home > a {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-bottom: 4px;
|
|
}
|
|
.tab-bar__bg {
|
|
position: absolute;
|
|
display: flex;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
gap: 20px;
|
|
}
|
|
.tab-bar__bg::before, .tab-bar__bg::after {
|
|
content: "";
|
|
display: block;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
.tab-bar__bg::before {
|
|
border-top-right-radius: 44px;
|
|
box-shadow: rgba(0, 0, 0, 0.1) 2px -2px 8px 0px;
|
|
}
|
|
.tab-bar__bg::after {
|
|
border-top-left-radius: 44px;
|
|
box-shadow: rgba(0, 0, 0, 0.1) -2px -2px 8px 0px;
|
|
}
|
|
.tab-bar__bg-fraction {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 30px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.sub-box {
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
background-color: #ffffff;
|
|
}
|
|
.sub-box:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.noResult {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 70vh;
|
|
font-size: 16px;
|
|
color: #666968;
|
|
padding-top: 20vh;
|
|
}
|
|
.noResult__image {
|
|
width: 68px;
|
|
height: 68px;
|
|
}
|
|
.noResult__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.noResult__text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
|
|
.main-section {
|
|
background-color: #ffffff;
|
|
padding-bottom: 20px;
|
|
}
|
|
.main-section:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.main-section__main-banner {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
}
|
|
.main-section__category-type .product-list-vertical-twoAndaHalf .swiper-slide,
|
|
.main-section__category-type .product-list-vertical-oneAndaHalf .swiper-slide,
|
|
.main-section__category-type .product-list-vertical-oneAndaHalfCenter .swiper-slide {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
.main-section__category-type .product-list-vertical-twoAndaHalf .product-unit-image,
|
|
.main-section__category-type .product-list-vertical-oneAndaHalf .product-unit-image,
|
|
.main-section__category-type .product-list-vertical-oneAndaHalfCenter .product-unit-image {
|
|
border-radius: 6px;
|
|
}
|
|
.main-section__time-sale {
|
|
position: relative;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
}
|
|
.main-section__time-sale .main-section-header {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
}
|
|
.main-section__time-sale .product-list-vertical-twoAndaHalf,
|
|
.main-section__time-sale .product-list-vertical-oneAndaHalf,
|
|
.main-section__time-sale .product-list-vertical-oneAndaHalfCenter,
|
|
.main-section__time-sale .product-list-singleItem {
|
|
padding-top: 15%;
|
|
}
|
|
.main-section__time-sale .product-list-singleItem .product-unit-info {
|
|
padding: 0px 0px 8px 2px;
|
|
}
|
|
.main-section__time-sale.no-bg .main-section-header {
|
|
opacity: 1;
|
|
position: static;
|
|
}
|
|
.main-section__time-sale.no-bg .product-list-vertical-twoAndaHalf,
|
|
.main-section__time-sale.no-bg .product-list-vertical-oneAndaHalf,
|
|
.main-section__time-sale.no-bg .product-list-vertical-oneAndaHalfCenter,
|
|
.main-section__time-sale.no-bg .product-list-singleItem {
|
|
padding-top: 0;
|
|
}
|
|
.main-section__brand-link {
|
|
padding: 12px 0;
|
|
}
|
|
.main-section__small-banner {
|
|
}
|
|
.main-section__product-banner .product-list-vertical-twoAndaHalf .swiper-slide,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalf .swiper-slide,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalfCenter .swiper-slide {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
.main-section__product-banner .product-list-vertical-twoAndaHalf .product-unit-image,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalf .product-unit-image,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalfCenter .product-unit-image {
|
|
border-radius: 6px;
|
|
}
|
|
.main-section__product-banner .product-list-vertical-twoAndaHalf .product-unit-info,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalf .product-unit-info,
|
|
.main-section__product-banner .product-list-vertical-oneAndaHalfCenter .product-unit-info {
|
|
padding: 0px 0px 8px 2px;
|
|
}
|
|
.main-section__notice {
|
|
padding: 20px 14px;
|
|
}
|
|
|
|
.swiper-pagination.theme-pagination {
|
|
position: static;
|
|
padding-top: 48px;
|
|
}
|
|
|
|
.main-banner__controller {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
left: 20px;
|
|
bottom: 24px;
|
|
z-index: 2;
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
width: 160px;
|
|
height: 40px;
|
|
border-radius: 100px;
|
|
}
|
|
.main-banner__pagination {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
margin-right: 6px;
|
|
margin-left: 6px;
|
|
}
|
|
.main-banner__btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../images/icon_banner-controll.png);
|
|
background-size: cover;
|
|
background-position-x: 0;
|
|
}
|
|
.main-banner__btn.play {
|
|
background-position-x: 72px;
|
|
}
|
|
.main-banner__btn.pause {
|
|
background-position-x: 48px;
|
|
}
|
|
.main-banner .swiper-slide img {
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
max-height: 600px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.main-banner__controls {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
left: auto;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
padding: 4px 16px;
|
|
border-radius: 16px;
|
|
color: #ffffff;
|
|
z-index: 1;
|
|
gap: 8px;
|
|
}
|
|
.main-banner__controls .swiper-pagination {
|
|
position: static;
|
|
}
|
|
.main-banner__controls__btn {
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-size: cover;
|
|
background-image: url(../images/icon_swiper-controls.png);
|
|
background-position: 0 0;
|
|
}
|
|
.main-banner__controls__btn.paused {
|
|
background-position-x: 18px;
|
|
}
|
|
|
|
.main-section-header {
|
|
margin-bottom: 16px;
|
|
padding: 0 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.main-section-title {
|
|
margin-bottom: 16px;
|
|
}
|
|
.main-section-title__description {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
}
|
|
.main-section-title__title {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
gap: 4px;
|
|
color: #16191d;
|
|
}
|
|
.main-section-title__title > .icon {
|
|
flex-shrink: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.category-type-tab {
|
|
padding: 8px 0;
|
|
}
|
|
.category-type-tab.swiper {
|
|
padding: 8px 0;
|
|
margin-left: 0;
|
|
}
|
|
.category-type-tab__btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-inline: auto;
|
|
}
|
|
.category-type-tab__btn.active .category-type-tab__name {
|
|
color: #1a1a1a;
|
|
font-weight: 700;
|
|
}
|
|
.category-type-tab__name {
|
|
font-size: 12px;
|
|
letter-spacing: -0.03em;
|
|
color: #979b9d;
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.brand-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.brand-link__image {
|
|
overflow: hidden;
|
|
}
|
|
.brand-link__image img {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-list-vertical-twoAndaHalf .product-list-vertical-twoAndaHalf__swiper {
|
|
position: relative;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
.product-list-vertical-twoAndaHalf .product-unit-image {
|
|
aspect-ratio: 1/1;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.product-list-vertical-twoAndaHalf .swiper-slide {
|
|
height: auto;
|
|
}
|
|
.product-list-vertical-twoAndaHalf .product-unit-info {
|
|
padding: 0px 0px 8px 2px;
|
|
background-color: #ffffff;
|
|
}
|
|
.product-list-vertical-twoAndaHalf .swiper-scrollbar {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.product-list-vertical-oneAndaHalf .product-list-vertical-oneAndaHalf__swiper {
|
|
position: relative;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
.product-list-vertical-oneAndaHalf .product-unit-image {
|
|
aspect-ratio: 1/1;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.product-list-vertical-oneAndaHalf .swiper-slide {
|
|
height: auto;
|
|
}
|
|
.product-list-vertical-oneAndaHalf .product-unit-info {
|
|
padding: 0px 0px 8px 2px;
|
|
background-color: #ffffff;
|
|
}
|
|
.product-list-vertical-oneAndaHalf .swiper-scrollbar {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.product-list-vertical-oneAndaHalfCenter .product-list-vertical-oneAndaHalfCenter__swiper {
|
|
position: relative;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
.product-list-vertical-oneAndaHalfCenter .product-unit-image {
|
|
aspect-ratio: 1/1;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.product-list-vertical-oneAndaHalfCenter .swiper-slide {
|
|
background-color: #ffffff;
|
|
height: auto;
|
|
opacity: 0.6;
|
|
filter: grayscale(0.6);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.product-list-vertical-oneAndaHalfCenter .product-unit-info {
|
|
padding: 0px 0px 8px 2px;
|
|
background-color: #ffffff;
|
|
}
|
|
.product-list-vertical-oneAndaHalfCenter .swiper-scrollbar {
|
|
margin-top: 20px;
|
|
}
|
|
.product-list-vertical-oneAndaHalfCenter .swiper-slide-active {
|
|
opacity: 1;
|
|
filter: grayscale(0);
|
|
}
|
|
|
|
.time-sale__top {
|
|
background-color: #212529;
|
|
height: clamp(32px, 12%, 48px);
|
|
width: 100%;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
min-height: 32px;
|
|
}
|
|
.time-sale__top .time {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.time-sale__top .left {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.small-banner {
|
|
overflow: hidden;
|
|
}
|
|
.small-banner__swiper {
|
|
position: relative;
|
|
}
|
|
.small-banner__swiper .swiper-pagination {
|
|
position: absolute;
|
|
width: -moz-fit-content !important;
|
|
width: fit-content !important;
|
|
padding-top: 0;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
bottom: 3px !important;
|
|
z-index: 8;
|
|
}
|
|
.small-banner__swiper .swiper-pagination .swiper-pagination-bullet {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: 0 3px !important;
|
|
}
|
|
.small-banner__swiper .swiper-pagination .swiper-pagination-bullet-active {
|
|
background-color: #495057;
|
|
}
|
|
|
|
.product-tab {
|
|
position: relative;
|
|
box-shadow: inset 0 -1px 0 0 #dee2e6;
|
|
padding: 0 14px 1px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.product-tab::before {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
.product-tab:after {
|
|
right: auto;
|
|
right: 0;
|
|
}
|
|
.product-tab ul {
|
|
position: relative;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.product-tab ul li {
|
|
flex: 1;
|
|
}
|
|
.product-tab__btn {
|
|
width: 100%;
|
|
height: 46px;
|
|
padding: 0 12px 4px;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #868e96;
|
|
word-break: keep-all;
|
|
}
|
|
.product-tab__btn.active {
|
|
color: #212529;
|
|
box-shadow: inset 0 -3px 0 0 #868e96;
|
|
}
|
|
|
|
.product-banner {
|
|
padding: 0 14px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.product-banner__image {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.product-banner__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.product-banner__description {
|
|
margin-top: 10px;
|
|
}
|
|
.product-banner__description-title {
|
|
font-size: 16px;
|
|
color: #0d0f12;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
.product-banner__description-subtitle {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
}
|
|
|
|
.magazine {
|
|
padding-bottom: 20px;
|
|
}
|
|
.magazine__swiper .swiper-wrapper {
|
|
padding-top: 12px;
|
|
padding-bottom: 40px;
|
|
}
|
|
.magazine__swiper .swiper-slide {
|
|
width: clamp(260px, 60vw, 350px);
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
transform: scale(0.84) !important;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.magazine__swiper .swiper-slide img {
|
|
opacity: 0.4;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.magazine__swiper .swiper-slide-active {
|
|
transform: scale(1) !important;
|
|
}
|
|
.magazine__swiper .swiper-slide-active img {
|
|
opacity: 1;
|
|
}
|
|
.magazine__link {
|
|
text-align: center;
|
|
}
|
|
.magazine__link a {
|
|
position: relative;
|
|
border: 1px solid;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #343a40;
|
|
border: 1px solid #e9ecef;
|
|
padding: 8px 34px 8px 20px;
|
|
border-radius: 40px;
|
|
}
|
|
.magazine__link a::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 22px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid;
|
|
border-right: 1px solid;
|
|
transform: rotate(45deg) translateY(calc(-50% - 1px));
|
|
border-color: #868e96;
|
|
}
|
|
|
|
.mainSns {
|
|
padding: 0 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.mainSns__item {
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.mainSns__item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mainNotice {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 16px 16px;
|
|
}
|
|
.mainNotice__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding-bottom: 28px;
|
|
}
|
|
.mainNotice__title {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
gap: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.mainNotice__list {
|
|
margin-bottom: 20px;
|
|
}
|
|
.mainNotice__list li a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.mainNotice__list li a span {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
color: #212529;
|
|
}
|
|
.mainNotice__list li a .icon {
|
|
flex-shrink: 0;
|
|
}
|
|
.mainNotice__list li + li {
|
|
position: relative;
|
|
margin-top: 24px;
|
|
}
|
|
.mainNotice__list li + li::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
top: -12px;
|
|
left: 0;
|
|
}
|
|
.mainNotice__link {
|
|
text-align: center;
|
|
padding-bottom: 8px;
|
|
}
|
|
.mainNotice__link a {
|
|
position: relative;
|
|
border: 1px solid;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #212529;
|
|
border: 1px solid #dee2e6;
|
|
padding: 8px 34px 8px 20px;
|
|
border-radius: 40px;
|
|
}
|
|
.mainNotice__link a::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 22px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid;
|
|
border-right: 1px solid;
|
|
transform: rotate(45deg) translateY(calc(-50% - 1px));
|
|
border-color: #868e96;
|
|
}
|
|
.mainNotice__customerLink {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.mainNotice__customerLink__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 44px;
|
|
text-align: center;
|
|
flex: 1;
|
|
font-size: 15px;
|
|
color: #343a40;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
}
|
|
.mainNotice__customerLink__link.primary {
|
|
font-weight: 500;
|
|
background-color: #7e8282;
|
|
color: #ffffff;
|
|
border: 0;
|
|
}
|
|
.mainNotice__customerContact {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 5px;
|
|
padding: 16px 16px;
|
|
gap: 16px;
|
|
}
|
|
.mainNotice__customerContact .icon {
|
|
flex-shrink: 0;
|
|
}
|
|
.mainNotice__customerContact__right {
|
|
text-align: left;
|
|
padding-bottom: 6px;
|
|
}
|
|
.mainNotice__customerContact--moreInfo {
|
|
align-items: flex-start;
|
|
}
|
|
.mainNotice__customerContact--moreInfo dl {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
.mainNotice__customerContact--moreInfo dl:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.mainNotice__customerContact--moreInfo dl dt {
|
|
font-size: 12px;
|
|
color: #495057;
|
|
font-weight: 400;
|
|
margin-right: 8px;
|
|
min-width: 48px;
|
|
}
|
|
.mainNotice__customerContact--moreInfo dl dd {
|
|
font-size: 12px;
|
|
color: #16191d;
|
|
font-weight: 400;
|
|
}
|
|
.icon_kakao-customer-service {
|
|
width: 72px;
|
|
height: 72px;
|
|
background-image: url(../images/icon_kakao_customer.png);
|
|
}
|
|
|
|
.notice__title {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
}
|
|
.notice__title.customer-service {
|
|
font-size: 17px;
|
|
margin-right: 4px;
|
|
}
|
|
.notice__description {
|
|
display: block;
|
|
font-size: 16px;
|
|
letter-spacing: -0.035em;
|
|
color: #868e96;
|
|
}
|
|
.notice__number {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.035em;
|
|
line-height: 1;
|
|
}
|
|
.notice__paragraph {
|
|
font-size: 13px;
|
|
}
|
|
.notice__text01 {
|
|
font-weight: 500;
|
|
color: #1971c2;
|
|
}
|
|
.notice__text02 {
|
|
color: #868e96;
|
|
}
|
|
.notice__text03 {
|
|
color: #495057;
|
|
}
|
|
.notice__moreInfo {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.searchPage {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
background-color: #ffffff;
|
|
}
|
|
.searchPage.active {
|
|
display: block;
|
|
}
|
|
.searchPage__inner {
|
|
max-width: 720px;
|
|
margin-inline: auto;
|
|
background-color: #f4f6f8;
|
|
}
|
|
.searchPage__header {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
gap: 4px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
background-color: #ffffff;
|
|
}
|
|
.searchPage__header .innerSearch {
|
|
flex-grow: 1;
|
|
border-radius: 5px;
|
|
padding: 4px 10px;
|
|
}
|
|
.searchPage__section {
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
.searchPage__closeBtn {
|
|
padding: 10px 5px;
|
|
flex-shrink: 0;
|
|
}
|
|
.searchPage__closeBtn svg {
|
|
fill: #606060;
|
|
}
|
|
.searchPage__textDeleteBtn {
|
|
display: none;
|
|
padding: 10px;
|
|
}
|
|
.searchPage__textDeleteBtn.active {
|
|
display: block;
|
|
}
|
|
.searchPage__sectionHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.searchPage__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.recentSearch {
|
|
position: relative;
|
|
}
|
|
.recentSearch__list {
|
|
display: flex;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
.recentSearch__list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.recentSearch__list::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 24px;
|
|
height: 32px;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
|
}
|
|
.recentSearch__item {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 20px;
|
|
border: 1px solid #dedede;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
color: #16191d;
|
|
}
|
|
.recentSearch__link {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding-left: 12px;
|
|
}
|
|
.recentSearch__delete {
|
|
height: 32px;
|
|
padding-right: 8px;
|
|
}
|
|
.recentSearch__deleteAll {
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
font-weight: 400;
|
|
padding: 8px 2px 8px 12px;
|
|
}
|
|
.recentSearch__noResult {
|
|
font-size: 15px;
|
|
color: #7e8282;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.resultTrend__num {
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #868e96;
|
|
margin-right: 4px;
|
|
min-width: 24px;
|
|
}
|
|
.resultTrend__list {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(5, 1fr);
|
|
background-color: #fafafa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 6px;
|
|
-moz-column-gap: 6px;
|
|
column-gap: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.resultTrend__list li {
|
|
position: relative;
|
|
}
|
|
.resultTrend__list li a {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
padding: 0 12px 0 4px;
|
|
margin: 8px 0;
|
|
width: 100%;
|
|
}
|
|
.resultTrend__list li .icon {
|
|
position: absolute;
|
|
top: 26px;
|
|
right: 2px;
|
|
}
|
|
.resultTrend__list li:nth-child(1) {
|
|
grid-area: 1/1/2/2;
|
|
}
|
|
.resultTrend__list li:nth-child(2) {
|
|
grid-area: 2/1/3/2;
|
|
}
|
|
.resultTrend__list li:nth-child(3) {
|
|
grid-area: 3/1/4/2;
|
|
}
|
|
.resultTrend__list li:nth-child(4) {
|
|
grid-area: 4/1/5/2;
|
|
}
|
|
.resultTrend__list li:nth-child(5) {
|
|
grid-area: 5/1/6/2;
|
|
}
|
|
.resultTrend__list li:nth-child(6) {
|
|
grid-area: 1/2/2/3;
|
|
}
|
|
.resultTrend__list li:nth-child(7) {
|
|
grid-area: 2/2/3/3;
|
|
}
|
|
.resultTrend__list li:nth-child(8) {
|
|
grid-area: 3/2/4/3;
|
|
}
|
|
.resultTrend__list li:nth-child(9) {
|
|
grid-area: 4/2/5/3;
|
|
}
|
|
.resultTrend__list li:nth-child(10) {
|
|
grid-area: 5/2/6/3;
|
|
}
|
|
|
|
.best-review__item .product-unit-title a {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
.best-review__item .product-unit-misc {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
}
|
|
.best-review__item .product-unit-rating {
|
|
margin-top: 0;
|
|
margin-right: 8px;
|
|
}
|
|
.best-review__item .product-unit-price {
|
|
margin-top: 0;
|
|
}
|
|
.best-review__item .product-unit-price__current {
|
|
font-size: 13px;
|
|
margin-left: 4px;
|
|
}
|
|
.best-review__product {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border: 1px solid #dee2e6;
|
|
border-width: 1px 0;
|
|
margin-top: 16px;
|
|
}
|
|
.best-review__product .product-unit-info {
|
|
margin-top: 0;
|
|
margin-left: 8px;
|
|
}
|
|
.best-review__title {
|
|
display: block;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
color: #030507;
|
|
font-weight: 700;
|
|
margin-top: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.best-review__paragraph {
|
|
font-size: 12px;
|
|
color: #343a40;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 17px;
|
|
height: 51px;
|
|
margin-top: 8px;
|
|
}
|
|
.best-review__review-image {
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.best-review__review-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
.best-review__product-image {
|
|
flex-shrink: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
.best-review__product-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.availableReviewItem {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.availableReviewItem:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.availableReviewItem__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.availableReviewItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.availableReviewItem__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.availableReviewItem__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.availableReviewItem__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.availableReviewItem__info__date {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.availableReviewItem__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.availableReviewItem__info__option {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.availableReviewItem__info__quantity {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.availableReviewItem__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
.availableReviewItem__linkContainer {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
}
|
|
.availableReviewItem__btn.btn {
|
|
word-break: keep-all;
|
|
font-size: 15px;
|
|
height: 42px;
|
|
max-width: 136px;
|
|
}
|
|
.availableReviewItem__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.availableReviewItem__bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
.availableReviewItem__descText {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
}
|
|
.availableReviewItem__descText em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #666968;
|
|
margin-left: 2px;
|
|
word-break: keep-all;
|
|
}
|
|
.availableReviewItem__descText + .availableReviewItem__descText {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.reviewWritingItem {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 16px 12px;
|
|
border-radius: 2px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
.reviewWritingItem:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.reviewWritingItem__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.reviewWritingItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.reviewWritingItem__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.reviewWritingItem__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.reviewWritingItem__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.reviewWritingItem__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.reviewWritingItem__info__option {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.reviewWritingItem__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.myReviewItem {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.myReviewItem:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.myReviewItem__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
.myReviewItem__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.myReviewItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.myReviewItem__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.myReviewItem__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.myReviewItem__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.myReviewItem__info__date {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.myReviewItem__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.myReviewItem__info__option {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.myReviewItem__info__quantity {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.myReviewItem__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
.myReviewItem__reviewText {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.myReviewItem__reviewText.opened {
|
|
-webkit-line-clamp: initial;
|
|
}
|
|
.myReviewItem__reviewMore {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #1971c2;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
padding: 4px 2px 4px 0;
|
|
min-width: 60px;
|
|
}
|
|
.myReviewItem__reviewMore svg {
|
|
margin-left: 3px;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: 1px;
|
|
}
|
|
.myReviewItem__reviewMore svg,
|
|
.myReviewItem__reviewMore path {
|
|
fill: #1971c2;
|
|
margin-top: -1px;
|
|
}
|
|
.myReviewItem__reviewMore.opened svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
.myReviewItem__thumbs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 140px);
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
.myReviewItem__thumbs a {
|
|
display: block;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.myReviewItem__thumbs img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
.myReviewItem__bottom {
|
|
padding-top: 32px;
|
|
position: relative;
|
|
}
|
|
.myReviewItem__bottom .reviewStars__wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.myReviewItem .textBtns {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: 0;
|
|
}
|
|
|
|
.myReviewImageSlide {
|
|
background-color: #000000;
|
|
height: calc(100% - 80px);
|
|
}
|
|
.myReviewImageSlide .swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.myReviewImageThumbs {
|
|
padding: 10px 0 !important;
|
|
background-color: #000000;
|
|
}
|
|
.myReviewImageThumbs .swiper-wrapper {
|
|
justify-content: center;
|
|
}
|
|
.myReviewImageThumbs .swiper-slide {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.myReviewImageThumbs .swiper-slide img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.myReviewImageThumbs .swiper-slide::after {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
.myReviewImageThumbs .swiper-slide.swiper-slide-thumb-active::after {
|
|
content: "";
|
|
display: block;
|
|
border: 3px solid #228be6;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.editUserInfo {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
min-height: calc(100vh - 188px);
|
|
min-height: calc(100svh - 188px);
|
|
}
|
|
|
|
.editUserPwCheck {
|
|
padding-top: 16px;
|
|
}
|
|
.editUserPwCheck__title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-bottom: 20px;
|
|
}
|
|
.editUserPwCheck__subTitle {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
margin-bottom: 8px;
|
|
}
|
|
.editUserPwCheck .input-text {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.userForm {
|
|
position: relative;
|
|
margin-inline: auto;
|
|
padding-top: 16px;
|
|
}
|
|
.userForm__required {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
color: #7e8282;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.userForm .input-text {
|
|
height: 52px;
|
|
}
|
|
.userForm__inputBox {
|
|
margin-bottom: 30px;
|
|
}
|
|
.userForm__inputBox__title {
|
|
position: relative;
|
|
display: block;
|
|
color: #0d0f12;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #495057;
|
|
}
|
|
.userForm__inputBox > * {
|
|
margin-bottom: 28px;
|
|
}
|
|
.userForm__inputBox .input-text {
|
|
margin-bottom: 4px;
|
|
}
|
|
.userForm__inputBox .nice-select {
|
|
height: 52px;
|
|
line-height: 50px;
|
|
}
|
|
.userForm__inputBox__alertText {
|
|
color: #f03e3e;
|
|
padding-left: 4px;
|
|
font-size: 13px;
|
|
}
|
|
.userForm__inputBox__checks {
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.userForm__inputBox__checks .checkbox {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.userForm__inputBox .inputWithBtn .btn {
|
|
height: 52px;
|
|
min-width: 120px;
|
|
}
|
|
.userForm__inputBox .inputTimer {
|
|
width: 100%;
|
|
}
|
|
.userForm__inputBox .inputEmail {
|
|
margin-bottom: 4px;
|
|
}
|
|
.userForm__inputBox .inputEmail .input-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.userForm__inputBox .inputEmail .nice-select {
|
|
width: 142px;
|
|
}
|
|
.userForm__inputBox__itemTitle {
|
|
display: block;
|
|
color: #212529;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding-left: 2px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.userForm__inputBox__itemTitle .misc {
|
|
font-size: 12px;
|
|
color: #7e8282;
|
|
font-weight: 400;
|
|
}
|
|
.userForm__inputBox .custom-radio-container {
|
|
height: 52px;
|
|
gap: 28px;
|
|
}
|
|
.userForm__inputBox .inputAddress .inputAddress__postalCode {
|
|
margin-bottom: 10px;
|
|
}
|
|
.userForm__inputBox .inputAddress .inputAddress__postalCode .input-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.userForm__inputBox .inputAddress .input-text {
|
|
margin-bottom: 10px;
|
|
}
|
|
.userForm__inputBox .inputAddress__postalCode .btn {
|
|
height: 52px;
|
|
}
|
|
.userForm__inputBox .phoneAuth {
|
|
max-width: 480px;
|
|
margin-top: 20px;
|
|
}
|
|
.userForm__inputBox .phoneAuth .input-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.userForm__inputBox .phoneAuth .inputWithBtn {
|
|
margin-bottom: 4px;
|
|
}
|
|
.userForm__inputBox .phoneAuth .inputWithBtn .btn {
|
|
width: 120px;
|
|
}
|
|
.userForm__inputBox .textInfo {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.userForm__switch {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding-left: 4px;
|
|
margin-top: 16px;
|
|
}
|
|
.userForm__switch .toggle-switchy .label {
|
|
font-size: 13px;
|
|
}
|
|
.userForm__switch .toggle-switchy.kakao > input:checked + .toggle {
|
|
background: #FEE500;
|
|
}
|
|
.userForm__switch .toggle-switchy.kakao > input:checked + .toggle > .switch {
|
|
border: 3px solid #FEE500;
|
|
}
|
|
.userForm__switch .toggle-switchy.kakao > input + .toggle:before {
|
|
color: #191919;
|
|
}
|
|
.userForm__switch .toggle-switchy.naver > input:checked + .toggle {
|
|
background: #03c75a;
|
|
}
|
|
.userForm__switch .toggle-switchy.naver > input:checked + .toggle > .switch {
|
|
border: 3px solid #03c75a;
|
|
}
|
|
.userForm__btnContainer-half {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.userForm__btnContainer-half .btn {
|
|
flex-grow: 1;
|
|
}
|
|
.userForm__bottom {
|
|
margin-top: 20px;
|
|
}
|
|
.userForm__deleteLink {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
color: #50514f;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
}
|
|
.userForm__deleteLink:active {
|
|
background-color: #fafafa;
|
|
}
|
|
.userForm__deleteLink::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #666968;
|
|
border-right: 1px solid #666968;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.userForm .select-box {
|
|
display: flex;
|
|
}
|
|
.userForm--returnBox {
|
|
padding: 14px 16px;
|
|
background-color: #f7f7f7;
|
|
border-radius: 5px;
|
|
border: 1px solid #dedede;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userForm--returnBox .section-title {
|
|
padding-bottom: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userForm--innerBox {
|
|
padding: 14px 16px;
|
|
background-color: #f7f7f7;
|
|
border-radius: 5px;
|
|
border: 1px solid #dedede;
|
|
margin-bottom: 10px;
|
|
}
|
|
.userForm--innerBox .input-text {
|
|
height: 48px;
|
|
}
|
|
.userForm--innerBox .userForm__inputBox > * {
|
|
margin-bottom: 16px;
|
|
}
|
|
.userForm--innerBox .userForm__inputBox__item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.userForm--innerBox .userForm__inputBox {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.editContent__innerBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #f1f3f5;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
.editContent__innerBox .input-text {
|
|
margin-bottom: 8px;
|
|
max-width: none;
|
|
}
|
|
.editContent__innerBox:has(.emailInput) {
|
|
display: block;
|
|
}
|
|
.editContent__innerBtnContainer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.deleteAccount__inner {
|
|
margin-bottom: 40px;
|
|
}
|
|
.deleteAccount__image {
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
margin-bottom: 40px;
|
|
}
|
|
.deleteAccount__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.deleteAccount__title {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.deleteAccount__item {
|
|
margin-bottom: 28px;
|
|
}
|
|
.deleteAccount__item .select-box {
|
|
height: 50px;
|
|
}
|
|
.deleteAccount__item .nice-select {
|
|
height: 50px;
|
|
line-height: 48px;
|
|
}
|
|
.deleteAccount__itemTitle {
|
|
display: block;
|
|
color: #212529;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding-left: 2px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.deleteAccount .b-checkbox-container {
|
|
margin-left: 2px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.addressManage {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
min-height: calc(100vh - 188px);
|
|
min-height: calc(100svh - 188px);
|
|
}
|
|
.addressManage__header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #495057;
|
|
}
|
|
.addressManage__title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-right: auto;
|
|
}
|
|
.addressManage__btnContainer {
|
|
text-align: right;
|
|
}
|
|
.addressManage__list {
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.addressManage__item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 26px 0 28px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.addressManage__item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.addressManage__itemRadio {
|
|
padding: 5px 2px;
|
|
margin-right: 6px;
|
|
}
|
|
.addressManage__itemBody {
|
|
margin-right: auto;
|
|
}
|
|
.addressManage__itemName {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 3px;
|
|
}
|
|
.addressManage__itemPerson {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #212529;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.addressManage__itemCheck svg,
|
|
.addressManage__itemCheck path {
|
|
fill: currentColor;
|
|
}
|
|
.addressManage__itemBadge {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 3px 5px;
|
|
border-radius: 3px;
|
|
color: #868e96;
|
|
background-color: #f1f3f5;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
margin-top: 1px;
|
|
}
|
|
.addressManage__itemPhone {
|
|
font-size: 14px;
|
|
color: #868e96;
|
|
margin-bottom: 10px;
|
|
}
|
|
.addressManage__itemAddress {
|
|
font-size: 14px;
|
|
color: #212529;
|
|
}
|
|
.addressManage__item .textBtns {
|
|
position: absolute;
|
|
top: 26px;
|
|
right: 0;
|
|
}
|
|
.addressManage__no-result {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 88px 0 84px;
|
|
}
|
|
.addressManage__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
.addressManage .noResult {
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.myMemberRankInfo {
|
|
margin-bottom: 40px;
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
}
|
|
.myMemberRankInfo__title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
padding: 20px 16px;
|
|
text-align: center;
|
|
}
|
|
.myMemberRankInfo__title em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
.myMemberRankInfo__title strong {
|
|
font-weight: 700;
|
|
}
|
|
.myMemberRankInfo__item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 28px 0;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
.myMemberRankInfo__item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.myMemberRankInfo__top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.myMemberRankInfo__top img {
|
|
width: 92px;
|
|
height: 92px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
margin-bottom: 20px;
|
|
}
|
|
.myMemberRankInfo__topDescription {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.myMemberRankInfo__topName {
|
|
display: inline-block;
|
|
color: #16191d;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
.myMemberRankInfo__topText {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
width: 100%;
|
|
margin-left: 2px;
|
|
}
|
|
.myMemberRankInfo__topText em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
}
|
|
.myMemberRankInfo__body {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
position: relative;
|
|
}
|
|
.myMemberRankInfo__box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: #f7f7f7;
|
|
border-radius: 4px;
|
|
min-height: 80px;
|
|
padding: 20px 16px;
|
|
max-width: 340px;
|
|
}
|
|
.myMemberRankInfo__box:only-child {
|
|
grid-column: span 2;
|
|
width: calc(50% - 4px);
|
|
margin-inline: auto;
|
|
}
|
|
.myMemberRankInfo__box img {
|
|
width: 48px;
|
|
height: 32px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.myMemberRankInfo__boxText {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
}
|
|
.myMemberRankInfo__boxText em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #1c7ed6;
|
|
}
|
|
|
|
.myRank {
|
|
margin-bottom: 10px;
|
|
padding: 24px 16px;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
.myRank__yourRank {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin-bottom: 28px;
|
|
}
|
|
.myRank__yourRank em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.myRank__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.myRank__link::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid currentColor;
|
|
border-right: 1px solid currentColor;
|
|
transform: rotate(45deg);
|
|
margin-left: 2px;
|
|
}
|
|
.myRank .member-rank-summary__summary-info {
|
|
margin-inline: auto;
|
|
width: 288px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.myMileage > .sub-box {
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.mileageStatus {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
padding: 0 0 20px;
|
|
}
|
|
.mileageStatusCurrent {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-bottom: 24px;
|
|
}
|
|
.mileageStatusCurrent svg {
|
|
width: 48px;
|
|
margin-right: 10px;
|
|
}
|
|
.mileageStatusCurrent__title {
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-bottom: 16px;
|
|
margin-right: 6px;
|
|
}
|
|
.mileageStatusCurrent__number {
|
|
display: inline-block;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
letter-spacing: -0.032em;
|
|
margin-bottom: 10px;
|
|
margin-right: 4px;
|
|
}
|
|
.mileageStatusCurrent__unit {
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #50514f;
|
|
margin-bottom: 16px;
|
|
}
|
|
.mileageStatusMisc {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 28px;
|
|
}
|
|
.mileageStatusMisc::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #e9ecef;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.mileageStatusMisc__item {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.mileageStatusMisc__item + .mileageStatusMisc__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 1px;
|
|
height: 16px;
|
|
background-color: #dee2e6;
|
|
top: 12px;
|
|
left: -14px;
|
|
}
|
|
.mileageStatusMisc__title {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mileageStatusMisc__number {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #666968;
|
|
letter-spacing: -0.032em;
|
|
}
|
|
.mileageStatusMisc__unit {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #666968;
|
|
}
|
|
|
|
.mileageList {
|
|
display: none;
|
|
}
|
|
.mileageList.current {
|
|
display: block;
|
|
}
|
|
.mileageList__item {
|
|
position: relative;
|
|
padding: 10px 0 12px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.mileageList__item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.mileageList__itemHeader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mileageList__itemDate {
|
|
font-size: 12px;
|
|
color: #7e8282;
|
|
}
|
|
.mileageList__itemDot {
|
|
color: #7e8282;
|
|
}
|
|
.mileageList__itemBrand {
|
|
font-size: 12px;
|
|
color: #7e8282;
|
|
}
|
|
.mileageList__itemTitle {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-right: auto;
|
|
}
|
|
.mileageList__itemBody {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.mileageList__itemDescription {
|
|
margin-right: 6px;
|
|
color: #212529;
|
|
}
|
|
.mileageList__itemNumber {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-bottom: 2px;
|
|
}
|
|
.mileageList__item--saveUp .mileageList__itemTitle {
|
|
color: #1c7ed6;
|
|
}
|
|
.mileageList__item--saveUp .mileageList__itemNumber {
|
|
color: #1c7ed6;
|
|
}
|
|
.mileageList__productName {
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
}
|
|
.mileageList__orderNum {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 0;
|
|
color: #7e8282;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
.mileageList__orderNum em {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-left: 2px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.mileageList__no-result {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 72px 0 60px;
|
|
}
|
|
.mileageList__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
|
|
.couponRegister .input-text {
|
|
font-size: 14px;
|
|
}
|
|
.couponRegister .btn {
|
|
height: 48px;
|
|
}
|
|
|
|
.couponList {
|
|
padding: 16px;
|
|
}
|
|
.couponList__item {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 188px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.couponList__left {
|
|
width: 64%;
|
|
padding: 20px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
border-right: 1px dashed #dee2e6;
|
|
}
|
|
.couponList__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1971c2;
|
|
margin-bottom: 12px;
|
|
}
|
|
.couponList__subTitle {
|
|
font-size: 13px;
|
|
color: #343a40;
|
|
}
|
|
.couponList__date {
|
|
font-size: 13px;
|
|
color: #868e96;
|
|
margin-bottom: 28px;
|
|
}
|
|
.couponList__dayLeft {
|
|
font-size: 13px;
|
|
color: #e03131;
|
|
}
|
|
.couponList__checkBtn {
|
|
font-size: 15px !important;
|
|
font-weight: 500;
|
|
}
|
|
.couponList__right {
|
|
width: 36%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 12px;
|
|
gap: 18px;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
border-left: 0;
|
|
}
|
|
.couponList__right .btn {
|
|
word-break: keep-all;
|
|
height: auto;
|
|
min-height: 36px;
|
|
padding: 2px 16px;
|
|
}
|
|
.couponList__image {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.couponList__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.couponList__link {
|
|
color: #1c7ed6;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.couponList__link::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #1c7ed6;
|
|
border-right: 1px solid #1c7ed6;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.couponList__link:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: #228be6;
|
|
}
|
|
.couponList__btnContainer {
|
|
text-align: right;
|
|
}
|
|
.couponList__no-result {
|
|
grid-column: span 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 72px 0 60px;
|
|
}
|
|
.couponList__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
.couponList__select {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
.couponList__downloadAll {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.listTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 16px;
|
|
}
|
|
.listTop__data {
|
|
color: #50514f;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
.listTop em {
|
|
font-style: normal;
|
|
}
|
|
.listTop__filterBtn svg,
|
|
.listTop__filterBtn path {
|
|
fill: #50514f;
|
|
}
|
|
|
|
.orderListItem__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 44px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.orderListItem__top__date {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
}
|
|
.orderListItem__top__date .misc {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #868e96;
|
|
}
|
|
.orderListItem__top__more {
|
|
color: #1c7ed6;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.orderListItem__top__more::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #1c7ed6;
|
|
border-right: 1px solid #1c7ed6;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.orderListItem__body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 20px 16px;
|
|
}
|
|
.orderListItem:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.orderListItem__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.orderListItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.orderListItem__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.orderListItem__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.orderListItem__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.orderListItem__info__status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderListItem__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderListItem__info__option {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderListItem__info__quantity {
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderListItem__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
.orderListItem__btnControls {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 6px;
|
|
padding: 0 16px 20px;
|
|
}
|
|
.orderListItem__btnControls .btn:only-child {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.orderDetail__body {
|
|
padding: 14px 16px;
|
|
}
|
|
.orderDetail__body .textBtns {
|
|
justify-content: flex-end;
|
|
margin-bottom: 10px;
|
|
}
|
|
.orderDetail__table:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.orderDetail__table > .table {
|
|
border-top: none;
|
|
box-shadow: none;
|
|
}
|
|
.orderDetail__table > .table tr {
|
|
border-bottom: none;
|
|
}
|
|
.orderDetail__table > .table th {
|
|
background-color: transparent;
|
|
height: 34px;
|
|
padding: 4px 8px 4px 2px;
|
|
vertical-align: top;
|
|
color: #0d0f12;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
}
|
|
.orderDetail__table > .table td {
|
|
background-color: transparent;
|
|
height: 34px;
|
|
padding: 4px 8px 4px 2px;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
color: #0d0f12;
|
|
line-height: 1.2;
|
|
}
|
|
.orderDetail__table > .table td em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #030507;
|
|
}
|
|
.orderDetail__table > .table .input-text {
|
|
font-size: 16px;
|
|
padding-left: 12px;
|
|
height: 48px;
|
|
max-width: 320px;
|
|
}
|
|
.orderDetail__table > .table .inputWithBtn .btn {
|
|
flex-shrink: 0;
|
|
height: 48px;
|
|
}
|
|
.orderDetail__table > .table .inputHalf {
|
|
max-width: 320px;
|
|
}
|
|
.orderDetail__table > .table .inputHalf .nice-select {
|
|
height: 48px;
|
|
line-height: 50px;
|
|
font-size: 16px;
|
|
}
|
|
.orderDetail__table > .table .inputAddress .input-text {
|
|
max-width: 420px;
|
|
}
|
|
.orderDetail__table > .table .inputAddress__postalCode {
|
|
max-width: 320px;
|
|
}
|
|
.orderDetail__table > .table .inputAddress__postalCode .input-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.orderDetail__table > .table .inputAddress__postalCode .btn {
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
}
|
|
.orderDetail__table > .table .textarea {
|
|
max-width: 720px;
|
|
}
|
|
.orderDetail__table > .table .nice-select {
|
|
height: 48px;
|
|
line-height: 46px;
|
|
}
|
|
.orderDetail__table__address {
|
|
font-size: 13px;
|
|
}
|
|
.orderDetail__table__productPrice {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
}
|
|
.orderDetail__table__discountSub th {
|
|
color: #7e8282 !important;
|
|
}
|
|
.orderDetail__table__discountSub th span {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
.orderDetail__table__discountSub th span::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-left: 2px solid #ced4da;
|
|
border-bottom: 2px solid #ced4da;
|
|
top: 3px;
|
|
left: 3px;
|
|
}
|
|
.orderDetail__table__discountSub td {
|
|
color: #7e8282 !important;
|
|
}
|
|
.orderDetail__table--price th,
|
|
.orderDetail__table--price td {
|
|
font-size: 15px;
|
|
}
|
|
.orderDetail__table__sum {
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
.orderDetail__table__sum th,
|
|
.orderDetail__table__sum td {
|
|
font-size: 18px;
|
|
font-weight: 700 !important;
|
|
color: #0d0f12;
|
|
padding-top: 20px !important;
|
|
padding-bottom: 12px !important;
|
|
}
|
|
.orderDetail__table__misc {
|
|
font-size: 12px;
|
|
color: #666968;
|
|
}
|
|
.orderDetail__table__cashCancel {
|
|
margin-top: 8px;
|
|
}
|
|
.orderDetail__date {
|
|
color: #868e96;
|
|
}
|
|
.orderDetail__deduction {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
margin-left: 4px;
|
|
}
|
|
.orderDetail__waiting {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #50514f;
|
|
margin-right: 4px;
|
|
}
|
|
.orderDetailTop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
}
|
|
.orderDetailTop__date {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: #16191d;
|
|
}
|
|
.orderDetailTop__date .misc {
|
|
font-weight: 500;
|
|
color: #666968;
|
|
}
|
|
.orderDetailTop__num {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
}
|
|
|
|
.orderDetailProduct.closed .orderDetailProduct__content {
|
|
display: none;
|
|
}
|
|
.orderDetailProduct.closed .orderDetail__content {
|
|
display: none;
|
|
}
|
|
.orderDetailProduct__top {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 56px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.orderDetailProduct__top__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.orderDetailProduct__top__title .misc {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
}
|
|
.orderDetailProduct__top__chevron {
|
|
position: absolute;
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-right: 1px solid #495057;
|
|
border-bottom: 1px solid #495057;
|
|
right: 20px;
|
|
top: 21px;
|
|
transform: translateY(4px) rotate(-135deg);
|
|
}
|
|
.orderDetailProduct__top__chevron.closed {
|
|
transform: translateY(-4px) rotate(45deg);
|
|
}
|
|
.orderDetailProduct__top__address {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
margin-top: 8px;
|
|
line-height: 22px;
|
|
}
|
|
.orderDetailProduct__top__name {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
padding-right: 16px;
|
|
line-height: 22px;
|
|
flex-shrink: 0;
|
|
}
|
|
.orderDetailProduct__top__name::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 14px;
|
|
background-color: #dee2e6;
|
|
top: 50%;
|
|
right: 8px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.orderDetailProduct__multiple__top {
|
|
padding: 12px 0;
|
|
}
|
|
.orderDetailProduct__item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 20px 16px;
|
|
}
|
|
.orderDetailProduct__item + .orderDetailProduct__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: calc(100% - 32px);
|
|
height: 1px;
|
|
top: 0;
|
|
left: 16px;
|
|
background-color: #f1f3f5;
|
|
}
|
|
.orderDetailProduct:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.orderDetailProduct__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.orderDetailProduct__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.orderDetailProduct__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.orderDetailProduct__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.orderDetailProduct__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.orderDetailProduct__info__status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderDetailProduct__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderDetailProduct__info__option {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderDetailProduct__info__quantity {
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.orderDetailProduct__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
.orderDetailProduct__btnControls {
|
|
padding: 0 16px 20px;
|
|
}
|
|
.orderDetailProduct__cancel {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.orderDetailProduct__cancel__num {
|
|
font-size: 13px;
|
|
color: #f03e3e;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.orderDetailProduct__cancel .nativeSelect {
|
|
margin-top: -14px;
|
|
}
|
|
.orderDetailProduct__cancel .nativeSelect select {
|
|
height: 32px;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
.orderDetailProduct--multiple .orderDetailProduct__item {
|
|
border-radius: 5px;
|
|
padding: 14px;
|
|
margin-bottom: 14px;
|
|
background-color: #f7f7f7;
|
|
}
|
|
.orderDetailProduct--multiple .orderDetailProduct__item + .orderDetailProduct__item::before {
|
|
display: none;
|
|
}
|
|
.orderDetailProduct .infoBox:last-child {
|
|
border: 1px solid #e9ecef;
|
|
border-width: 1px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.orderRefundReason {
|
|
margin-bottom: 20px;
|
|
}
|
|
.orderRefundReason__title {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.orderRefundReason__item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.orderRefundReason__item .select-box {
|
|
height: 50px;
|
|
}
|
|
.orderRefundReason__item .nice-select {
|
|
height: 50px;
|
|
line-height: 48px;
|
|
}
|
|
.orderRefundReason__item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.orderRefundReason__item .custom-radio-container {
|
|
flex-wrap: wrap;
|
|
padding: 6px 0;
|
|
row-gap: 16px;
|
|
-moz-column-gap: 16px;
|
|
column-gap: 16px;
|
|
}
|
|
.orderRefundReason__item > .textarea {
|
|
display: block;
|
|
}
|
|
.orderRefundReason__item > .select-box,
|
|
.orderRefundReason__item > .input-text,
|
|
.orderRefundReason__item > .textarea {
|
|
margin-bottom: 10px;
|
|
}
|
|
.orderRefundReason__itemTitle {
|
|
display: block;
|
|
color: #666968;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
.orderRefundReason:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.myQnaList__top {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
-webkit-appearance: none;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
.myQnaList__top::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.myQnaList__top__chevron {
|
|
position: absolute;
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-right: 1px solid #495057;
|
|
border-bottom: 1px solid #495057;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(calc(-50% - 6px)) rotate(45deg);
|
|
}
|
|
.myQnaList__item {
|
|
position: relative;
|
|
align-items: flex-start;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
-webkit-appearance: none;
|
|
flex-wrap: wrap;
|
|
}
|
|
.myQnaList__item[open] {
|
|
padding-bottom: 0;
|
|
}
|
|
.myQnaList__item[open] .myQnaList__top__chevron {
|
|
transform: translateY(calc(-50% + 6px)) rotate(-135deg);
|
|
}
|
|
.myQnaList:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.myQnaList__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.myQnaList__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.myQnaList__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.myQnaList__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.myQnaList__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.myQnaList__info {
|
|
position: relative;
|
|
height: 85px;
|
|
}
|
|
.myQnaList__info__name {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
line-height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.myQnaList__info__question {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
padding-right: 36px;
|
|
}
|
|
.myQnaList__info__status {
|
|
position: absolute;
|
|
bottom: 3px;
|
|
left: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
line-height: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.myQnaList__info__date {
|
|
position: relative;
|
|
margin-left: 20px;
|
|
}
|
|
.myQnaList__info__date::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: #d1d6d8;
|
|
left: -10px;
|
|
top: 2px;
|
|
}
|
|
.myQnaList__answer {
|
|
position: relative;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
border-top: 1px solid #f1f3f5;
|
|
background-color: #fafafa;
|
|
}
|
|
.myQnaList__answer__badge {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background-color: #808080;
|
|
display: inline-block;
|
|
line-height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
.myQnaList__answer__question {
|
|
font-size: 14px;
|
|
margin-top: 28px;
|
|
margin-bottom: 12px;
|
|
padding: 0 4px;
|
|
}
|
|
.myQnaList__answer__reply {
|
|
background-color: #f2f2f2;
|
|
border-radius: 5px;
|
|
padding: 12px 14px;
|
|
font-size: 14px;
|
|
color: #50514f;
|
|
}
|
|
.myQnaList__answer__reply__text {
|
|
line-height: 24px;
|
|
}
|
|
.myQnaList__answer .textBtns {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
.myQnaList--noImage .myQnaList__right {
|
|
margin-left: 0;
|
|
}
|
|
.myQnaList--noImage .myQnaList__info__question {
|
|
margin-bottom: 8px;
|
|
}
|
|
.myQnaList--noImage .myQnaList__info {
|
|
height: auto;
|
|
}
|
|
.myQnaList--noImage .myQnaList__info__status {
|
|
position: static;
|
|
}
|
|
|
|
.myQnaEdit {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
}
|
|
|
|
.myContactList .myReviewItem__thumbs {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.eventList {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
}
|
|
.eventList__item {
|
|
display: block;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.eventList__item:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.eventList__item:first-of-type {
|
|
padding-top: 8px;
|
|
}
|
|
.eventList__top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.eventList__badge {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
border: 1px solid #495057;
|
|
background-color: #f7f7f7;
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.eventList__badge--progress {
|
|
color: #339af0;
|
|
background-color: #f6fbff;
|
|
border: 1px solid #339af0;
|
|
}
|
|
.eventList__badge--closed {
|
|
color: #7e8282;
|
|
background-color: white;
|
|
border: 1px solid #7e8282;
|
|
}
|
|
.eventList__title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #030507;
|
|
}
|
|
.eventList__date {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
}
|
|
.eventList__list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 4px;
|
|
}
|
|
.eventList__list li {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
}
|
|
.eventList__list li + li::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 10px;
|
|
background-color: currentColor;
|
|
margin: 0 8px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.detailTop {
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
min-height: 44px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #212529;
|
|
}
|
|
.detailTop__title {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
}
|
|
.detailTop__title em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #4dabf7;
|
|
}
|
|
|
|
.userNoticeSection {
|
|
min-height: 44px;
|
|
padding: 12px 16px;
|
|
background-color: #f0f8ff;
|
|
}
|
|
.userNoticeSection__text {
|
|
font-size: 15px;
|
|
color: #1c7ed6;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.userNoticeSection__text .misc {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #1c7ed6;
|
|
}
|
|
.userNoticeSection__text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.userNoticeSection__text--question {
|
|
font-size: 16px;
|
|
}
|
|
.userNoticeSection__subText {
|
|
font-size: 14px;
|
|
color: #16191d;
|
|
font-weight: 400;
|
|
margin-bottom: 16px;
|
|
}
|
|
.userNoticeSection__subText:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.userNoticeSection__subText em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
}
|
|
.userNoticeSection .custom-radio-container {
|
|
-moz-column-gap: 24px;
|
|
column-gap: 24px;
|
|
padding-top: 12px;
|
|
}
|
|
.userNoticeSection--giftAsk {
|
|
background-color: #fafafa;
|
|
border-top: 1px solid #ededed;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
.userNoticeSection--giftAsk .userNoticeSection__text {
|
|
color: #0d0f12;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.deliveryCycle {
|
|
border: 1px solid #e0e0e0;
|
|
padding: 20px 16px 14px;
|
|
margin-bottom: 12px;
|
|
border-radius: 6px;
|
|
background-color: #ffffff;
|
|
}
|
|
.deliveryCycle-description {
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
font-size: 15px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.deliveryCycle .custom-radio-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin-bottom: 16px;
|
|
-moz-column-gap: 16px !important;
|
|
column-gap: 16px !important;
|
|
row-gap: 16px !important;
|
|
}
|
|
.deliveryCycle__wrapper {
|
|
padding: 16px;
|
|
}
|
|
|
|
.personalPayment {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
-moz-column-gap: 12px;
|
|
column-gap: 12px;
|
|
row-gap: 34px;
|
|
margin-bottom: 80px;
|
|
border-top: 1px solid #495057;
|
|
padding: 16px;
|
|
}
|
|
.personalPayment__period {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
}
|
|
.personalPayment__no-result {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 72px 0 60px;
|
|
grid-column: span 4;
|
|
}
|
|
.personalPayment__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
.personalPayment .product-unit-price__current {
|
|
font-size: 16px;
|
|
}
|
|
.personalPayment .product-unit-info {
|
|
margin-top: 8px;
|
|
}
|
|
.personalPayment .product-unit-info__inner {
|
|
padding-top: 0;
|
|
}
|
|
.personalPayment .product-unit-price {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.myPageMain .sub-box {
|
|
position: relative;
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
.myPageMain__logout {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #dee2e6;
|
|
color: #343a40;
|
|
height: 44px;
|
|
border-radius: 5px;
|
|
gap: 4px;
|
|
font-size: 15px;
|
|
}
|
|
.myPageMain__innerTitle {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
.myPageMain__more {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 18px;
|
|
color: #495057;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.myPageMain__more::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.myPageMain__btnContainer {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
.myPageMain__btnContainer .btn {
|
|
height: 44px;
|
|
flex: 1;
|
|
}
|
|
.myPageMain__menuTitle {
|
|
font-size: 15px;
|
|
color: #868e96;
|
|
margin-bottom: 12px;
|
|
}
|
|
.myPageMain__menuList li a {
|
|
position: relative;
|
|
display: block;
|
|
padding: 14px 0;
|
|
font-size: 16px;
|
|
}
|
|
.myPageMain__menuList li a::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
right: 4px;
|
|
top: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
.myPageMain__menuList li + li {
|
|
border-top: 1px solid #f1f3f5;
|
|
}
|
|
|
|
.member-rank-summary {
|
|
background-color: #ffffff;
|
|
}
|
|
.member-rank-summary__top {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 70px;
|
|
padding: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.member-rank-summary__bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 120px;
|
|
border-top: 1px solid #f1f3f5;
|
|
padding-top: 10px;
|
|
}
|
|
.member-rank-summary__icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 16px;
|
|
}
|
|
.member-rank-summary__user {
|
|
margin-right: auto;
|
|
}
|
|
.member-rank-summary__rank {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.035em;
|
|
color: #495057;
|
|
}
|
|
.member-rank-summary__name {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.035em;
|
|
color: #0d0f12;
|
|
}
|
|
.member-rank-summary__name .append {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
.member-rank-summary__benefit-link {
|
|
color: #343a40;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
letter-spacing: -0.035em;
|
|
padding: 4px 16px;
|
|
border: 1px solid #b1b6b9;
|
|
border-radius: 21px;
|
|
background-color: #ffffff;
|
|
}
|
|
.member-rank-summary__benefit-link:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
.member-rank-summary__summary {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
.member-rank-summary__summary-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.member-rank-summary__summary-item > img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.member-rank-summary__summary-item + .member-rank-summary__summary-item {
|
|
position: relative;
|
|
margin-left: 20px;
|
|
}
|
|
.member-rank-summary__summary-item + .member-rank-summary__summary-item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 1px;
|
|
height: 34px;
|
|
background-color: #e9ecef;
|
|
top: 50%;
|
|
left: -10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.member-rank-summary__summary-item img {
|
|
margin-bottom: 12px;
|
|
}
|
|
.member-rank-summary__summary-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
color: #343a40;
|
|
margin-bottom: 4px;
|
|
}
|
|
.member-rank-summary__summary-numberContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
}
|
|
.member-rank-summary__summary-number {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
color: #16191d;
|
|
}
|
|
.member-rank-summary__summary-numberUnit {
|
|
font-size: 15px;
|
|
color: #495057;
|
|
margin-left: 2px;
|
|
margin-top: 1px;
|
|
}
|
|
.member-rank-summary__summary-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
line-height: 2;
|
|
background-color: #f8fafb;
|
|
color: #343a40;
|
|
min-height: 80px;
|
|
width: 280px;
|
|
}
|
|
.member-rank-summary__summary-info em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #f03e3e;
|
|
}
|
|
|
|
.orderProgress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
min-height: 140px;
|
|
}
|
|
.orderProgress__list {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.orderProgress__list li {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.orderProgress__list li + li::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 1px solid #979b9d;
|
|
border-right: 1px solid #979b9d;
|
|
top: 9px;
|
|
left: -7px;
|
|
transform: rotate(45deg);
|
|
}
|
|
.orderProgress__list li.current .orderProgress__num {
|
|
color: #228be6;
|
|
}
|
|
.orderProgress__list li.current .orderProgress__text {
|
|
font-weight: 500;
|
|
color: #252521;
|
|
}
|
|
.orderProgress__num {
|
|
display: block;
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
margin-bottom: 16px;
|
|
font-weight: 700;
|
|
color: #adb5bd;
|
|
}
|
|
.orderProgress__text {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #868e96;
|
|
}
|
|
|
|
.wishList__btnControls {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.wishList__btnControls .gift-btn {
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
.wishList__btnControls .gift-btn::before {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.wishList__btnControls .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.quickReviewItem {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
}
|
|
.quickReviewItem:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.quickReviewItem__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.quickReviewItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.quickReviewItem__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.quickReviewItem__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.quickReviewItem__right {
|
|
flex-grow: 1;
|
|
margin-left: 10px;
|
|
}
|
|
.quickReviewItem__info__name {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 20px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.quickReviewItem__info__option {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 6px;
|
|
}
|
|
.quickReviewItem__info__dot {
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.customerMain .sub-box {
|
|
position: relative;
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
.customerMain__innerTitle {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
.customerMain__more {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 18px;
|
|
color: #495057;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.customerMain__more::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.customerMain__boardList > li {
|
|
border-top: 1px solid #f1f3f5;
|
|
}
|
|
.customerMain__boardList > li a,
|
|
.customerMain__boardList > li details {
|
|
position: relative;
|
|
display: block;
|
|
padding: 12px 0;
|
|
font-size: 14px;
|
|
}
|
|
.customerMain__boardList > li summary {
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.customerMain__boardList > li summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.customerMain__boardList > li .customerMain__boardTitle {
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.customerMain__boardList > li details[open] {
|
|
padding-bottom: 0;
|
|
}
|
|
.customerMain__boardList > li summary {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.customerMain__boardList > li .icon_new-post,
|
|
.customerMain__boardList > li .icon_hot-post {
|
|
margin-left: 2px;
|
|
vertical-align: top;
|
|
margin-top: 3px;
|
|
}
|
|
.customerMain__boardList > li .icon_notice-speaker {
|
|
margin-right: 4px;
|
|
vertical-align: top;
|
|
margin-top: 3px;
|
|
}
|
|
.customerMain__boardList > li:last-child {
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
.customerMain__boardCategory {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.customerMain__boardDate {
|
|
display: block;
|
|
color: #7e8282;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.customerMain__boardFixed {
|
|
position: relative;
|
|
}
|
|
.customerMain__boardFixed::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
left: -16px;
|
|
right: -16px;
|
|
top: 0;
|
|
background-color: #f7f7f7;
|
|
bottom: -1px;
|
|
}
|
|
.customerMain__boardFixed + .customerMain__boardFixed {
|
|
border-color: #ededed !important;
|
|
}
|
|
.customerMain__boardFixed .customerMain__boardContent {
|
|
border-top: 1px solid #ededed;
|
|
}
|
|
.customerMain__boardFixed .customerMain__boardContent::before {
|
|
background-color: #f2f2f2;
|
|
}
|
|
.customerMain__boardContent {
|
|
position: relative;
|
|
font-size: 13px;
|
|
white-space: normal;
|
|
line-height: 22px;
|
|
padding: 14px 0;
|
|
margin-top: 10px;
|
|
z-index: 0;
|
|
border-top: 1px solid #f1f3f5;
|
|
color: #030507;
|
|
padding-left: 26px;
|
|
}
|
|
.customerMain__boardContent::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
left: -16px;
|
|
right: -16px;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
background-color: #fafafa;
|
|
}
|
|
.customerMain__boardContent .icon_reply {
|
|
position: absolute;
|
|
left: 6px;
|
|
top: 18px;
|
|
}
|
|
|
|
.btnTabLinks {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
padding: 8px;
|
|
}
|
|
.btnTabLinks__link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 48px;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
border-radius: 4px;
|
|
border: 1px solid #dee2e6;
|
|
padding-left: 6px;
|
|
}
|
|
.btnTabLinks__link::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: rotate(45deg);
|
|
margin-left: 6px;
|
|
margin-top: 0px;
|
|
}
|
|
.btnTabLinks__link:active {
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.customerFaq .sub-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
.customerNotice .sub-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
.orderNumCheck .sub-box {
|
|
padding: 16px;
|
|
}
|
|
.orderNumCheck .custom-radio-container {
|
|
margin-bottom: 10px;
|
|
}
|
|
.orderNumCheck .custom-radio {
|
|
width: 100%;
|
|
}
|
|
.orderNumCheck .custom-radio label {
|
|
width: 100%;
|
|
}
|
|
.orderNumCheck__orderNum {
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
color: #7e8282;
|
|
margin-left: 2px;
|
|
}
|
|
.orderNumCheck .b-checkbox-container.vertical .b-checkbox + .b-checkbox {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.b-checkbox.checkbox .inner-product {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
}
|
|
.b-checkbox.checkbox .inner-product img {
|
|
width: 85px;
|
|
height: 85px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 2px;
|
|
margin-left: 6px;
|
|
}
|
|
.b-checkbox.checkbox .inner-product__info {
|
|
display: block;
|
|
margin-left: 8px;
|
|
}
|
|
.b-checkbox.checkbox .inner-product__info-status {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.b-checkbox.checkbox .inner-product__info-title {
|
|
display: block;
|
|
font-size: 16px;
|
|
color: #0d0f12;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.b-checkbox.checkbox .inner-product__info-option {
|
|
font-size: 13px;
|
|
color: #979b9d;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.productManual {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
padding: 16px;
|
|
}
|
|
.productManual + .productManual {
|
|
border-top: 1px solid #f1f3f5;
|
|
}
|
|
.productManual__left {
|
|
display: flex;
|
|
margin-right: auto;
|
|
align-items: flex-start;
|
|
}
|
|
.productManual__left img {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 2px;
|
|
border-radius: 4px;
|
|
margin-right: 10px;
|
|
}
|
|
.productManual__info {
|
|
height: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.productManual__info-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding-right: 50px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.productManual__info-download {
|
|
font-size: 12px;
|
|
color: #50514f;
|
|
margin-bottom: 2px;
|
|
}
|
|
.productManual__btn {
|
|
position: absolute;
|
|
padding: 12px;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.userGuide .sub-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
.userGuideList {
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
.userGuideList__top {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
-webkit-appearance: none;
|
|
padding: 0 8px;
|
|
cursor: pointer;
|
|
height: 54px;
|
|
width: 100%;
|
|
}
|
|
.userGuideList__top::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.userGuideList__top__chevron {
|
|
position: absolute;
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-right: 1px solid #495057;
|
|
border-bottom: 1px solid #495057;
|
|
right: 4px;
|
|
top: 50%;
|
|
transform: translateY(calc(-50% - 4px)) rotate(45deg);
|
|
}
|
|
.userGuideList__item {
|
|
position: relative;
|
|
align-items: flex-start;
|
|
border-bottom: 1px solid #dee2e6;
|
|
-webkit-appearance: none;
|
|
flex-wrap: wrap;
|
|
}
|
|
.userGuideList__item[open] {
|
|
padding-bottom: 0;
|
|
}
|
|
.userGuideList__item[open] .userGuideList__top__chevron {
|
|
transform: translateY(calc(-50% + 4px)) rotate(-135deg);
|
|
}
|
|
.userGuideList:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.userGuideList__topInner {
|
|
flex-grow: 1;
|
|
}
|
|
.userGuideList__info {
|
|
position: relative;
|
|
}
|
|
.userGuideList__info__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
padding-right: 36px;
|
|
height: 54px;
|
|
line-height: 54px;
|
|
}
|
|
.userGuideList__content {
|
|
padding: 14px 10px;
|
|
background-color: #fafafa;
|
|
border-top: 1px solid #e9ecef;
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.userGuideList__content p {
|
|
margin-bottom: 16px;
|
|
}
|
|
.userGuideList__content ul,
|
|
.userGuideList__content ol {
|
|
margin-bottom: 16px;
|
|
}
|
|
.userGuideList__content ul li,
|
|
.userGuideList__content ol li {
|
|
margin-bottom: 4px;
|
|
}
|
|
.userGuideList__content em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
.userGuideList__content em.blue {
|
|
color: #228be6;
|
|
}
|
|
.userGuideList__innerSubTitle {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #50514f;
|
|
margin-bottom: 4px;
|
|
}
|
|
.userGuideList__innerTitle {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
color: #3a3a37;
|
|
}
|
|
.userGuideList__innerTitle ~ .userGuideList__innerTitle {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.suggestionImage {
|
|
margin-bottom: 20px;
|
|
}
|
|
.suggestionImage img {
|
|
width: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.login {
|
|
padding: 16px;
|
|
}
|
|
.login .input-text {
|
|
height: 56px;
|
|
}
|
|
.login__inputBox {
|
|
margin-bottom: 30px;
|
|
}
|
|
.login__inputBox > * {
|
|
margin-bottom: 5px;
|
|
}
|
|
.login__inputBox .input-text {
|
|
font-size: 16px;
|
|
}
|
|
.login__inputBox .input-text + .input-text {
|
|
margin-top: 12px;
|
|
}
|
|
.login__inputBox__alertText {
|
|
color: #f03e3e;
|
|
padding-left: 6px;
|
|
padding-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
.login__inputBox__alertText:last-of-type {
|
|
padding-bottom: 0;
|
|
}
|
|
.login__inputBox .inputWithBtn .btn {
|
|
flex-shrink: 0;
|
|
width: 142px;
|
|
height: 56px;
|
|
}
|
|
.login__inputBox .inputTimer {
|
|
width: 100%;
|
|
}
|
|
.login__misc {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.login__misc__link {
|
|
margin-left: auto;
|
|
font-size: 15px;
|
|
color: #7e8282;
|
|
}
|
|
.login__loginBtn.btn {
|
|
flex: 1;
|
|
font-size: 20px;
|
|
}
|
|
.login__loginBtnContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.login__signIn {
|
|
font-size: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px 0 24px 0;
|
|
margin-bottom: 16px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.login__signIn__text {
|
|
color: #868e96;
|
|
}
|
|
.login__signIn__link {
|
|
font-weight: 500;
|
|
color: #212529;
|
|
text-decoration: underline;
|
|
}
|
|
.login__sns__btn {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
gap: 8px;
|
|
height: 60px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
background-color: #f0f0f0;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
.login__sns__btn.kakao {
|
|
background-color: #FEE500;
|
|
color: #343a40;
|
|
}
|
|
.login__sns__btn.naver {
|
|
background-color: #00C73C;
|
|
color: #ffffff;
|
|
}
|
|
.login__sns__btn .icon {
|
|
margin-top: 2px;
|
|
}
|
|
.login__sns__btn + .login__sns__btn {
|
|
margin-top: 12px;
|
|
}
|
|
.login__findResult {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
color: #212529;
|
|
min-height: 140px;
|
|
border: 1px solid #f1f3f5;
|
|
}
|
|
.login__findResult em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
}
|
|
.login__btnContainer-half {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.login__btnContainer-half .btn {
|
|
flex-grow: 1;
|
|
font-size: 18px;
|
|
}
|
|
.login__logoContainer {
|
|
text-align: center;
|
|
padding: 16px 0 28px;
|
|
}
|
|
.login__logoContainer img {
|
|
display: inline-block;
|
|
}
|
|
|
|
.pwChange {
|
|
padding: 40px 20px;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
.pwChange__wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 20px 0;
|
|
}
|
|
.pwChange__tit {
|
|
margin-inline: auto;
|
|
margin-bottom: 40px;
|
|
max-width: 440px;
|
|
}
|
|
.pwChange__img {
|
|
width: 140px;
|
|
margin-inline: auto;
|
|
margin-bottom: 28px;
|
|
}
|
|
.pwChange__txt__top {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: #1971c2;
|
|
line-height: 1.2;
|
|
}
|
|
.pwChange__txt__title {
|
|
text-align: center;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
line-height: 1.2;
|
|
color: #212529;
|
|
}
|
|
.pwChange__txt__text {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #495057;
|
|
line-height: 1.6;
|
|
word-break: keep-all;
|
|
}
|
|
.pwChange__txt__text em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #1c7ed6;
|
|
}
|
|
.pwChange__btn {
|
|
max-width: 440px;
|
|
margin-inline: auto;
|
|
}
|
|
.pwChange__btn .btn {
|
|
line-height: 1;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
.pwChange__btn .btn em {
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
color: #868e96;
|
|
}
|
|
|
|
.signUpTerms {
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
.signUpTerms__agreeText {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
padding-left: 14px;
|
|
line-height: 1;
|
|
padding-bottom: 16px;
|
|
margin-bottom: 16px;
|
|
color: #3a3a37;
|
|
text-align: center;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.signUpTerms__all {
|
|
margin-bottom: 28px;
|
|
}
|
|
.signUpTerms__all .b-checkbox-container {
|
|
padding: 14px 12px;
|
|
border-radius: 4px;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #f1f3f5;
|
|
color: #0d0f12;
|
|
font-weight: 700;
|
|
}
|
|
.signUpTerms__all .b-checkbox.checkbox {
|
|
width: 100%;
|
|
}
|
|
.signUpTerms__all .b-checkbox.checkbox .control-label {
|
|
padding-left: 10px;
|
|
}
|
|
.signUpTerms__all__description {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #7e8282;
|
|
line-height: 18px;
|
|
padding-left: 16px;
|
|
}
|
|
.signUpTerms__all__description .important {
|
|
color: #666968;
|
|
font-weight: 500;
|
|
}
|
|
.signUpTerms__all__description p {
|
|
position: relative;
|
|
padding-left: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.signUpTerms__all__description p::before {
|
|
position: absolute;
|
|
content: "•";
|
|
font-size: 12px;
|
|
left: 0;
|
|
color: #ced4da;
|
|
}
|
|
.signUpTerms__gcone {
|
|
border-radius: 4px;
|
|
padding: 14px 18px;
|
|
background-color: #fafafa;
|
|
margin-bottom: 12px;
|
|
}
|
|
.signUpTerms__gcone__link {
|
|
display: block;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: #343a40;
|
|
margin-bottom: 12px;
|
|
}
|
|
.signUpTerms__gcone__link p {
|
|
display: inline;
|
|
}
|
|
.signUpTerms__gcone__link svg {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: #b1b6b9;
|
|
margin-left: 3px;
|
|
vertical-align: top;
|
|
margin-top: 8px;
|
|
}
|
|
.signUpTerms__gcone__link em {
|
|
font-style: normal;
|
|
color: #3053bc;
|
|
}
|
|
.signUpTerms__gcone__text {
|
|
font-size: 13px;
|
|
color: #50514f;
|
|
}
|
|
.signUpTerms__misc {
|
|
border: 1px solid #e9ecef;
|
|
padding: 16px 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.signUpTerms__misc__item {
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
}
|
|
.signUpTerms__misc__item .b-checkbox-container {
|
|
color: #343a40;
|
|
font-weight: 500;
|
|
}
|
|
.signUpTerms__misc__item .b-checkbox.checkbox .control-label {
|
|
padding-left: 10px;
|
|
}
|
|
.signUpTerms__misc__item:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.signUpTerms__misc__item .b-checkbox.checkbox {
|
|
align-items: flex-start;
|
|
}
|
|
.signUpTerms__misc__item--hasDetail {
|
|
padding-right: 44px;
|
|
}
|
|
.signUpTerms__misc__detail {
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: 4px;
|
|
padding-right: 10px;
|
|
top: 1px;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
}
|
|
.signUpTerms__misc__detail::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #7e8282;
|
|
border-right: 1px solid #7e8282;
|
|
right: 4px;
|
|
top: 50%;
|
|
transform: rotate(45deg) translateY(calc(-50% - 1px));
|
|
}
|
|
.signUpTerms__misc__marketing {
|
|
padding: 4px 0 4px 32px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: #7e8282;
|
|
word-break: keep-all;
|
|
}
|
|
.signUpTerms__misc__marketing em {
|
|
font-style: normal;
|
|
color: #f03e3e;
|
|
}
|
|
|
|
.terms_wrap {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.terms_box {
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.terms_box:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
.terms_box h4 {
|
|
color: #333;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.terms_box p,
|
|
.terms_box li,
|
|
.terms_box dt,
|
|
.terms_box dd {
|
|
color: #666;
|
|
font-size: 13px;
|
|
}
|
|
.terms_box p {
|
|
margin-bottom: 10px;
|
|
}
|
|
.terms_box p.lg {
|
|
font-size: 15px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.terms_box p em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #404040;
|
|
}
|
|
.terms_box .listUp {
|
|
margin-bottom: 10px;
|
|
}
|
|
.terms_box .listUp > li {
|
|
margin-bottom: 8px;
|
|
}
|
|
.terms_box .listUp > li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.terms_box .listUpSub {
|
|
padding: 4px 10px;
|
|
}
|
|
.terms_box .listUpSub > li {
|
|
margin-bottom: 2px;
|
|
}
|
|
.terms_box .listUpSub > li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.terms_box .table-list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.terms_box .table-list th,
|
|
.terms_box .table-list td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
}
|
|
.terms_box .table-list th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
.terms_box .terms-table {
|
|
padding: 12px 0 20px;
|
|
}
|
|
.terms_box .terms-table .tit {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
.terms_box a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.signUp {
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
min-height: calc(100vh - 188px);
|
|
min-height: calc(100svh - 188px);
|
|
}
|
|
|
|
.rejoinId {
|
|
position: relative;
|
|
color: #339af0;
|
|
font-size: 12px;
|
|
margin-left: 4px;
|
|
margin-bottom: 2px;
|
|
padding-right: 8px;
|
|
text-decoration: underline;
|
|
text-decoration-color: #63b2f3;
|
|
}
|
|
.rejoinId::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #339af0;
|
|
border-right: 1px solid #339af0;
|
|
right: 2px;
|
|
top: 50%;
|
|
transform: rotate(45deg) translateY(calc(-50% - 1px));
|
|
}
|
|
|
|
.rejoinSelect {
|
|
border: 1px solid #dee2e6;
|
|
padding: 18px 16px 26px;
|
|
border-radius: 4px;
|
|
}
|
|
.rejoinSelect__title {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #1c7ed6;
|
|
margin-bottom: 24px;
|
|
}
|
|
.rejoinSelect__item {
|
|
position: relative;
|
|
display: flex;
|
|
line-height: 1;
|
|
}
|
|
.rejoinSelect__item + .rejoinSelect__item {
|
|
margin-top: 28px;
|
|
}
|
|
.rejoinSelect__item + .rejoinSelect__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
top: -14px;
|
|
left: 0;
|
|
}
|
|
.rejoinSelect__item__id {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
margin-right: 5px;
|
|
}
|
|
.rejoinSelect__item__info {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #666968;
|
|
}
|
|
.rejoinSelect__item__detail {
|
|
color: #7e8282;
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
line-height: 16px;
|
|
}
|
|
.rejoinSelect__item__detail em {
|
|
font-style: normal;
|
|
color: #666968;
|
|
}
|
|
.rejoinSelect__item__dot {
|
|
color: #50514f;
|
|
}
|
|
.rejoinSelect__item__line {
|
|
margin: 0 5px;
|
|
color: #b1b6b9;
|
|
}
|
|
.rejoinSelect__item .b-checkbox-container {
|
|
margin-top: 1px;
|
|
}
|
|
.rejoinSelect__item__right {
|
|
flex-grow: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.signUp-promotion .sub-box {
|
|
padding: 16px;
|
|
background-color: #ffffff;
|
|
}
|
|
.signUp-promotion__introBox {
|
|
text-align: center;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #f1f3f5;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.signUp-promotion__introBox__title {
|
|
color: #212529;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
word-break: keep-all;
|
|
}
|
|
.signUp-promotion__introBox__subTitle {
|
|
color: #495057;
|
|
font-size: 14px;
|
|
}
|
|
.signUp-promotion__introBox.second {
|
|
margin-bottom: 24px;
|
|
}
|
|
.signUp-promotion__introBox.second .signUp-promotion__introBox__title {
|
|
font-size: 14px;
|
|
color: #343a40;
|
|
}
|
|
.signUp-promotion__introBox.second em {
|
|
font-style: normal;
|
|
color: #3053bc;
|
|
}
|
|
.signUp-promotion__introBoxWrapper {
|
|
margin-bottom: 24px;
|
|
}
|
|
.signUp-promotion__col-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.signUp-promotion__col-2 .btn {
|
|
height: 64px;
|
|
}
|
|
.signUp-promotion__col-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.signUp-promotion__col-3 .btn {
|
|
height: 64px;
|
|
}
|
|
.signUp-promotion .login__sns {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.signUp-promotion .signUpLink .btn {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
.signUp-promotion .signUpLink .login__sns__btn {
|
|
height: 52px;
|
|
font-size: 16px;
|
|
}
|
|
.signUp-promotion .signUpLink .login__sns__btn + .login__sns__btn {
|
|
margin-top: 0;
|
|
}
|
|
.signUp-promotion__col-5 {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.signUp-promotion__section {
|
|
margin-bottom: 40px;
|
|
}
|
|
.signUp-promotion__section__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
margin-bottom: 20px;
|
|
}
|
|
.signUp-promotion__benefitBox {
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
border: 1px solid #e9ecef;
|
|
padding: 20px 6px;
|
|
line-height: 1.4;
|
|
}
|
|
.signUp-promotion__benefitBox svg {
|
|
margin-inline: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.signUp-promotion__benefitBox__title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
margin-bottom: 20px;
|
|
word-break: keep-all;
|
|
}
|
|
.signUp-promotion__benefitBox__subTitle {
|
|
font-size: 11px;
|
|
font-weight: 300;
|
|
color: #7e8282;
|
|
word-break: keep-all;
|
|
}
|
|
.signUp-promotion__gcone {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 234px;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
margin-bottom: 40px;
|
|
background-color: #f8f9fa;
|
|
padding: 24px 20px 32px;
|
|
}
|
|
.signUp-promotion__gcone__inner {
|
|
text-align: center;
|
|
}
|
|
.signUp-promotion__gcone__img {
|
|
display: inline-block;
|
|
width: 107px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.signUp-promotion__gcone__text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.03em;
|
|
color: #343a40;
|
|
margin-bottom: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
.signUp-promotion__gcone__text em {
|
|
font-style: normal;
|
|
color: #3053bc;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-right: 2px;
|
|
}
|
|
.signUp-promotion__gcone__button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
color: #ffffff;
|
|
background-color: #343a40;
|
|
height: 44px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border-radius: 100px;
|
|
min-width: 180px;
|
|
}
|
|
.signUp-promotion__gcone__button:hover {
|
|
background-color: #2d3238;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.signUp-promotion__brandBox {
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
border: 1px solid #e9ecef;
|
|
padding: 24px 8px;
|
|
min-height: 168px;
|
|
}
|
|
.signUp-promotion__brandBox img {
|
|
margin-inline: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.signUp-promotion__brandBox__subTitle {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
word-break: keep-all;
|
|
margin-bottom: 2px;
|
|
min-height: 39px;
|
|
}
|
|
.signUp-promotion__brandBox__title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #343a40;
|
|
}
|
|
|
|
.signUpComplete {
|
|
max-width: 860px;
|
|
margin-inline: auto;
|
|
}
|
|
.signUpComplete__inner {
|
|
margin-bottom: 40px;
|
|
}
|
|
.signUpComplete__inner img {
|
|
margin-inline: auto;
|
|
margin-bottom: 16px;
|
|
width: 280px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.signUpComplete__box {
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
.signUpComplete__box__title {
|
|
font-size: 24px;
|
|
color: #0d0f12;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
.signUpComplete__box__text {
|
|
color: #16191d;
|
|
font-size: 13px;
|
|
}
|
|
.emailInput {
|
|
position: relative;
|
|
}
|
|
.emailInput__btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 8px;
|
|
transform: translateY(-50%);
|
|
color: #7e8282;
|
|
padding-right: 12px;
|
|
height: 100%;
|
|
}
|
|
.emailInput__btn::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
border-top: 4px solid #7e8282;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(calc(-50% + 1px));
|
|
}
|
|
.emailInput .input-text {
|
|
padding-right: 100px;
|
|
}
|
|
|
|
.cartOrder {
|
|
padding-bottom: 60px;
|
|
}
|
|
.cartOrder .sub-box {
|
|
padding: 16px;
|
|
}
|
|
.cartOrder__control {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.cartOrder__control .b-checkbox {
|
|
padding: 6px 0;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #212529;
|
|
}
|
|
.cartOrder__control__btnContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.cartOrder__control__btnContainer .btn {
|
|
height: 32px;
|
|
font-size: 13px;
|
|
padding: 0 12px;
|
|
}
|
|
.cartOrder__controlWrapper {
|
|
position: relative;
|
|
padding: 8px 16px;
|
|
background-color: #ffffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
.cartOrder__message {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cartItem {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 8px;
|
|
}
|
|
.cartItem .b-checkbox.checkbox {
|
|
font-size: 16px;
|
|
margin-right: 2px;
|
|
padding: 8px 0 8px 8px;
|
|
margin-left: -8px;
|
|
margin-top: -8px;
|
|
}
|
|
.cartItem__image {
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.cartItem__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.cartItem__productInfo {
|
|
margin-left: 8px;
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
}
|
|
.cartItem__productTitle {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
margin-bottom: 8px;
|
|
margin-right: 24px;
|
|
}
|
|
.cartItem__productOption {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
color: #50514f;
|
|
margin-bottom: 8px;
|
|
}
|
|
.cartItem__productOption .option-badge {
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
border-radius: 2px;
|
|
font-size: 11px;
|
|
background-color: #7e8282;
|
|
color: #ffffff;
|
|
}
|
|
.cartItem__productPrice {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
color: #16191d;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.cartItem__productPrice > .priceUnit {
|
|
position: relative;
|
|
font-size: 13px;
|
|
margin-left: 2px;
|
|
top: -1px;
|
|
font-weight: 500;
|
|
color: #343a40;
|
|
}
|
|
.cartItem__productDot {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #495057;
|
|
margin: 0 4px;
|
|
}
|
|
.cartItem__productQuantity {
|
|
font-size: 13px;
|
|
color: #212529;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.cartItem__productBottom {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cartItem__delete {
|
|
top: -4px;
|
|
right: -8px;
|
|
position: absolute;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.cartItem__delete:before, .cartItem__delete:after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 18px;
|
|
height: 2px;
|
|
background-color: #7e8282;
|
|
content: "";
|
|
}
|
|
.cartItem__delete::before {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
.cartItem__delete::after {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
.cartItem__miscControls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.cartItem__miscControls:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.cartItem__giftSelect {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 16px 12px;
|
|
border-radius: 5px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
.cartItem__giftSelectName {
|
|
font-size: 13px;
|
|
color: #212529;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.product-count {
|
|
background-color: #f9f9f9;
|
|
padding: 12px 20px;
|
|
margin-bottom: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.product-count__amount-top {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding-right: 24px;
|
|
}
|
|
.product-count__amount-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
word-break: keep-all;
|
|
}
|
|
.product-count__amount-delete {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(" ../images/icon_modal-close.png");
|
|
opacity: 0.75;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
top: 4px;
|
|
right: 2px;
|
|
}
|
|
.product-count__amount-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.product-count__amount-counter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border: 1px solid #e9ecef;
|
|
min-width: 92px;
|
|
height: 32px;
|
|
border-radius: 100px;
|
|
padding: 0 8px;
|
|
}
|
|
.product-count__amount-counter > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.product-count__amount-number {
|
|
font-weight: 500;
|
|
text-align: center;
|
|
min-width: 20px;
|
|
}
|
|
.product-count__amount-btn {
|
|
width: 24px;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
.product-count__amount-btn.plus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"></path></svg>');
|
|
}
|
|
.product-count__amount-btn.minus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"></path></svg>');
|
|
}
|
|
.product-count__amount-price-box > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.product-count__amount-monthly-price {
|
|
font-size: 12px;
|
|
color: #495057;
|
|
}
|
|
.product-count__amount-price {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.cartOrderBox__title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
margin-bottom: 32px;
|
|
}
|
|
.cartOrderBox__list {
|
|
margin-bottom: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
border-top: 1px dashed #dee2e6;
|
|
}
|
|
.cartOrderBox__list > li {
|
|
display: flex;
|
|
}
|
|
.cartOrderBox__list > li.cartOrderBox__miscItem {
|
|
background-color: #f8f9fa;
|
|
margin-bottom: 0;
|
|
padding: 4px 8px;
|
|
}
|
|
.cartOrderBox__list > li.cartOrderBox__miscItem.first {
|
|
padding-top: 12px;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
.cartOrderBox__list > li.cartOrderBox__miscItem.last {
|
|
padding-bottom: 12px;
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
.cartOrderBox__list > li + li {
|
|
margin-top: 12px;
|
|
}
|
|
.cartOrderBox__list--final {
|
|
border-top: 1px solid #495057;
|
|
border-bottom: 1px solid #495057;
|
|
}
|
|
.cartOrderBox__list__subList .cartOrderBox__th {
|
|
position: relative;
|
|
padding-left: 18px;
|
|
}
|
|
.cartOrderBox__list__subList .cartOrderBox__th::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-left: 2px solid #ced4da;
|
|
border-bottom: 2px solid #ced4da;
|
|
top: 3px;
|
|
left: 3px;
|
|
}
|
|
.cartOrderBox__list__subList .cartOrderBox__td {
|
|
color: #666968;
|
|
font-weight: 500;
|
|
}
|
|
.cartOrderBox__list__subList .cartOrderBox__td > .priceUnit {
|
|
color: #666968;
|
|
}
|
|
.cartOrderBox__discountMinus {
|
|
position: relative;
|
|
font-size: 14px;
|
|
margin-right: 4px;
|
|
top: -1px;
|
|
font-weight: 400;
|
|
color: #495057;
|
|
}
|
|
.cartOrderBox__th {
|
|
margin-right: auto;
|
|
font-size: 13px;
|
|
color: #212529;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.cartOrderBox__th .infoBtn {
|
|
margin-left: 4px;
|
|
}
|
|
.cartOrderBox__td {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.cartOrderBox__td > .priceUnit {
|
|
position: relative;
|
|
font-size: 13px;
|
|
margin-left: 2px;
|
|
top: -1px;
|
|
color: #343a40;
|
|
font-weight: 500;
|
|
}
|
|
.cartOrderBox__total {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cartOrderBox__total--final .cartOrderBox__totalTh {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
|
font-size: 22px;
|
|
}
|
|
.cartOrderBox__total--final .cartOrderBox__totalTd > .priceUnit {
|
|
font-size: 18px;
|
|
}
|
|
.cartOrderBox__totalTh {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-right: auto;
|
|
}
|
|
.cartOrderBox__totalTd {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
letter-spacing: -0.034em;
|
|
}
|
|
.cartOrderBox__totalTd > .priceUnit {
|
|
position: relative;
|
|
font-size: 16px;
|
|
margin-left: 2px;
|
|
top: -1px;
|
|
font-weight: 500;
|
|
}
|
|
.cartOrderBox__finalTitle {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.orderInfo {
|
|
padding-bottom: 40px;
|
|
}
|
|
.orderInfo__item {
|
|
position: relative;
|
|
padding: 16px;
|
|
}
|
|
.orderInfo__item .cartItem {
|
|
margin-bottom: 12px;
|
|
}
|
|
.orderInfo__item__couponSelect {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.orderInfo__item__couponSelect .nice-select {
|
|
width: 100%;
|
|
}
|
|
.orderInfo__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: calc(100% - 32px);
|
|
height: 1px;
|
|
background-color: #e9ecef;
|
|
top: 0;
|
|
left: 16px;
|
|
}
|
|
.orderInfo__item:first-child::before {
|
|
display: none;
|
|
}
|
|
.orderInfo__item--multiple .cartItem {
|
|
margin-left: 6px;
|
|
}
|
|
.orderInfo__item--multiple .cartItem__miscControls {
|
|
padding-left: 0;
|
|
}
|
|
.orderInfo__table:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.orderInfo__table > .table {
|
|
border-top: none;
|
|
box-shadow: none;
|
|
table-layout: fixed;
|
|
}
|
|
.orderInfo__table > .table tr {
|
|
border-bottom: none;
|
|
}
|
|
.orderInfo__table > .table th {
|
|
background-color: transparent;
|
|
height: 56px;
|
|
padding: 20px 8px 4px 2px;
|
|
vertical-align: top;
|
|
color: #0d0f12;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
}
|
|
.orderInfo__table > .table td {
|
|
background-color: transparent;
|
|
height: 34px;
|
|
padding: 4px 8px 4px 2px;
|
|
vertical-align: middle;
|
|
color: #0d0f12;
|
|
line-height: 1.2;
|
|
}
|
|
.orderInfo__table > .table .input-text {
|
|
font-size: 16px;
|
|
padding-left: 8px;
|
|
height: 52px;
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
.orderInfo__table > .table .inputWithBtn .btn {
|
|
flex-shrink: 0;
|
|
height: 52px;
|
|
}
|
|
.orderInfo__table > .table .inputHalf {
|
|
max-width: 320px;
|
|
}
|
|
.orderInfo__table > .table .inputHalf .nice-select {
|
|
height: 52px;
|
|
line-height: 50px;
|
|
font-size: 16px;
|
|
}
|
|
.orderInfo__table > .table .inputAddress .input-text {
|
|
max-width: 420px;
|
|
}
|
|
.orderInfo__table > .table .inputAddress__postalCode {
|
|
max-width: 320px;
|
|
}
|
|
.orderInfo__table > .table .inputAddress__postalCode .input-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.orderInfo__table > .table .inputAddress__postalCode .btn {
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
}
|
|
.orderInfo__table > .table .textarea {
|
|
max-width: 720px;
|
|
}
|
|
.orderInfo__table > .table .nice-select {
|
|
height: 52px;
|
|
line-height: 50px;
|
|
}
|
|
.orderInfo__table__address {
|
|
font-size: 13px;
|
|
}
|
|
.orderInfo__table__productPrice {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
}
|
|
.orderInfo__table__discountSub th {
|
|
color: #7e8282 !important;
|
|
}
|
|
.orderInfo__table__discountSub th span {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
.orderInfo__table__discountSub th span::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-left: 2px solid #ced4da;
|
|
border-bottom: 2px solid #ced4da;
|
|
top: 3px;
|
|
left: 3px;
|
|
}
|
|
.orderInfo__table__discountSub td {
|
|
color: #7e8282 !important;
|
|
}
|
|
.orderInfo__table--price th,
|
|
.orderInfo__table--price td {
|
|
font-size: 15px;
|
|
}
|
|
.orderInfo__table__sum {
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
.orderInfo__table__sum th,
|
|
.orderInfo__table__sum td {
|
|
font-size: 18px;
|
|
font-weight: 700 !important;
|
|
color: #0d0f12;
|
|
padding-top: 20px !important;
|
|
padding-bottom: 12px !important;
|
|
}
|
|
.orderInfo__table__misc {
|
|
font-size: 12px;
|
|
color: #666968;
|
|
}
|
|
.orderInfo__table__cashCancel {
|
|
margin-top: 8px;
|
|
}
|
|
.orderInfo__mileage {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.orderInfo__mileage .inputWithBtn {
|
|
margin-bottom: 8px;
|
|
}
|
|
.orderInfo__mileage .input-text {
|
|
background-color: #f5f5f5;
|
|
text-align: right;
|
|
}
|
|
.orderInfo__mileageText {
|
|
font-size: 14px;
|
|
color: #0d0f12;
|
|
}
|
|
.orderInfo__mileageText em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
.orderInfo__btnContainer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.orderInfo__orderInfoTop {
|
|
margin-bottom: 20px;
|
|
}
|
|
.orderInfo__orderInfoTop .textInfo {
|
|
text-align: center;
|
|
}
|
|
|
|
.deliveryInfo {
|
|
position: relative;
|
|
}
|
|
.deliveryInfo__info {
|
|
margin-bottom: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.deliveryInfo__info__name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
}
|
|
.deliveryInfo__info__phone {
|
|
position: relative;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
padding-left: 16px;
|
|
}
|
|
.deliveryInfo__info__phone::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: #ced4da;
|
|
top: 50%;
|
|
left: 8px;
|
|
transform: translateY(calc(-50% + 1px));
|
|
}
|
|
.deliveryInfo__address {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #495057;
|
|
}
|
|
.deliveryInfo__message {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.deliveryInfo__message .nice-select {
|
|
width: 100%;
|
|
}
|
|
.deliveryInfo__changeBtn {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: 0;
|
|
}
|
|
.deliveryInfo--multiple {
|
|
padding: 12px;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #eaeced;
|
|
border-radius: 5px;
|
|
}
|
|
.deliveryInfo--multiple .deliveryInfo__changeBtn {
|
|
top: 12px;
|
|
right: 12px;
|
|
}
|
|
|
|
.addressManagePop {
|
|
padding-bottom: 100px;
|
|
background-color: inherit;
|
|
}
|
|
.addressManagePop .sub-box {
|
|
padding: 16px;
|
|
}
|
|
|
|
.cashReceipt-borderTop {
|
|
border-top: 1px solid #d7dadc;
|
|
}
|
|
|
|
.cashReceipt-borderBottom {
|
|
border-bottom: 1px solid #d7dadc;
|
|
}
|
|
|
|
.cashReceipt-borderTopBottom {
|
|
border-top: 1px solid #d7dadc;
|
|
border-bottom: 1px solid #d7dadc;
|
|
}
|
|
|
|
.cashReceipt-container {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.easyPayCashReceipt {
|
|
background-color: #f8f9fa;
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
border: 1px solid #eaeced;
|
|
}
|
|
.easyPayCashReceipt .custom-radio-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.gcpayEvent {
|
|
background-color: #f0f8ff;
|
|
border-radius: 6px;
|
|
padding: 24px 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.gcpayEvent__icon {
|
|
margin-inline: auto;
|
|
width: 100px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.gcpayEvent__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1c7ed6;
|
|
text-align: center;
|
|
margin-bottom: 8px;
|
|
word-break: keep-all;
|
|
}
|
|
.gcpayEvent__title .misc {
|
|
font-size: 14px;
|
|
color: #1c7ed6;
|
|
font-weight: 400;
|
|
}
|
|
.gcpayEvent__content {
|
|
font-size: 13px;
|
|
color: #343a40;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
.order-method {
|
|
padding: 12px 0;
|
|
border-top: 1px solid #495057;
|
|
}
|
|
.order-method .custom-radio label {
|
|
width: 100%;
|
|
}
|
|
.order-method > .custom-radio {
|
|
padding: 24px 0;
|
|
border-top: 1px solid #e3e3e3;
|
|
}
|
|
.order-method > .custom-radio:first-child {
|
|
border-top: none;
|
|
}
|
|
.order-method .b-checkbox {
|
|
width: 100%;
|
|
}
|
|
.order-method-normal {
|
|
padding-top: 12px;
|
|
}
|
|
.order-method-normal__btn {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
height: 84px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
line-height: 16px;
|
|
}
|
|
.order-method-normal__btn.active {
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
background-color: #707070;
|
|
}
|
|
.order-method-normal__btn.active .order-method-normal__icon {
|
|
background-position: 32px 0;
|
|
}
|
|
.order-method-normal__btn.active .order-method-normal__icon--payco {
|
|
background-position: 60px 0;
|
|
}
|
|
.order-method-normal__btn.active .order-method-normal__icon--toss {
|
|
background-position: 66px 0;
|
|
}
|
|
.order-method-normal__btn.active .order-method-normal__icon--naver {
|
|
background-position: 66px 0;
|
|
}
|
|
.order-method-normal__btn.active .order-method-normal__icon--kakao {
|
|
background-position: 66px 0;
|
|
}
|
|
.order-method-normal__btn-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.order-method-normal__content-inner {
|
|
background-color: #f8f9fa;
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
border: 1px solid #eaeced;
|
|
margin-bottom: 10px;
|
|
}
|
|
.order-method-normal__nextTimeCheck {
|
|
margin-bottom: 12px;
|
|
}
|
|
.order-method-normal__icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-size: cover;
|
|
}
|
|
.order-method-normal__icon--card {
|
|
background-image: url("../images/icon_payment-card.png");
|
|
}
|
|
.order-method-normal__icon--transfer {
|
|
background-image: url("../images/icon_payment-transfer.png");
|
|
}
|
|
.order-method-normal__icon--deposit {
|
|
background-image: url("../images/icon_payment-deposit.png");
|
|
}
|
|
.order-method-normal__icon--account {
|
|
background-image: url("../images/icon_payment-account.png");
|
|
}
|
|
.order-method-normal__icon--payco {
|
|
width: 60px;
|
|
height: 30px;
|
|
background-image: url("../images/icon_payment-payco.png");
|
|
}
|
|
.order-method-normal__icon--toss {
|
|
width: 66px;
|
|
height: 30px;
|
|
background-image: url("../images/icon_payment-toss.png");
|
|
}
|
|
.order-method-normal__icon--naver {
|
|
width: 66px;
|
|
height: 30px;
|
|
background-image: url("../images/icon_payment-naverpay.png");
|
|
}
|
|
.order-method-normal__icon--kakao {
|
|
width: 66px;
|
|
height: 30px;
|
|
background-image: url("../images/icon_payment-kakaopay.png");
|
|
}
|
|
.order-method-normal .table-transparent th .input-text,
|
|
.order-method-normal .table-transparent td .input-text,
|
|
.order-method-normal .table-innerAddress th .input-text,
|
|
.order-method-normal .table-innerAddress td .input-text {
|
|
height: 44px;
|
|
}
|
|
.order-method-normal .table-transparent th .nice-select,
|
|
.order-method-normal .table-transparent td .nice-select,
|
|
.order-method-normal .table-innerAddress th .nice-select,
|
|
.order-method-normal .table-innerAddress td .nice-select {
|
|
height: 44px;
|
|
line-height: 42px;
|
|
}
|
|
.order-method-normal .table-transparent th,
|
|
.order-method-normal .table-innerAddress th {
|
|
padding: 8px 8px 8px 4px;
|
|
word-break: keep-all;
|
|
vertical-align: middle;
|
|
color: #495057;
|
|
line-height: 1.4;
|
|
font-size: 13px;
|
|
}
|
|
.order-method-normal .table-transparent .custom-radio-container,
|
|
.order-method-normal .table-innerAddress .custom-radio-container {
|
|
padding: 12px 0;
|
|
}
|
|
.order-method__content {
|
|
padding-bottom: 12px;
|
|
}
|
|
.order-method .icon_gcpay {
|
|
margin-left: 2px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.table-transparent,
|
|
.table-innerAddress {
|
|
width: 100%;
|
|
}
|
|
.table-transparent th,
|
|
.table-transparent td,
|
|
.table-innerAddress th,
|
|
.table-innerAddress td {
|
|
vertical-align: text-top;
|
|
padding: 8px 4px;
|
|
}
|
|
.table-transparent th,
|
|
.table-innerAddress th {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #343a40;
|
|
}
|
|
.table-transparent .find-address-btn,
|
|
.table-innerAddress .find-address-btn {
|
|
background-color: #495057;
|
|
color: #ffffff;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
height: 42px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
}
|
|
.table-transparent .find-address-btn:hover,
|
|
.table-innerAddress .find-address-btn:hover {
|
|
background-color: #343a40;
|
|
}
|
|
.table-transparent .td-inner,
|
|
.table-innerAddress .td-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
-moz-column-gap: 5px;
|
|
column-gap: 5px;
|
|
row-gap: 8px;
|
|
}
|
|
.table-transparent .td-inner.vertical,
|
|
.table-innerAddress .td-inner.vertical {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.table-transparent .nice-select,
|
|
.table-innerAddress .nice-select {
|
|
min-width: 100px;
|
|
height: 36px;
|
|
line-height: 34px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding-left: 12px;
|
|
}
|
|
.table-transparent .nice-select:after,
|
|
.table-innerAddress .nice-select:after {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-top: -3.5px;
|
|
}
|
|
.table-transparent .nice-select.md,
|
|
.table-innerAddress .nice-select.md {
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
}
|
|
.table-transparent .orderInfo__deliveryRequest,
|
|
.table-innerAddress .orderInfo__deliveryRequest {
|
|
width: 100%;
|
|
}
|
|
.table-transparent .orderInfo__deliveryRequest .select-box .nice-select,
|
|
.table-innerAddress .orderInfo__deliveryRequest .select-box .nice-select {
|
|
height: 42px;
|
|
line-height: 40px;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.gcpayNoInterest__table.table {
|
|
border-top: none;
|
|
}
|
|
.gcpayNoInterest__table.table th,
|
|
.gcpayNoInterest__table.table td {
|
|
height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
.gcpayNoInterest__table.table th {
|
|
background-color: #ffffff;
|
|
padding: 8px 16px;
|
|
}
|
|
.gcpayNoInterest__table.table td {
|
|
padding: 8px 10px;
|
|
}
|
|
.gcpayNoInterest .infoBox {
|
|
padding: 16px 14px;
|
|
}
|
|
.gcpayNoInterest .infoBox__list li {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.multiDeliverySelect {
|
|
padding: 16px;
|
|
}
|
|
.multiDeliverySelect__title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-bottom: 10px;
|
|
}
|
|
.multiDeliverySelect__list {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.multiDeliverySelect__list .b-checkbox {
|
|
align-items: flex-start;
|
|
margin-top: 0 !important;
|
|
padding: 14px 8px;
|
|
font-size: 14px;
|
|
}
|
|
.multiDeliverySelect__list .b-checkbox + .b-checkbox {
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
.multiDeliverySelect__name {
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
margin-right: 2px;
|
|
}
|
|
.multiDeliverySelect__address {
|
|
font-size: 13px;
|
|
color: #495057;
|
|
}
|
|
.multiDeliverySelect__btnContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.multiDeliverySelect__btnContainer .btn {
|
|
flex: 1;
|
|
height: 48px;
|
|
}
|
|
|
|
.order-payment__deliveryCycle {
|
|
border: 1px solid #e0e0e0;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
.order-payment__deliveryCycle-description {
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
font-size: 15px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.order-payment__deliveryCycle .custom-radio-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin-bottom: 16px;
|
|
-moz-column-gap: 16px !important;
|
|
column-gap: 16px !important;
|
|
row-gap: 16px !important;
|
|
}
|
|
.nonMemberTerms {
|
|
margin-bottom: 10px;
|
|
}
|
|
.nonMemberTerms__item {
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
}
|
|
.nonMemberTerms__item .b-checkbox-container {
|
|
color: #343a40;
|
|
font-weight: 500;
|
|
}
|
|
.nonMemberTerms__item .b-checkbox.checkbox .control-label {
|
|
padding-left: 6px;
|
|
}
|
|
.nonMemberTerms__item .b-checkbox {
|
|
width: 100%;
|
|
}
|
|
.nonMemberTerms__item:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.nonMemberTerms__item--checkAll {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding: 6px 0;
|
|
}
|
|
.nonMemberTerms__item--checkAll .b-checkbox-container {
|
|
color: #16191d;
|
|
font-weight: 700;
|
|
}
|
|
.nonMemberTerms__item--checkAll::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 1px;
|
|
border-top: 1px solid #dee2e6;
|
|
left: 0;
|
|
bottom: -4px;
|
|
}
|
|
.nonMemberTerms__detail {
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: 6px;
|
|
padding-right: 10px;
|
|
top: 0;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
}
|
|
.nonMemberTerms__detail::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-top: 1px solid #7e8282;
|
|
border-right: 1px solid #7e8282;
|
|
right: 4px;
|
|
top: 50%;
|
|
transform: rotate(45deg) translateY(calc(-50% - 1px));
|
|
}
|
|
.nonMemberTerms__marketing {
|
|
padding: 4px 0 4px 32px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: #7e8282;
|
|
word-break: keep-all;
|
|
}
|
|
.nonMemberTerms__marketing em {
|
|
font-style: normal;
|
|
color: #f03e3e;
|
|
}
|
|
|
|
.orderCompletedTop {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 28px 12px;
|
|
}
|
|
.orderCompletedTop svg {
|
|
margin-bottom: 12px;
|
|
}
|
|
.orderCompletedTop__title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
color: #16191d;
|
|
}
|
|
.orderCompletedTop__subTitle {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #343a40;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.orderCompletedTop__subTitle em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
}
|
|
.orderCompletedTop__orderNumBox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background-color: #f8fafb;
|
|
padding: 10px 14px;
|
|
border-radius: 5px;
|
|
}
|
|
.orderCompletedTop__orderNumBox__title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #121210;
|
|
}
|
|
.orderCompletedTop__orderNumBox__num {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #50514f;
|
|
}
|
|
|
|
.orderFailed .sub-box {
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
.orderFailed__inner {
|
|
padding: 100px 0;
|
|
}
|
|
.orderFailed img {
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
width: 68px;
|
|
}
|
|
.orderFailed__title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #495057;
|
|
margin-bottom: 32px;
|
|
}
|
|
.orderFailed__title em {
|
|
font-style: normal;
|
|
}
|
|
.orderFailed__text {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
margin-bottom: 32px;
|
|
}
|
|
.orderFailed__text em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
.orderFailed__reason {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
max-width: 520px;
|
|
min-height: 68px;
|
|
margin-inline: auto;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #495057;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gcpayGuide {
|
|
background: #3053bc;
|
|
padding-top: 40px;
|
|
padding-bottom: 30px;
|
|
}
|
|
.gcpayGuide .swiper-slide {
|
|
width: 100% !important;
|
|
}
|
|
.gcpayGuide .swiper-pagination {
|
|
position: static;
|
|
margin-top: 15px;
|
|
}
|
|
.gcpayGuide .swiper-pagination-bullet {
|
|
background-color: #6f87d0;
|
|
opacity: 1;
|
|
margin: 0 4px !important;
|
|
}
|
|
.gcpayGuide .swiper-pagination-bullet-active {
|
|
background-color: #ffffff;
|
|
}
|
|
.gcpayGuide__wrap .infoBox {
|
|
background-color: #ffffff;
|
|
}
|
|
.gcpayGuide__wrap .infoBox__list li {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.subList__banner {
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.subList__productList {
|
|
padding: 58px 0 40px;
|
|
}
|
|
.subList__productList .listTop {
|
|
margin-bottom: 10px;
|
|
}
|
|
.subList__productList--searchResult {
|
|
padding: 8px 0 40px;
|
|
}
|
|
.subList__productList--searchResult .searchPage__header {
|
|
border-bottom: 0;
|
|
}
|
|
.subList__productList--searchResult .noResult {
|
|
min-height: 44vh;
|
|
padding-top: 14vh;
|
|
}
|
|
.subList__sort .select-box .nice-select {
|
|
border: 0;
|
|
font-size: 14px;
|
|
}
|
|
.subList__sort .select-box .nice-select .list {
|
|
left: auto;
|
|
right: -4px;
|
|
}
|
|
|
|
.productDetailImages .swiper-slide img {
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
max-height: 720px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.productDetailImages .time-sale__top {
|
|
z-index: 2;
|
|
height: clamp(32px, 12%, 42px);
|
|
}
|
|
.productDetailImages .time-sale__top .time {
|
|
font-size: 16px;
|
|
}
|
|
.productDetailImages .time-sale__top .left {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.productDetailInfo {
|
|
padding: 16px;
|
|
}
|
|
.productDetailInfo .product-unit-rating {
|
|
font-size: 15px;
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__titleWrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__title {
|
|
display: block;
|
|
font-size: 18px;
|
|
line-height: 40px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-right: auto;
|
|
}
|
|
.productDetailInfo__subTitle {
|
|
display: block;
|
|
width: 100%;
|
|
line-height: 20px;
|
|
margin-top: 10px;
|
|
margin-bottom: -4px;
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
}
|
|
.productDetailInfo__subTitle ~ .productDetailInfo__miscControls {
|
|
top: 24px;
|
|
}
|
|
.productDetailInfo__miscControls {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
padding-top: 4px;
|
|
}
|
|
.productDetailInfo__miscControls__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
}
|
|
.productDetailInfo__price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
gap: 8px;
|
|
}
|
|
.productDetailInfo__price__sale {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #e34747;
|
|
text-align: center;
|
|
letter-spacing: -0.03em;
|
|
margin-right: 10px;
|
|
line-height: 1.2;
|
|
}
|
|
.productDetailInfo__price__sale > .percent {
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
}
|
|
.productDetailInfo__price__sale .priceUnit {
|
|
position: relative;
|
|
font-size: 18px;
|
|
margin-left: 2px;
|
|
top: -2px;
|
|
}
|
|
.productDetailInfo__price__price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
.productDetailInfo__price__original {
|
|
font-size: 18px;
|
|
text-decoration: line-through;
|
|
color: #adb5bd;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.2;
|
|
}
|
|
.productDetailInfo__price__current {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.2;
|
|
}
|
|
.productDetailInfo__price__current .priceUnit {
|
|
position: relative;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-left: 1px;
|
|
top: -2px;
|
|
}
|
|
.productDetailInfo__price .product-badge-container {
|
|
margin-left: auto;
|
|
}
|
|
.productDetailInfo__info {
|
|
padding: 0 0 8px 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__info > dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 12px 0 12px 4px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
.productDetailInfo__info > dl:last-of-type {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.productDetailInfo__info > dl > dt {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
margin-right: 8px;
|
|
font-weight: 400;
|
|
width: 80px;
|
|
}
|
|
.productDetailInfo__info > dl > dd {
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
}
|
|
.productDetailInfo__info > dl > dd > em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
}
|
|
.productDetailInfo__info > dl > dd .misc {
|
|
font-size: 12px;
|
|
color: #7e8282;
|
|
font-weight: 300;
|
|
}
|
|
.productDetailInfo__info > dl > dd .infoBtn {
|
|
margin-top: -4px;
|
|
margin-left: 2px;
|
|
padding: 4px;
|
|
}
|
|
.productDetailInfo__option {
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__option__title {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
.productDetailInfo__option__box {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
padding: 8px 0;
|
|
}
|
|
.productDetailInfo__option__description {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.productDetailInfo__option__item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 18px;
|
|
min-height: 56px;
|
|
cursor: pointer;
|
|
}
|
|
.productDetailInfo__option__item .control-label {
|
|
line-height: 1.4;
|
|
}
|
|
.productDetailInfo__option__right {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
line-height: 1.3;
|
|
margin-left: 12px;
|
|
}
|
|
.productDetailInfo__option__price {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.productDetailInfo__option__monthly-payment {
|
|
font-size: 12px;
|
|
color: #495057;
|
|
}
|
|
.productDetailInfo__option__gift {
|
|
font-size: 12px;
|
|
color: #e03131;
|
|
}
|
|
.productDetailInfo__additionalSelect {
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__additionalSelect__title {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
.productDetailInfo__additionalSelect__inner {
|
|
padding: 16px;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 5px;
|
|
}
|
|
.productDetailInfo__additionalSelect__item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.productDetailInfo__additionalSelect__item + .productDetailInfo__additionalSelect__item {
|
|
margin-top: 8px;
|
|
}
|
|
.productDetailInfo__additionalSelect__category {
|
|
font-size: 14px;
|
|
margin-right: 8px;
|
|
font-weight: 400;
|
|
width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
.productDetailInfo__additionalSelect .select-box,
|
|
.productDetailInfo__additionalSelect .nice-select {
|
|
width: 100%;
|
|
}
|
|
.productDetailInfo__additionalSelect .select-box .nice-select {
|
|
height: 48px;
|
|
line-height: 46px;
|
|
}
|
|
.productDetailInfo__confirmOption {
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.productDetailInfo__count {
|
|
background-color: #f9f9f9;
|
|
padding: 20px 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.productDetailInfo__count + .productDetailInfo__count {
|
|
margin-top: 8px;
|
|
}
|
|
.productDetailInfo__count__amountTop {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding-right: 24px;
|
|
}
|
|
.productDetailInfo__count__amountTitle {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
word-break: keep-all;
|
|
}
|
|
.productDetailInfo__count__amountDelete {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(" ../images/icon_modal-close.png");
|
|
opacity: 0.75;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
top: 4px;
|
|
right: 2px;
|
|
}
|
|
.productDetailInfo__count__amountBottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.productDetailInfo__count__amountCounter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border: 1px solid #e9ecef;
|
|
min-width: 92px;
|
|
height: 32px;
|
|
border-radius: 100px;
|
|
padding: 0 8px;
|
|
}
|
|
.productDetailInfo__count__amountCounter > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.productDetailInfo__count__amountCounter + .btn {
|
|
margin-top: 4px;
|
|
}
|
|
.productDetailInfo__count__amountNumber {
|
|
font-weight: 500;
|
|
text-align: center;
|
|
min-width: 20px;
|
|
}
|
|
.productDetailInfo__count__amountBtn {
|
|
width: 24px;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
.productDetailInfo__count__amountBtn.plus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"></path></svg>');
|
|
}
|
|
.productDetailInfo__count__amountBtn.minus {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" fill="%23303030" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"></path></svg>');
|
|
}
|
|
.productDetailInfo__count__amountPriceBox > * + * {
|
|
margin-left: 4px;
|
|
}
|
|
.productDetailInfo__count__amountMonthlyPrice {
|
|
font-size: 12px;
|
|
color: #495057;
|
|
}
|
|
.productDetailInfo__count__amountPrice {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.productDetailInfo__orderBtnContainer {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.productDetailInfo__orderBtnContainer > .btn {
|
|
flex: 1;
|
|
height: 64px;
|
|
font-size: 18px;
|
|
}
|
|
.productDetailInfo__orderBtnContainer .gift-btn {
|
|
width: 64px;
|
|
height: 64px;
|
|
gap: 4px;
|
|
}
|
|
.productDetailInfo__reservedDelivery {
|
|
background-color: rgb(255, 246, 242);
|
|
padding: 12px 0 12px 16px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.productDetailInfo__reservedDelivery dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.productDetailInfo__reservedDelivery dl dt {
|
|
font-size: 16px;
|
|
color: rgb(255, 83, 0);
|
|
margin-right: 8px;
|
|
font-weight: 500;
|
|
width: 80px;
|
|
}
|
|
.productDetailInfo__reservedDelivery__info {
|
|
font-size: 16px;
|
|
color: #16191d;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
.productDetailInfo__reservedDelivery__info .misc {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
font-weight: 400;
|
|
}
|
|
.productDetailInfo__reservedDelivery__num {
|
|
font-size: 14px;
|
|
color: #16191d;
|
|
font-weight: 400;
|
|
}
|
|
.productDetailInfo__reservedDelivery__num em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
color: rgb(255, 83, 0);
|
|
}
|
|
.productDetailInfo__nonMember {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
border: 1px solid #ebedef;
|
|
background-color: #f8fafb;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
font-size: 16px;
|
|
}
|
|
.productDetailInfo__nonMember p {
|
|
color: #16191d;
|
|
font-weight: 500;
|
|
}
|
|
.productDetailInfo__nonMember p em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #f03e3e;
|
|
}
|
|
.productDetailInfo__memberBenefits {
|
|
margin-bottom: 20px;
|
|
}
|
|
.productDetailInfo__memberBenefits__title {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 8px;
|
|
color: #0d0f12;
|
|
padding-left: 8px;
|
|
}
|
|
.productDetailInfo__memberBenefits__title em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
}
|
|
.productDetailInfo__memberBenefits__inner {
|
|
padding: 16px;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 5px;
|
|
}
|
|
.productDetailInfo__memberBenefits dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
.productDetailInfo__memberBenefits dl:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.productDetailInfo__memberBenefits dl > dt {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
margin-right: 8px;
|
|
font-weight: 400;
|
|
width: 80px;
|
|
}
|
|
.productDetailInfo__memberBenefits dl > dd {
|
|
font-size: 13px;
|
|
color: #16191d;
|
|
}
|
|
.productDetailInfo__memberBenefits__couponTitle {
|
|
font-weight: 500;
|
|
}
|
|
.productDetailInfo__relatedProduct {
|
|
padding: 20px 0;
|
|
}
|
|
.productDetailInfo__relatedProduct__title {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
.productDetailInfo__relatedProduct__inner {
|
|
padding: 16px;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 5px;
|
|
}
|
|
.productDetailInfo__relatedProduct__btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit + .product-unit {
|
|
margin-top: 32px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit + .product-unit::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
top: -16px;
|
|
left: 0;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-info {
|
|
margin-top: 0;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-image {
|
|
width: 92px;
|
|
height: 92px;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-image:hover img {
|
|
transform: none;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-title {
|
|
padding-right: 100px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-title > a {
|
|
font-size: 14px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-price {
|
|
margin-top: 4px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-price__original {
|
|
font-size: 12px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-price__current {
|
|
font-size: 16px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-price__sale > .percent {
|
|
font-size: 15px;
|
|
}
|
|
.productDetailInfo__relatedProduct .product-unit-rating {
|
|
font-size: 14px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.productCoupon {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 60px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
.productCoupon__left {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: clamp(12px, 3%, 18px);
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
border-right: 1px dashed #dee2e6;
|
|
}
|
|
.productCoupon__right {
|
|
max-width: 136px;
|
|
flex-shrink: 0;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
gap: 6px;
|
|
border-radius: 8px;
|
|
background-color: #868e96;
|
|
border-left: 0;
|
|
}
|
|
.productCoupon__download {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
.productCoupon__title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #f03e3e;
|
|
margin-right: 8px;
|
|
width: 120px;
|
|
}
|
|
.productCoupon__price {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: #f03e3e;
|
|
}
|
|
.productCoupon__price .priceUnit {
|
|
position: relative;
|
|
font-size: 19px;
|
|
margin-left: 2px;
|
|
top: -2px;
|
|
}
|
|
.productCoupon::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
right: -10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.productCoupon .productDetailInfo__price__bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
-moz-column-gap: 6px;
|
|
column-gap: 6px;
|
|
row-gap: 0;
|
|
}
|
|
.productCoupon .productDetailInfo__price__price {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
}
|
|
.productCoupon .productDetailInfo__price__original {
|
|
font-size: 13px;
|
|
line-height: 13px;
|
|
}
|
|
.productCoupon .productDetailInfo__price__current {
|
|
line-height: 24px;
|
|
color: #979b9d;
|
|
font-size: 18px;
|
|
}
|
|
.productCoupon .productDetailInfo__price__current.coupon {
|
|
color: #16191d;
|
|
}
|
|
.productCoupon .productDetailInfo__price__current .priceUnit {
|
|
font-size: 14px;
|
|
top: -1px;
|
|
}
|
|
.productCoupon .productDetailInfo__price__price > * + * {
|
|
margin-left: 0;
|
|
}
|
|
.productCoupon__text {
|
|
font-size: 12px;
|
|
color: #666968;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.microModal .deliveryFeeInfo {
|
|
padding-top: 20px;
|
|
}
|
|
.microModal .deliveryFeeInfo__item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.microModal .deliveryFeeInfo__item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.microModal .deliveryFeeInfo__item em {
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #50514f;
|
|
font-weight: 500;
|
|
}
|
|
.microModal .deliveryFeeInfo__item p {
|
|
font-size: 13px;
|
|
color: #7e8282;
|
|
padding-left: 12px;
|
|
font-weight: 300;
|
|
}
|
|
.microModal .deliveryFeeInfo__item table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 4px;
|
|
}
|
|
.microModal .deliveryFeeInfo__item table th,
|
|
.microModal .deliveryFeeInfo__item table td {
|
|
border: 1px solid #e9ecef;
|
|
padding: 8px;
|
|
font-size: 13px;
|
|
}
|
|
.microModal .deliveryFeeInfo__item table td {
|
|
color: #666968;
|
|
}
|
|
.microModal .deliveryFeeInfo__item table th {
|
|
background-color: #f1f3f5;
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
}
|
|
.microModal .deliveryFeeInfo__controls {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
.microModal .reviewBenefit {
|
|
margin-top: 20px;
|
|
border: 1px solid #f1f3f5;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
.microModal .reviewBenefit dl {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.microModal .reviewBenefit dl dt {
|
|
flex-grow: 1;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #0d0f12;
|
|
font-weight: 500;
|
|
}
|
|
.microModal .reviewBenefit dl dd {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #666968;
|
|
}
|
|
.microModal .reviewBenefit dl dd > em {
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
color: #1c7ed6;
|
|
}
|
|
.microModal .reviewBenefit dl:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.microModal .reviewBenefit__date {
|
|
display: block;
|
|
color: #979b9d;
|
|
font-size: 12px;
|
|
}
|
|
.microModal .snsShare {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
padding: 20px 0;
|
|
}
|
|
.microModal .snsShare__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: #16191d;
|
|
}
|
|
.microModal .snsShare__item .icon {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.productDetailTab {
|
|
position: sticky;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 50px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
background-color: #ffffff;
|
|
top: 48px;
|
|
z-index: 2;
|
|
}
|
|
.productDetailTab::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.productDetailTab__item {
|
|
font-size: 0;
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
.productDetailTab__item::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #dee2e6;
|
|
transform: translateX(-50%);
|
|
}
|
|
.productDetailTab__item button,
|
|
.productDetailTab__item a {
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
color: #868e96;
|
|
word-break: keep-all;
|
|
padding: 0 14px 0;
|
|
width: 100%;
|
|
height: 58px;
|
|
margin-top: -8px;
|
|
}
|
|
.productDetailTab__item.active button,
|
|
.productDetailTab__item.active a {
|
|
color: #16191d;
|
|
}
|
|
.productDetailTab__item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: #343a40;
|
|
transform: translateX(-50%);
|
|
}
|
|
.productDetailTab__item.active .productDetailTab__num {
|
|
color: #343a40;
|
|
}
|
|
.productDetailTab__content {
|
|
display: none;
|
|
}
|
|
.productDetailTab__content.active {
|
|
display: block;
|
|
}
|
|
.productDetailTab__num {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
color: #979b9d;
|
|
}
|
|
|
|
.productDetailcontent {
|
|
position: relative;
|
|
}
|
|
.productDetailcontent__imageDetails {
|
|
position: relative;
|
|
text-align: center;
|
|
max-height: 1000px;
|
|
overflow-y: hidden;
|
|
}
|
|
.productDetailcontent__imageDetails img {
|
|
display: inline-block;
|
|
}
|
|
.productDetailcontent__imageDetails.opened {
|
|
max-height: none;
|
|
}
|
|
.productDetailcontent__imageDetails.opened::after {
|
|
display: none;
|
|
}
|
|
.productDetailcontent__imageDetails::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100px;
|
|
background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%);
|
|
}
|
|
|
|
.productDetailcontent__imageDetails .ck-content .table {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.productDetailcontent__imageDetails .ck-content .table table {
|
|
border: none;
|
|
}
|
|
|
|
.productDetailcontent__imageDetails .ck-content .table table tr {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.productDetailcontent__imageDetails .ck-content .table table td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.productDetailcontent__imageDetails .ck-content .table table th, .productDetailcontent__imageDetails .ck-content .table table td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.productDetailcontent__moreBtn {
|
|
padding: 0 72px 0 78px !important;
|
|
height: 60px !important;
|
|
}
|
|
.productDetailcontent__moreBtn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 2px solid currentColor;
|
|
border-right: 2px solid currentColor;
|
|
transform: translateY(-2px) rotate(135deg);
|
|
margin-left: 6px;
|
|
}
|
|
.productDetailcontent__moreBtn.opened::after {
|
|
transform: translateY(2px) rotate(-45deg);
|
|
}
|
|
.productDetailcontent__moreWrap {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
}
|
|
.productDetailcontent__folded {
|
|
display: none;
|
|
}
|
|
.productDetailcontent__folded.opened {
|
|
display: block;
|
|
}
|
|
|
|
.productReview__title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 32px;
|
|
}
|
|
.productReview__subBox {
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #343a40;
|
|
margin-bottom: 24px;
|
|
}
|
|
.productReview__subTitle {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding: 0 16px;
|
|
}
|
|
.productReview__subTitle__title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-right: 6px;
|
|
}
|
|
.productReview__subTitle__subText {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
}
|
|
.productReview__subTitle__num {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
}
|
|
.productReview__subTitle__num .unit {
|
|
position: relative;
|
|
font-size: 16px;
|
|
margin-left: 2px;
|
|
top: -1px;
|
|
}
|
|
.productReview__text {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
margin-bottom: 4px;
|
|
}
|
|
.productReview__mileage {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.productReview__mileage dl {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 16px;
|
|
}
|
|
.productReview__mileage dl::before {
|
|
content: "·";
|
|
position: absolute;
|
|
color: #979b9d;
|
|
left: -9px;
|
|
}
|
|
.productReview__mileage dl:first-child::before {
|
|
content: "";
|
|
}
|
|
.productReview__mileage dl dt {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
margin-right: 4px;
|
|
font-weight: 400;
|
|
}
|
|
.productReview__mileage dl dd {
|
|
font-size: 13px;
|
|
color: #121210;
|
|
}
|
|
.productReview__status {
|
|
padding: 24px 12px 0;
|
|
}
|
|
.productReview__status__title {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
.productReview__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
.productReview__reviewNum__inner {
|
|
padding-top: 12px;
|
|
}
|
|
.productReview__reviewNum__inner .icon {
|
|
margin-bottom: 20px;
|
|
}
|
|
.productReview__reviewNum__num {
|
|
display: block;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #343a40;
|
|
margin-left: 8px;
|
|
line-height: 24px;
|
|
}
|
|
.productReview__rating {
|
|
flex: 1;
|
|
padding: 0 12px;
|
|
}
|
|
.productReview__ratingStats {
|
|
position: relative;
|
|
flex: 1;
|
|
padding: 0 12px;
|
|
}
|
|
.productReview__ratingStats::before {
|
|
left: -8px;
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 1px;
|
|
height: 160px;
|
|
top: 34px;
|
|
background-color: #e9ecef;
|
|
}
|
|
.productReview__ratingStats__star {
|
|
font-size: 12px;
|
|
color: #666968;
|
|
margin-right: 14px;
|
|
}
|
|
.productReview__ratingStats__item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding-right: 24px;
|
|
max-width: 240px;
|
|
margin-inline: auto;
|
|
}
|
|
.productReview__ratingStats__bar {
|
|
flex: 1;
|
|
background-color: #e9ecef;
|
|
height: 8px;
|
|
border-radius: 12px;
|
|
margin-right: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.productReview__ratingStats__fill {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: #adb5bd;
|
|
width: 0;
|
|
}
|
|
.productReview__ratingStats__num {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: -10px;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
background-color: #fa5252;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
padding: 0px 4px;
|
|
border-radius: 4px;
|
|
line-height: 1.4;
|
|
}
|
|
.productReview__ratingStats__num::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -4px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-right: 4px solid #fa5252;
|
|
transform: translateY(-50%);
|
|
}
|
|
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
|
background-color: #ff6b6b;
|
|
}
|
|
.productReview__reviewStats {
|
|
margin-top: 20px;
|
|
}
|
|
.productReview__reviewStats .slick-arrow::before {
|
|
content: "";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-top: 1px solid #495057;
|
|
border-right: 1px solid #495057;
|
|
transform: rotate(-135deg);
|
|
}
|
|
.productReview__reviewStats .slick-prev {
|
|
left: -44px;
|
|
}
|
|
.productReview__reviewStats .slick-next {
|
|
right: -44px;
|
|
}
|
|
.productReview__reviewStats .slick-next::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
.productReview__reviewStats .slick-prev,
|
|
.productReview__reviewStats .slick-next {
|
|
transform: translate(0, calc(-50% + 20px));
|
|
}
|
|
.productReview__reviewStats .slick-dots li {
|
|
margin: 0;
|
|
width: 18px;
|
|
}
|
|
.productReview__more {
|
|
font-size: 14px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #868e96;
|
|
margin-left: auto;
|
|
}
|
|
.productReview__more::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid currentColor;
|
|
border-right: 1px solid currentColor;
|
|
transform: rotate(45deg);
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.otherReviews {
|
|
padding-top: 14px;
|
|
}
|
|
.otherReviews__item {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 370px;
|
|
margin-inline: auto;
|
|
}
|
|
.otherReviews__category {
|
|
font-size: 13px;
|
|
display: inline-block;
|
|
padding: 2px 12px;
|
|
border: 1px solid #ced4da;
|
|
background-color: #ffffff;
|
|
border-radius: 20px;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
margin-right: 8px;
|
|
}
|
|
.otherReviews__title {
|
|
font-size: 14px;
|
|
margin-right: 8px;
|
|
}
|
|
.otherReviews__line {
|
|
display: block;
|
|
border-top: 1px dashed #adb5bd;
|
|
flex-grow: 1;
|
|
margin-right: 8px;
|
|
}
|
|
.otherReviews__percent {
|
|
font-size: 13px;
|
|
color: #666968;
|
|
}
|
|
.otherReviews__wrap {
|
|
margin-bottom: 36px;
|
|
}
|
|
.otherReviews__moreWrap {
|
|
border-top: 1px solid #f1f3f5;
|
|
}
|
|
.otherReviews__moreBtn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 12px 0;
|
|
text-align: center;
|
|
color: #212529;
|
|
padding-left: 10px;
|
|
}
|
|
.otherReviews__moreBtn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid currentColor;
|
|
border-right: 1px solid currentColor;
|
|
transform: translateY(-2px) rotate(135deg);
|
|
margin-left: 6px;
|
|
}
|
|
.otherReviews__moreBtn.opened::after {
|
|
transform: translateY(2px) rotate(-45deg);
|
|
}
|
|
|
|
.otherReviewsDetail {
|
|
display: none;
|
|
padding-top: 16px;
|
|
}
|
|
.otherReviewsDetail.opened {
|
|
display: block;
|
|
}
|
|
.otherReviewsDetail__title {
|
|
font-size: 12px;
|
|
color: #666968;
|
|
margin-right: 8px;
|
|
min-width: 76px;
|
|
}
|
|
.otherReviewsDetail__item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
max-width: 360px;
|
|
margin-inline: auto;
|
|
}
|
|
.otherReviewsDetail__bar {
|
|
flex-grow: 1;
|
|
background-color: #e9ecef;
|
|
height: 8px;
|
|
border-radius: 12px;
|
|
margin-right: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.otherReviewsDetail__fill {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: #adb5bd;
|
|
width: 0;
|
|
}
|
|
.otherReviewsDetail__num {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
padding: 0px 4px;
|
|
border-radius: 4px;
|
|
line-height: 1.4;
|
|
color: #666968;
|
|
width: 34px;
|
|
}
|
|
|
|
.allReviewStars {
|
|
position: relative;
|
|
display: inline-block;
|
|
max-width: 160px;
|
|
width: 100%;
|
|
aspect-ratio: 180/36;
|
|
background-color: #e3e3e3;
|
|
}
|
|
.allReviewStars__wrapper {
|
|
padding-top: 6px;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.allReviewStars__numWrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.allReviewStars__num {
|
|
font-size: 42px;
|
|
font-weight: 900;
|
|
color: #343a40;
|
|
margin-left: 8px;
|
|
}
|
|
.allReviewStars__allNum {
|
|
font-size: 30px;
|
|
color: #adb5bd;
|
|
font-weight: 400;
|
|
margin-left: 4px;
|
|
}
|
|
.allReviewStars::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
}
|
|
.allReviewStars__fill {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: #FFD43B;
|
|
width: 0;
|
|
}
|
|
.allReviewStars::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../images/icon_reviewStars--lg.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.storePick {
|
|
padding: 16px 0;
|
|
overflow: hidden;
|
|
}
|
|
.storePick__item {
|
|
display: flex !important;
|
|
}
|
|
.storePick__box {
|
|
flex: 1;
|
|
border: 1px solid #dee2e6;
|
|
min-height: 180px;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.storePick__top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
.storePick__userImage {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 6px;
|
|
margin-top: 3px;
|
|
}
|
|
.storePick__userImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.storePick__misc {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.storePick__misc__id {
|
|
color: #7e8282;
|
|
}
|
|
.storePick__misc__date {
|
|
color: #7e8282;
|
|
}
|
|
.storePick__misc > * {
|
|
position: relative;
|
|
}
|
|
.storePick__misc > * + * {
|
|
margin-left: 8px;
|
|
}
|
|
.storePick__misc > * + *::before {
|
|
position: absolute;
|
|
content: "·";
|
|
color: #979b9d;
|
|
left: -7px;
|
|
}
|
|
.storePick__misc__badge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 40px;
|
|
font-weight: 400;
|
|
background-color: #ff6b6b;
|
|
color: #ffffff;
|
|
margin-left: 2px;
|
|
}
|
|
.storePick__body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.storePick__reviewImage {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-right: 16px;
|
|
margin-top: 4px;
|
|
flex-shrink: 0;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.storePick__reviewImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.storePick__reviewImage::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.storePick__reviewImage__num {
|
|
position: absolute;
|
|
display: inline-block;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.storePick__reviewText {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
color: #3a3a37;
|
|
line-height: 1.6;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.storePick__counter {
|
|
font-size: 18px;
|
|
color: #666968;
|
|
}
|
|
.storePick__counter em {
|
|
font-weight: 500;
|
|
color: #252521;
|
|
font-style: normal;
|
|
}
|
|
.storePick__swiper {
|
|
position: relative;
|
|
overflow: visible !important;
|
|
}
|
|
.storePick .swiper-pagination-fraction {
|
|
top: -48px;
|
|
right: 20px;
|
|
left: auto;
|
|
bottom: auto;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #979b9d;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
letter-spacing: -0.07em;
|
|
}
|
|
.storePick .swiper-pagination-fraction .swiper-pagination-current {
|
|
color: #16191d;
|
|
}
|
|
|
|
.photoReview {
|
|
padding: 16px 0;
|
|
}
|
|
.photoReview__thumbs {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
gap: 12px;
|
|
padding: 0 16px;
|
|
}
|
|
.photoReview__thumbs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.photoReview__thumbs__image, .photoReview__thumbs__moreImage {
|
|
flex-shrink: 0;
|
|
display: block;
|
|
position: relative;
|
|
width: 128px;
|
|
height: 128px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.photoReview__thumbs__image img, .photoReview__thumbs__moreImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.photoReview__thumbs__image::before, .photoReview__thumbs__moreImage::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.photoReview__thumbs__image:hover::before, .photoReview__thumbs__moreImage:hover::before {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.photoReview__thumbs__num {
|
|
position: absolute;
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
line-height: 30px;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.photoReview__thumbs__more {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
top: 0;
|
|
left: 0;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.userReview {
|
|
padding: 16px 0;
|
|
}
|
|
.userReview__sort {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 20px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.userReview__sort .select-box .nice-select {
|
|
border: 0;
|
|
font-size: 14px;
|
|
}
|
|
.userReview__tab {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userReview__tab__btn {
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
color: #979b9d;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
padding: 20px 0 16px;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
.userReview__tab__btn:hover {
|
|
color: #666968;
|
|
text-decoration: underline;
|
|
}
|
|
.userReview__tab__btn.current {
|
|
color: #16191d;
|
|
border-bottom: 2px solid #495057;
|
|
text-decoration: none;
|
|
}
|
|
.userReview__tab__btn + .userReview__tab__btn::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 1px;
|
|
height: 24px;
|
|
background-color: #dee2e6;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(calc(-50% + 2px));
|
|
}
|
|
.userReview__hashtag {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 12px 16px;
|
|
background-color: #f8fafb;
|
|
border: 1px solid #e9ecef;
|
|
border-width: 1px 0;
|
|
overflow-x: auto;
|
|
}
|
|
.userReview__hashtag::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.userReview__hashtag__btn {
|
|
display: inline-block;
|
|
padding: 4px 16px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
color: #343a40;
|
|
margin-right: 4px;
|
|
background-color: #ffffff;
|
|
white-space: nowrap;
|
|
}
|
|
.userReview__hashtag__btn:active {
|
|
color: #0d0f12;
|
|
background-color: #fafafa;
|
|
}
|
|
.userReview__hashtag__btn.selected {
|
|
background-color: #495057;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
}
|
|
.userReview .bottomBtnControls {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.userReviewItem {
|
|
border-bottom: 1px solid #e9ecef;
|
|
margin-bottom: 20px;
|
|
padding-left: 64px;
|
|
padding-right: 16px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.userReviewItem__item {
|
|
display: flex !important;
|
|
gap: 20px;
|
|
}
|
|
.userReviewItem__box {
|
|
flex: 1;
|
|
border: 1px solid #ced4da;
|
|
min-height: 200px;
|
|
border-radius: 6px;
|
|
padding: 24px;
|
|
}
|
|
.userReviewItem__top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
margin-left: -48px;
|
|
}
|
|
.userReviewItem__userImage {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 6px;
|
|
margin-top: 3px;
|
|
}
|
|
.userReviewItem__userImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.userReviewItem__misc {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.userReviewItem__misc__id {
|
|
color: #7e8282;
|
|
}
|
|
.userReviewItem__misc__date {
|
|
color: #7e8282;
|
|
}
|
|
.userReviewItem__misc > * {
|
|
position: relative;
|
|
}
|
|
.userReviewItem__misc > * + * {
|
|
margin-left: 8px;
|
|
}
|
|
.userReviewItem__misc > * + *::before {
|
|
position: absolute;
|
|
content: "·";
|
|
color: #979b9d;
|
|
left: -7px;
|
|
}
|
|
.userReviewItem__misc__badge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 40px;
|
|
font-weight: 400;
|
|
background-color: #ff6b6b;
|
|
color: #ffffff;
|
|
margin-left: 2px;
|
|
}
|
|
.userReviewItem__misc .icon_new-post,
|
|
.userReviewItem__misc .icon_hot-post {
|
|
vertical-align: top;
|
|
margin-top: 2px;
|
|
margin-left: 3px;
|
|
}
|
|
.userReviewItem__misc .icon_new-post::before,
|
|
.userReviewItem__misc .icon_hot-post::before {
|
|
display: none;
|
|
}
|
|
.userReviewItem__body {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userReviewItem__reviewImage {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 120px;
|
|
flex-shrink: 0;
|
|
margin-right: 60px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.userReviewItem__reviewImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.userReviewItem__reviewImage::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.userReviewItem__reviewImage__num {
|
|
position: absolute;
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
line-height: 30px;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.userReviewItem__reviewImage ~ .userReviewItem__reviewImage {
|
|
display: none;
|
|
}
|
|
.userReviewItem__reviewText {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 5;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
color: #16191d;
|
|
line-height: 24px;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userReviewItem__like {
|
|
position: absolute;
|
|
bottom: -54px;
|
|
right: 78px;
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #030507;
|
|
border: 1px solid #ced4da;
|
|
gap: 4px;
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
}
|
|
.userReviewItem__like svg,
|
|
.userReviewItem__like path {
|
|
fill: #fa5252;
|
|
}
|
|
.userReviewItem__like em {
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #3a3a37;
|
|
margin-right: 4px;
|
|
}
|
|
.userReviewItem__like:active {
|
|
background-color: #f7f7f7;
|
|
}
|
|
.userReviewItem__like.selected {
|
|
background-color: #fa5252;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
.userReviewItem__like.selected svg,
|
|
.userReviewItem__like.selected path {
|
|
fill: #ffffff;
|
|
}
|
|
.userReviewItem__like.selected em {
|
|
color: #ffffff;
|
|
}
|
|
.userReviewItem__like--dislike {
|
|
right: 0;
|
|
}
|
|
.userReviewItem__like--dislike svg,
|
|
.userReviewItem__like--dislike path {
|
|
fill: #7e8282 !important;
|
|
}
|
|
.userReviewItem__like--dislike svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
.userReviewItem__like--dislike em {
|
|
color: #212529 !important;
|
|
}
|
|
.userReviewItem__like--dislike.selected {
|
|
background-color: #909090 !important;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
}
|
|
.userReviewItem__like--dislike.selected svg,
|
|
.userReviewItem__like--dislike.selected path {
|
|
fill: #ffffff !important;
|
|
}
|
|
.userReviewItem__like--dislike.selected em {
|
|
color: #ffffff !important;
|
|
}
|
|
.userReviewItem__more {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 15px;
|
|
color: #16191d;
|
|
padding: 6px 8px 6px 0;
|
|
}
|
|
.userReviewItem__more:after {
|
|
content: "";
|
|
display: block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 1px solid currentColor;
|
|
border-right: 1px solid currentColor;
|
|
transform: translateY(-3px) rotate(135deg);
|
|
margin-left: 8px;
|
|
}
|
|
.userReviewItem__more.opened:after {
|
|
transform: translateY(3px) rotate(-45deg);
|
|
}
|
|
.userReviewItem.opened .userReviewItem__reviewImage {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 480px;
|
|
}
|
|
.userReviewItem.opened .userReviewItem__reviewImage .userReviewItem__reviewImage__num {
|
|
display: none;
|
|
}
|
|
.userReviewItem.opened .userReviewItem__reviewImage ~ .userReviewItem__reviewImage {
|
|
display: block;
|
|
margin-top: 20px;
|
|
}
|
|
.userReviewItem.opened .userReviewItem__reviewText {
|
|
-webkit-line-clamp: unset;
|
|
overflow: unset;
|
|
margin-bottom: 20px;
|
|
}
|
|
.userReviewItem.opened .userReviewItem__body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.userRefund {
|
|
letter-spacing: 0;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.userRefund__title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.userRefund__inner {
|
|
padding: 12px 16px;
|
|
}
|
|
.userRefund__sectionTitle {
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #50514f;
|
|
margin-bottom: 10px;
|
|
}
|
|
.userRefund__sectionSubTitle {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #50514f;
|
|
margin-bottom: 4px;
|
|
}
|
|
.userRefund__list {
|
|
margin-bottom: 28px;
|
|
}
|
|
.userRefund__list li {
|
|
position: relative;
|
|
font-size: 12px;
|
|
color: #666968;
|
|
margin-bottom: 4px;
|
|
padding-left: 12px;
|
|
}
|
|
.userRefund__list li::before {
|
|
position: absolute;
|
|
content: "·";
|
|
display: block;
|
|
left: 2px;
|
|
top: 0;
|
|
}
|
|
.userRefund .table {
|
|
margin-bottom: 12px;
|
|
}
|
|
.userRefund .table th,
|
|
.userRefund .table td {
|
|
font-size: 12px;
|
|
height: 40px;
|
|
line-height: 1.4;
|
|
}
|
|
.userRefund .table th {
|
|
padding: 6px 12px;
|
|
font-weight: 400;
|
|
}
|
|
.userRefund .table td {
|
|
padding: 6px 8px;
|
|
}
|
|
.userRefund__paragraph {
|
|
font-size: 12px;
|
|
color: #3a3a37;
|
|
margin-bottom: 4px;
|
|
}
|
|
.userRefund a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.photoReviewSlide,
|
|
.storePickReviewSlide {
|
|
padding-top: 48px;
|
|
}
|
|
.photoReviewSlide__imgList li,
|
|
.storePickReviewSlide__imgList li {
|
|
display: block;
|
|
max-width: 100%;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.photoReviewSlide__imgList li img,
|
|
.storePickReviewSlide__imgList li img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.photoReviewSlide__imgList li + li,
|
|
.storePickReviewSlide__imgList li + li {
|
|
margin-top: 16px;
|
|
}
|
|
.photoReviewSlide__fraction,
|
|
.storePickReviewSlide__fraction {
|
|
display: inline !important;
|
|
position: static !important;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
margin-left: 3px;
|
|
color: #979b9d !important;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
letter-spacing: -0.07em;
|
|
}
|
|
.photoReviewSlide__fraction .swiper-pagination-current,
|
|
.storePickReviewSlide__fraction .swiper-pagination-current {
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.photoReviewSlide__content,
|
|
.storePickReviewSlide__content {
|
|
padding-bottom: 64px;
|
|
}
|
|
.photoReviewSlide .bottomBtnControls,
|
|
.storePickReviewSlide .bottomBtnControls {
|
|
padding: 8px 16px 8px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.photoReviewDetail,
|
|
.storePickDetail {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
padding: 16px;
|
|
min-height: 100%;
|
|
}
|
|
.photoReviewDetail__top,
|
|
.storePickDetail__top {
|
|
height: 60px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.photoReviewDetail__top__text,
|
|
.storePickDetail__top__text {
|
|
margin-right: 12px;
|
|
color: #16191d;
|
|
}
|
|
.photoReviewDetail__top__num,
|
|
.storePickDetail__top__num {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: #666968;
|
|
margin-bottom: 4px;
|
|
}
|
|
.photoReviewDetail__top__num .photoReviewDetail__currentIndex,
|
|
.storePickDetail__top__num .photoReviewDetail__currentIndex {
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
}
|
|
.photoReviewDetail__top__seeAll,
|
|
.storePickDetail__top__seeAll {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #3a3a37;
|
|
gap: 2px;
|
|
}
|
|
.photoReviewDetail__top__seeAll::after,
|
|
.storePickDetail__top__seeAll::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 1px solid #666968;
|
|
border-right: 1px solid #666968;
|
|
transform: translateY(1px) rotate(45deg);
|
|
}
|
|
.photoReviewDetail__top__seeAll:hover,
|
|
.storePickDetail__top__seeAll:hover {
|
|
text-decoration: underline;
|
|
color: #3a3a37;
|
|
}
|
|
.photoReviewDetail__item,
|
|
.storePickDetail__item {
|
|
display: flex !important;
|
|
align-items: flex-start;
|
|
}
|
|
.photoReviewDetail__rightTop,
|
|
.storePickDetail__rightTop {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.photoReviewDetail__reviewText,
|
|
.storePickDetail__reviewText {
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
color: #3a3a37;
|
|
line-height: 1.5;
|
|
letter-spacing: -0.01em;
|
|
overflow-y: auto;
|
|
}
|
|
.photoReviewDetail__reviewText::-webkit-scrollbar,
|
|
.storePickDetail__reviewText::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.photoReviewDetail__reviewText::-webkit-scrollbar-thumb,
|
|
.storePickDetail__reviewText::-webkit-scrollbar-thumb {
|
|
background-color: #a3a3a3;
|
|
border-radius: 6px;
|
|
}
|
|
.photoReviewDetail__userImage,
|
|
.storePickDetail__userImage {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-right: 6px;
|
|
margin-top: 3px;
|
|
}
|
|
.photoReviewDetail__userImage img,
|
|
.storePickDetail__userImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.photoReviewDetail__rightBottom,
|
|
.storePickDetail__rightBottom {
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
border-top: 1px solid #e9ecef;
|
|
border-bottom: 1px solid #e9ecef;
|
|
background-color: #ffffff;
|
|
}
|
|
.photoReviewDetail__rightBottom .userReviewItem__like,
|
|
.storePickDetail__rightBottom .userReviewItem__like {
|
|
position: static;
|
|
padding: 6px 16px;
|
|
}
|
|
.photoReviewDetail__rightBottom .userReviewItem__like + .userReviewItem__like,
|
|
.storePickDetail__rightBottom .userReviewItem__like + .userReviewItem__like {
|
|
margin-left: 4px;
|
|
}
|
|
.photoReviewDetail__reviewAsk,
|
|
.storePickDetail__reviewAsk {
|
|
margin-right: auto;
|
|
font-size: 14px;
|
|
color: #16191d;
|
|
}
|
|
.photoReviewDetail__misc,
|
|
.storePickDetail__misc {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.photoReviewDetail__misc__id,
|
|
.storePickDetail__misc__id {
|
|
color: #7e8282;
|
|
}
|
|
.photoReviewDetail__misc__date,
|
|
.storePickDetail__misc__date {
|
|
color: #7e8282;
|
|
}
|
|
.photoReviewDetail__misc > *,
|
|
.storePickDetail__misc > * {
|
|
position: relative;
|
|
}
|
|
.photoReviewDetail__misc > * + *,
|
|
.storePickDetail__misc > * + * {
|
|
margin-left: 8px;
|
|
}
|
|
.photoReviewDetail__misc > * + *::before,
|
|
.storePickDetail__misc > * + *::before {
|
|
position: absolute;
|
|
content: "·";
|
|
color: #979b9d;
|
|
left: -7px;
|
|
}
|
|
.photoReviewDetail__misc__badge,
|
|
.storePickDetail__misc__badge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 40px;
|
|
font-weight: 400;
|
|
background-color: #ff6b6b;
|
|
color: #ffffff;
|
|
margin-left: 2px;
|
|
}
|
|
.photoReviewDetail__thumbs,
|
|
.storePickDetail__thumbs {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
}
|
|
.photoReviewDetail__thumbs__item,
|
|
.storePickDetail__thumbs__item {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.photoReviewDetail__thumbs__item img,
|
|
.storePickDetail__thumbs__item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.photoReviewDetail__thumbs__item::before,
|
|
.storePickDetail__thumbs__item::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.photoReviewDetail__thumbs__item:hover::before,
|
|
.storePickDetail__thumbs__item:hover::before {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.photoReviewDetail__thumbs__item.current::before,
|
|
.storePickDetail__thumbs__item.current::before {
|
|
border: 3px solid #228be6;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.photoReviewGallery {
|
|
display: none;
|
|
}
|
|
.photoReviewGallery.active {
|
|
display: block;
|
|
}
|
|
.photoReviewGallery__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
padding: 16px;
|
|
gap: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
.photoReviewGallery__image {
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.photoReviewGallery__image::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
}
|
|
.photoReviewGallery__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.photoReviewGallery__image:hover::before {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.photoReviewGallery__image.current::before {
|
|
border: 4px solid #228be6;
|
|
background-color: transparent;
|
|
}
|
|
.photoReviewGallery__num {
|
|
position: absolute;
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
line-height: 30px;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.productQnaList__top {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
-webkit-appearance: none;
|
|
padding: 0 16px 14px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
.productQnaList__top::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.productQnaList__top__chevron {
|
|
position: absolute;
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-right: 1px solid #495057;
|
|
border-bottom: 1px solid #495057;
|
|
right: 26px;
|
|
top: 50%;
|
|
transform: translateY(calc(-50% - 14px)) rotate(45deg);
|
|
}
|
|
.productQnaList__item {
|
|
position: relative;
|
|
align-items: flex-start;
|
|
padding: 14px 0 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
-webkit-appearance: none;
|
|
flex-wrap: wrap;
|
|
}
|
|
.productQnaList__item[open] {
|
|
padding-bottom: 0;
|
|
}
|
|
.productQnaList__item[open] .productQnaList__top__chevron {
|
|
transform: translateY(calc(-50% - 10px)) rotate(-135deg);
|
|
}
|
|
.productQnaList__item:first-of-type {
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
.productQnaList:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
.productQnaList__image {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.productQnaList__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.productQnaList__image a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.productQnaList__image a::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
.productQnaList__right {
|
|
flex-grow: 1;
|
|
height: 76px;
|
|
margin-left: 10px;
|
|
padding-top: 1px;
|
|
}
|
|
.productQnaList__info__question {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
line-height: 18px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
padding-right: 36px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.productQnaList__info__question .icon_new-post,
|
|
.productQnaList__info__question .icon_hot-post,
|
|
.productQnaList__info__question .icon_lock {
|
|
vertical-align: top;
|
|
margin-top: 1px;
|
|
margin-left: 1px;
|
|
}
|
|
.productQnaList__info__status {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #666968;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.productQnaList__info__date {
|
|
position: relative;
|
|
margin-left: 20px;
|
|
}
|
|
.productQnaList__info__date::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: #d1d6d8;
|
|
left: -10px;
|
|
top: 2px;
|
|
}
|
|
.productQnaList__answer {
|
|
position: relative;
|
|
padding: 16px;
|
|
border-top: 1px solid #f1f3f5;
|
|
background-color: #fafafa;
|
|
}
|
|
.productQnaList__answer__badge {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background-color: #808080;
|
|
display: inline-block;
|
|
line-height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
.productQnaList__answer__question {
|
|
font-size: 14px;
|
|
margin-top: 28px;
|
|
margin-bottom: 12px;
|
|
padding: 0 4px;
|
|
}
|
|
.productQnaList__answer__reply {
|
|
background-color: #f2f2f2;
|
|
border-radius: 5px;
|
|
padding: 12px 14px;
|
|
font-size: 14px;
|
|
color: #50514f;
|
|
}
|
|
.productQnaList__answer__reply__text {
|
|
line-height: 24px;
|
|
}
|
|
.productQnaList__answer .textBtns {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
.productQnaList__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 14px;
|
|
}
|
|
.productQnaList__controls .select-box {
|
|
display: flex;
|
|
}
|
|
.productQnaList__controls .select-box .nice-select {
|
|
height: 40px;
|
|
line-height: 38px;
|
|
font-size: 14px;
|
|
border: 0;
|
|
}
|
|
.productQnaList .fullBtnSection {
|
|
padding: 16px;
|
|
}
|
|
|
|
.relatedProduct {
|
|
padding: 0 6px;
|
|
text-align: right;
|
|
}
|
|
.relatedProduct__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #1c7ed6;
|
|
text-decoration: underline;
|
|
}
|
|
.relatedProduct__btn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 1px solid currentColor;
|
|
border-right: 1px solid currentColor;
|
|
transform: rotate(45deg);
|
|
margin-left: 4px;
|
|
}
|
|
.relatedProduct__pop {
|
|
padding-bottom: 100px;
|
|
}
|
|
.relatedProduct__inner {
|
|
padding: 16px 0;
|
|
}
|
|
.relatedProduct__inner .product-list-type-1col .product-unit {
|
|
padding: 0;
|
|
}
|
|
.relatedProduct__inner .product-list-type-1col .product-unit:first-of-type::before {
|
|
display: none;
|
|
}
|
|
.relatedProduct__inner .product-list-type-1col .product-unit-image {
|
|
width: 100px;
|
|
}
|
|
.relatedProduct__inner .product-unit-info__inner {
|
|
padding-top: 0;
|
|
}
|
|
.relatedProduct__item {
|
|
padding: 0 16px;
|
|
}
|
|
.relatedProduct__item .product-unit {
|
|
margin-bottom: 12px;
|
|
}
|
|
.relatedProduct__optionBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.relatedProduct__optionBtn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-top: 2px solid #868e96;
|
|
border-right: 2px solid #868e96;
|
|
transform: translateY(-2px) rotate(135deg);
|
|
margin-left: 4px;
|
|
}
|
|
.relatedProduct__optionBtn.opened::after {
|
|
transform: translateY(2px) rotate(-45deg);
|
|
}
|
|
.relatedProduct__option {
|
|
display: none;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.relatedProduct__option.opened {
|
|
display: block;
|
|
}
|
|
|
|
.ddoOptionItem,
|
|
.selectOptionItem {
|
|
margin-bottom: 20px;
|
|
}
|
|
.ddoOptionItem .select-box,
|
|
.selectOptionItem .select-box {
|
|
display: flex;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.inputOptionItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.inputOptionItem .btn {
|
|
height: 48px;
|
|
}
|
|
.reviewBadge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 20px;
|
|
line-height: 18px;
|
|
padding: 0 4px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
background-color: #ffffff;
|
|
color: #228be6;
|
|
border: 1px solid #228be6;
|
|
margin-right: 2px;
|
|
}
|
|
.reviewBadge--red {
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
background-color: #f54a4c;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.couponSelect {
|
|
padding-bottom: 84px;
|
|
}
|
|
.couponSelect__title {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #1c7ed6;
|
|
margin-bottom: 24px;
|
|
}
|
|
.couponSelect__item {
|
|
position: relative;
|
|
display: flex;
|
|
line-height: 1;
|
|
margin-bottom: 28px;
|
|
}
|
|
.couponSelect__item::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f1f3f5;
|
|
bottom: -14px;
|
|
left: 0;
|
|
}
|
|
.couponSelect__item__price {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-bottom: 10px;
|
|
}
|
|
.couponSelect__item__detail {
|
|
color: #16191d;
|
|
font-size: 13px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.couponSelect__item__date {
|
|
color: #979b9d;
|
|
font-size: 13px;
|
|
}
|
|
.couponSelect__item__checkAll {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #16191d;
|
|
}
|
|
.couponSelect__item .b-checkbox-container {
|
|
margin-top: 1px;
|
|
}
|
|
.couponSelect__item__right {
|
|
flex-grow: 1;
|
|
cursor: pointer;
|
|
}
|
|
.couponSelect__item__right > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.couponSelect__item--checkAll {
|
|
align-items: center;
|
|
}
|
|
.couponSelect__item--checkAll .b-checkbox.checkbox:not(.button) {
|
|
margin-right: 0.2rem;
|
|
}
|
|
.couponSelect__item.used {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
.couponSelect__item.used .b-checkbox.checkbox input[type=checkbox] + .check {
|
|
background: transparent;
|
|
}
|
|
.couponSelect__item__usedText {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.storeList {
|
|
overflow: hidden;
|
|
}
|
|
.storeList__top {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 300px;
|
|
}
|
|
.storeList__topImage {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.storeList__topImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.storeList__topText {
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.storeList__title {
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
.storeList__subTitle {
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
.storeList__tab {
|
|
position: relative;
|
|
margin-top: -48px;
|
|
overflow-x: auto;
|
|
margin-inline: auto;
|
|
white-space: nowrap;
|
|
font-size: 0;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
scroll-behavior: smooth;
|
|
padding: 0 16px;
|
|
}
|
|
.storeList__tab::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.storeList__tab__wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.storeList__tabBtn {
|
|
background-color: rgba(0, 0, 0, 0.74);
|
|
height: 48px;
|
|
min-width: 108px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-align: center;
|
|
border-radius: 5px 5px 0 0;
|
|
padding: 0 16px;
|
|
white-space: nowrap;
|
|
margin-right: 4px;
|
|
}
|
|
.storeList__tabBtn:active {
|
|
background-color: rgba(0, 0, 0, 0.84);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
.storeList__tabBtn.current {
|
|
background-color: #ffffff;
|
|
color: #030507;
|
|
}
|
|
.storeList__tabBtn.current .storeList__tabText {
|
|
position: relative;
|
|
}
|
|
.storeList__tabBtn.current .storeList__tabText::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 3px;
|
|
width: 100%;
|
|
background-color: currentColor;
|
|
bottom: -8px;
|
|
left: 0;
|
|
}
|
|
.storeList__content {
|
|
background-color: #ffffff;
|
|
padding: 40px 24px;
|
|
}
|
|
.storeList__subList {
|
|
position: relative;
|
|
margin-bottom: 80px;
|
|
}
|
|
.storeList__subList__top {
|
|
margin-bottom: 24px;
|
|
}
|
|
.storeList__subList__title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #030507;
|
|
}
|
|
.storeList__subList__subTitle {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
}
|
|
.storeList__subList__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
-moz-column-gap: 8px;
|
|
column-gap: 8px;
|
|
row-gap: 8px;
|
|
}
|
|
.storeList__subList__list li a {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 2px;
|
|
border-radius: 5px;
|
|
transition: 0.3s all;
|
|
}
|
|
.storeList__subList__list li a::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-top: 2px solid #c0c0c0;
|
|
border-right: 2px solid #c0c0c0;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(0%) rotate(45deg);
|
|
transition: 0.3s all;
|
|
transition-delay: 150ms;
|
|
opacity: 0;
|
|
}
|
|
.storeList__subList__list li a:active {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.storeList__subList__list li a:active::after {
|
|
opacity: 1;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
.storeList__subList__name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #030507;
|
|
margin-right: 8px;
|
|
}
|
|
.storeList__subList__store {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
}
|
|
.storeList__subList + .storeList__subList::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #ededed;
|
|
top: -40px;
|
|
}
|
|
.storeList__subList:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.storeList__section {
|
|
display: none;
|
|
}
|
|
.storeList__section.current {
|
|
display: block;
|
|
}
|
|
.storeList__searchInner .customer-search__controls {
|
|
max-width: none;
|
|
}
|
|
.storeList__searchInner .customer-search .select-box {
|
|
flex: 1;
|
|
max-width: 200px;
|
|
}
|
|
.storeList__searchInner .customer-search .select-box .nice-select {
|
|
width: 100%;
|
|
}
|
|
.storeList__storeLink {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.storeSearchList__item {
|
|
position: relative;
|
|
padding: 16px;
|
|
}
|
|
.storeSearchList__item + .storeSearchList__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
left: 16px;
|
|
right: 16px;
|
|
height: 1px;
|
|
background-color: #e9ecef;
|
|
top: 0;
|
|
}
|
|
.storeSearchList__storeName {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #0d0f12;
|
|
margin-bottom: 10px;
|
|
}
|
|
.storeSearchList__storeName img {
|
|
width: 22px;
|
|
height: 22px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.storeSearchList__address {
|
|
color: #3a3a37;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
margin-bottom: 4px;
|
|
}
|
|
.storeSearchList__phone {
|
|
color: #666968;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.productDetailGallery {
|
|
margin-bottom: 24px;
|
|
}
|
|
.productDetailGallery .swiper-slide img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
max-height: 400px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.storeDetail {
|
|
padding: 16px;
|
|
}
|
|
.storeDetail__top {
|
|
margin-bottom: 32px;
|
|
text-align: center;
|
|
}
|
|
.storeDetail__storeName {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 2px solid #979b9d;
|
|
color: #16191d;
|
|
}
|
|
.storeDetail__text {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
}
|
|
.storeDetail__table {
|
|
margin-bottom: 52px;
|
|
}
|
|
.storeDetail__phoneBtn {
|
|
margin-left: 4px;
|
|
}
|
|
.storeDetail__phoneBtn.btn {
|
|
padding: 0 8px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.progressEvents {
|
|
display: grid;
|
|
}
|
|
.progressEvents__item {
|
|
position: relative;
|
|
}
|
|
.progressEvents__item > a {
|
|
display: block;
|
|
padding: 24px 16px 20px;
|
|
}
|
|
.progressEvents__item + .progressEvents__item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
left: 16px;
|
|
right: 16px;
|
|
height: 1px;
|
|
background-color: #e9ecef;
|
|
top: 0;
|
|
}
|
|
.progressEvents__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #0d0f12;
|
|
margin-bottom: 8px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.progressEvents__bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.progressEvents__bottom .eventList__list {
|
|
margin-top: 0;
|
|
}
|
|
.progressEvents__bottom .eventList__list li {
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
}
|
|
.progressEvents__image {
|
|
margin-bottom: 8px;
|
|
width: 100%;
|
|
}
|
|
.progressEvents__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
.progressEvents__dDay {
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
background-color: #e03131;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
padding: 0 10px;
|
|
border-radius: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
.progressEvents__date {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
padding-bottom: 2px;
|
|
}
|
|
.progressEvents__no-result {
|
|
grid-column: span 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 72px 0 60px;
|
|
}
|
|
.progressEvents__no-result-text {
|
|
margin-top: 20px;
|
|
letter-spacing: -0.025em;
|
|
font-size: 16px;
|
|
color: #343a40;
|
|
}
|
|
|
|
.eventDetail {
|
|
padding: 16px;
|
|
}
|
|
.eventDetail__top {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.eventDetail__title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #16191d;
|
|
margin-bottom: 8px;
|
|
}
|
|
.eventDetail__date {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
}
|
|
.eventDetail__image {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
.eventDetail__image img {
|
|
display: inline-block;
|
|
}
|
|
|
|
.eventDetail__image.ck-content .table {
|
|
border-top: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.eventDetail__image.ck-content .table table{
|
|
border: none;
|
|
}
|
|
|
|
.eventDetail__image.ck-content .table table tr{
|
|
border-bottom: none;
|
|
}
|
|
|
|
.eventDetail__image.ck-content .table table td{
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.eventDetail__image.ck-content .table table th, .eventDetail__image.ck-content .table table td{
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.eventDetail__answer {
|
|
border: 1px solid #dee2e6;
|
|
padding: 24px 12px;
|
|
border-radius: 12px;
|
|
margin-inline: auto;
|
|
margin-bottom: 40px;
|
|
}
|
|
.eventDetail__answer__nonMember {
|
|
display: block;
|
|
padding-bottom: 28px;
|
|
margin-bottom: 28px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.eventDetail__answer__nonMember .input-text {
|
|
font-size: 16px;
|
|
padding-left: 8px;
|
|
margin-bottom: 4px;
|
|
height: 48px;
|
|
background-color: #f5f5f5;
|
|
border: none;
|
|
}
|
|
.eventDetail__answer__nonMember .input-text:focus {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.eventDetail__answer__nonMember .signUp__inputBox__itemTitle {
|
|
display: block;
|
|
color: #212529;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding-left: 4px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.eventDetail__answer__nonMember .signUp__inputBox__alertText {
|
|
font-size: 14px;
|
|
color: #f03e3e;
|
|
padding-left: 4px;
|
|
}
|
|
.eventDetail__answer__nonMember .signUp__inputBox__item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.eventDetail__answer__nonMember .signUpTerms__misc__item {
|
|
text-align: right;
|
|
}
|
|
.eventDetail__answer__nonMember .signUpTerms__misc__item .b-checkbox-container {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
.eventDetail__answer__nonMember .signUpTerms__misc__item .signUpTerms__misc__detail {
|
|
vertical-align: top;
|
|
position: relative;
|
|
right: auto;
|
|
top: auto;
|
|
margin-top: 1px;
|
|
}
|
|
.eventDetail__answer__inputWrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.eventDetail__answer__inputWrapper .signUp__inputBox__alertText {
|
|
font-size: 14px;
|
|
color: #f03e3e;
|
|
padding-left: 4px;
|
|
}
|
|
.eventDetail__answer__input {
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 0 8px;
|
|
background-color: #f5f5f5;
|
|
color: #030507;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #030507;
|
|
outline: none;
|
|
transition: all 0.2s ease-in-out;
|
|
margin-bottom: 10px;
|
|
}
|
|
.eventDetail__answer__input:focus {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.eventDetail__answer__btn {
|
|
display: block;
|
|
text-align: center;
|
|
height: 60px;
|
|
width: 100%;
|
|
background-color: #e03131;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
margin-bottom: 4px;
|
|
}
|
|
.eventDetail__content {
|
|
min-height: 200px;
|
|
}
|
|
.eventDetail__list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 2px;
|
|
}
|
|
.eventDetail__list li {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
}
|
|
.eventDetail__list li + li::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: currentColor;
|
|
margin: 0 8px;
|
|
opacity: 0.4;
|
|
}
|
|
.eventDetail .sub-bottom-btn-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
gap: 12px;
|
|
}
|
|
.eventDetail .main-section-header {
|
|
padding: 0;
|
|
}
|
|
.eventDetail .product-list-vertical-twoAndaHalf .product-list-vertical-twoAndaHalf__swiper {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prev-next .prev-next__item {
|
|
display: flex;
|
|
border-top: 1px solid #f1f3f5;
|
|
width: 100%;
|
|
}
|
|
.prev-next .prev-next__item .prev-next__title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
padding: 16px 16px 16px 24px;
|
|
flex-shrink: 0;
|
|
color: #666968;
|
|
}
|
|
.prev-next .prev-next__item .prev-next__link {
|
|
font-size: 14px;
|
|
padding: 16px 16px 16px 12px;
|
|
flex-grow: 1;
|
|
color: #0d0f12;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.prev-next .prev-next__item:last-child {
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
|
|
.eventSurvey {
|
|
padding: 16px;
|
|
}
|
|
.eventSurvey__item {
|
|
margin-bottom: 48px;
|
|
}
|
|
.eventSurvey__question {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.eventSurvey__badge {
|
|
display: inline-block;
|
|
background-color: #f76707;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.eventSurvey__questionText {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
.eventSurvey__btn.btn {
|
|
height: 60px;
|
|
font-size: 18px;
|
|
}
|
|
.eventSurvey .custom-radio-container {
|
|
flex-wrap: wrap;
|
|
-moz-column-gap: 16px;
|
|
column-gap: 16px;
|
|
row-gap: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.eventComment {
|
|
margin-bottom: 60px;
|
|
}
|
|
.eventComment .productReview__subTitle {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.comment-write {
|
|
overflow: hidden;
|
|
margin-bottom: 60px;
|
|
}
|
|
.comment-write__textarea-container {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
padding: 8px 10px;
|
|
border: 1px solid #dee2e6;
|
|
background-color: #ffffff;
|
|
height: 120px;
|
|
border-radius: 4px;
|
|
}
|
|
.comment-write__textarea-container:focus-within {
|
|
border-color: #868e96;
|
|
}
|
|
.comment-write__textarea {
|
|
resize: none;
|
|
outline: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 15px;
|
|
}
|
|
.comment-write__bottom {
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
.comment-write__info {
|
|
margin-top: 10px;
|
|
}
|
|
.comment-write__info-inner {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
border-radius: 4px;
|
|
}
|
|
.comment-write__info-item {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.comment-write__info-item:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
.comment-write__info-item:first-child .comment-write__info-input {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
.comment-write__info-item:first-child .comment-write__info-input:focus {
|
|
outline: 1px solid #868e96;
|
|
}
|
|
.comment-write__info-item:only-child {
|
|
border-radius: 4px;
|
|
}
|
|
.comment-write__info-item + .comment-write__info-item {
|
|
border-left: none;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.comment-write__info-item + .comment-write__info-item .comment-write__info-input {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.comment-write__info-item + .comment-write__info-item .comment-write__info-input:focus {
|
|
outline: 1px solid #868e96;
|
|
}
|
|
.comment-write__info-input {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 8px;
|
|
font-size: 14px;
|
|
}
|
|
.comment-write__info-input:focus {
|
|
outline: 1px solid #868e96;
|
|
}
|
|
.comment-write__button {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
background-color: #212529;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
.comment-write__button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.comment-write__controls {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: 10px;
|
|
}
|
|
.comment-write__controls .b-checkbox-container {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.comment-edit {
|
|
overflow: hidden;
|
|
}
|
|
.comment-edit__textarea-container {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
padding: 8px;
|
|
background-color: #f7f7f7;
|
|
border-radius: 4px 0 0 4px;
|
|
height: 120px;
|
|
}
|
|
.comment-edit__textarea-container:focus-within {
|
|
border-color: #868e96;
|
|
}
|
|
.comment-edit__textarea {
|
|
resize: none;
|
|
outline: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 15px;
|
|
}
|
|
.comment-edit__button {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
height: 48%;
|
|
background-color: #212529;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-weight: 400;
|
|
}
|
|
.comment-edit__button--remove {
|
|
background-color: #7e8282;
|
|
}
|
|
.comment-edit__button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.comment-edit__btnContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.comment-body__area {
|
|
background-color: #ffffff;
|
|
margin-bottom: 60px;
|
|
}
|
|
.comment-body__item {
|
|
padding: 16px 0;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
.comment-body__item:last-child {
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
.comment-body__nested-container {
|
|
display: none;
|
|
margin-top: 10px;
|
|
border: 1px solid #eaeaea;
|
|
}
|
|
.comment-body__nested-container.opened {
|
|
display: block;
|
|
}
|
|
.comment-body__nested-container .comment-body__item {
|
|
position: relative;
|
|
background-color: #fafafa;
|
|
padding: 12px 12px 12px 32px;
|
|
}
|
|
.comment-body__nested-container .comment-body__item::before {
|
|
content: "";
|
|
position: absolute;
|
|
border: 1px solid #b0b0b0;
|
|
border-width: 0 0 1px 1px;
|
|
width: 10px;
|
|
height: 10px;
|
|
left: 12px;
|
|
top: 15px;
|
|
}
|
|
.comment-body__nested-container .comment-body__item:first-child {
|
|
border-top: none;
|
|
}
|
|
.comment-body__nested-container .comment-body__item + .comment-body__item {
|
|
margin-top: 0;
|
|
}
|
|
.comment-body__nested-container .comment-body__item.close {
|
|
padding: 8px 18px;
|
|
text-align: center;
|
|
color: #505050;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
.comment-body__nested-container .comment-body__item.close::after {
|
|
content: "";
|
|
position: relative;
|
|
top: 1px;
|
|
margin-left: 3px;
|
|
display: inline-block;
|
|
border-right: 2px solid #808080;
|
|
border-bottom: 2px solid #808080;
|
|
width: 8px;
|
|
height: 8px;
|
|
transform: rotate(-135deg);
|
|
}
|
|
.comment-body__nested-container .comment-body__item.close::before {
|
|
content: none;
|
|
}
|
|
.comment-body__nested-container .comment-body__item .comment-like {
|
|
justify-content: flex-end;
|
|
margin-top: 8px;
|
|
}
|
|
.comment-body__nested-container .comment-write {
|
|
margin-bottom: 0;
|
|
}
|
|
.comment-body__info {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
}
|
|
.comment-body__info-left {
|
|
margin-right: auto;
|
|
}
|
|
.comment-body__info-left > * + * {
|
|
margin-left: 2px;
|
|
}
|
|
.comment-body__info-left .icon_comment-user {
|
|
vertical-align: top;
|
|
margin-top: 2px;
|
|
}
|
|
.comment-body__info-left .icon_new-post,
|
|
.comment-body__info-left .icon_hot-post {
|
|
vertical-align: top;
|
|
margin-top: 4px;
|
|
margin-left: 4px;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.comment-body__user {
|
|
font-size: 14px;
|
|
color: #0d0f12;
|
|
font-weight: 500;
|
|
}
|
|
.comment-body__date {
|
|
position: relative;
|
|
font-size: 14px;
|
|
color: #7e8282;
|
|
margin-left: 8px;
|
|
}
|
|
.comment-body__date::before {
|
|
position: absolute;
|
|
content: "·";
|
|
color: #979b9d;
|
|
left: -7px;
|
|
}
|
|
.comment-body__button {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
color: #505050;
|
|
}
|
|
.comment-body__button + .comment-body__button {
|
|
margin-left: 12px;
|
|
}
|
|
.comment-body__button + .comment-body__button::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
background-color: currentColor;
|
|
width: 1px;
|
|
height: 10px;
|
|
left: -8px;
|
|
top: 5px;
|
|
opacity: 0.45;
|
|
}
|
|
.comment-body__button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.comment-body__content {
|
|
font-size: 14px;
|
|
color: #0d0f12;
|
|
min-height: 40px;
|
|
line-height: 24px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.comment-body__content .icon_lock {
|
|
vertical-align: top;
|
|
margin-top: 4px;
|
|
margin-right: 2px;
|
|
}
|
|
.comment-body__reply-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 12px;
|
|
}
|
|
.comment-body__reply-button {
|
|
color: #7e8282;
|
|
font-weight: 500;
|
|
padding: 4px 4px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
}
|
|
.comment-body__reply-button em {
|
|
color: #212529;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
.comment-body__privateComment {
|
|
color: #7e8282;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.comment-like {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-right: -6px;
|
|
}
|
|
.comment-like__btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px;
|
|
}
|
|
.comment-like__btn svg,
|
|
.comment-like__btn path {
|
|
fill: #979b9d;
|
|
}
|
|
.comment-like__btn--dislike svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
.comment-like__btn:hover svg,
|
|
.comment-like__btn:hover path {
|
|
fill: #7e8282;
|
|
}
|
|
.comment-like__btn:hover .comment-like__number {
|
|
color: #50514f;
|
|
}
|
|
.comment-like__number {
|
|
font-size: 14px;
|
|
color: #666968;
|
|
font-weight: 500;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.termsPage {
|
|
padding: 16px;
|
|
}
|
|
.brandIntroImages {
|
|
text-align: center;
|
|
}
|
|
.brandIntroImages img {
|
|
display: inline-block;
|
|
}
|
|
|
|
.brandIntroMap {
|
|
padding: 16px;
|
|
}
|
|
.brandIntroMap__top {
|
|
margin-bottom: 32px;
|
|
text-align: center;
|
|
}
|
|
.brandIntroMap__storeName {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 2px solid #979b9d;
|
|
color: #16191d;
|
|
}
|
|
.brandIntroMap__text {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #666968;
|
|
}
|
|
|
|
.cartItem--postItem {
|
|
border-bottom: 1px solid #dee2e6;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-top: 1px solid #dee2e6;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.postQuestion {
|
|
color: #16191d;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.postAnswer {
|
|
border-radius: 5px;
|
|
padding: 12px 14px 20px;
|
|
color: #16191d;
|
|
background-color: #f7f7f7;
|
|
}
|
|
.postAnswer__top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.postAnswer__admin {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #7e8282;
|
|
}
|
|
.postAnswer__text {
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
}
|
|
.postAnswer__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-bottom: 8px;
|
|
}
|
|
.postAnswer__badge {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background-color: #7e8282;
|
|
display: inline-block;
|
|
line-height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.postLikeBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #212529;
|
|
padding: 8px 14px;
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.postLikeBtn:hover {
|
|
background-color: #f7f7f7;
|
|
}
|
|
.postLikeBtn__text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
.postLikeBtn svg,
|
|
.postLikeBtn path {
|
|
fill: #495057;
|
|
}
|
|
.postLikeBtn em {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
}
|
|
.postLikeBtn.clicked {
|
|
background-color: #909090;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
}
|
|
.postLikeBtn.clicked svg,
|
|
.postLikeBtn.clicked path {
|
|
fill: #ffffff;
|
|
}
|
|
.postLikeBtn.clicked em {
|
|
color: #ffffff;
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn svg,
|
|
.postLikeBtn--dislike.postLikeBtn path {
|
|
fill: #495057;
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn em {
|
|
color: #212529;
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn.clicked {
|
|
background-color: #909090;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn.clicked svg,
|
|
.postLikeBtn--dislike.postLikeBtn.clicked path {
|
|
fill: #ffffff;
|
|
}
|
|
.postLikeBtn--dislike.postLikeBtn.clicked em {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.postEditBtns {
|
|
margin-top: -2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.postEditBtns .fullBtnSection {
|
|
padding: 14px 16px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.giftCardInform__inner {
|
|
padding: 24px 16px 60px;
|
|
}
|
|
.giftCardInform__inner .customerMain__boardList li summary {
|
|
position: relative;
|
|
padding: 6px 0;
|
|
font-size: 15px;
|
|
}
|
|
.giftCardInform__inner .customerMain__boardList li summary::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid #495057;
|
|
border-width: 0 0 2px 2px;
|
|
display: inline-block;
|
|
top: 50%;
|
|
right: 16px;
|
|
transform: translateY(calc(-50% - 3px)) rotate(-45deg);
|
|
}
|
|
.giftCardInform__inner .customerMain__boardList li a {
|
|
display: inline;
|
|
color: #50514f;
|
|
text-decoration: underline;
|
|
text-decoration-color: #979b9d;
|
|
}
|
|
.giftCardInform__inner .customerMain__boardContent {
|
|
padding: 20px 4px;
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
.giftCardInform__top {
|
|
margin-bottom: 36px;
|
|
}
|
|
.giftCardInform__title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
.giftCardInform__subTitle {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #7e8282;
|
|
text-align: center;
|
|
}
|
|
|
|
.giftCardIntro {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
-moz-column-gap: 12px;
|
|
column-gap: 12px;
|
|
row-gap: 40px;
|
|
max-width: 560px;
|
|
margin-inline: auto;
|
|
}
|
|
.giftCardIntro__box {
|
|
text-align: center;
|
|
padding: 40px 7%;
|
|
background-color: #f7f7f7;
|
|
border-radius: 28px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.giftCardIntro__box img {
|
|
display: inline-block;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.giftCardIntro__price {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.wrap_error {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
padding: 80px 16px 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.inner_error {
|
|
text-align: center;
|
|
}
|
|
.inner_error img {
|
|
margin-inline: auto;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.tit_error {
|
|
display: block;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
color: #030507;
|
|
}
|
|
.tit_error em {
|
|
font-style: normal;
|
|
color: #1c7ed6;
|
|
}
|
|
|
|
.desc_error {
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: #50514f;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.desc_info {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
margin-inline: auto;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
color: #212529;
|
|
border-top: 1px solid #e0e4e5;
|
|
border-bottom: 1px solid #e0e4e5;
|
|
margin-bottom: 20px;
|
|
padding: 14px 28px;
|
|
background-color: #ffffff;
|
|
}/*# sourceMappingURL=default.css.map */ |