/* Original CSS loaded via in layout.tsx */
/* ═══════════════════════════════════════════════════ */
/* GLOBAL FIX: Mobile overflow prevention */
/* Crawled CSS sets fixed widths on res-pc class. */
/* Override with max-width to prevent horizontal */
/* scroll on mobile viewports. */
/* ═══════════════════════════════════════════════════ */
html, body {
max-width: 100vw !important;
overflow-x: hidden !important;
}
#wrap, #container {
max-width: 100% !important;
/* clip instead of hidden: prevents horizontal scroll without creating a
scroll container, which would break position:sticky on descendants */
overflow-x: clip !important;
}
#wrap:has(.xans-product-detail) .contents .xans-element-.xans-product.xans-product-additional{
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 768px) {
#wrap:has(.xans-product-detail) .contents {
padding-left: 1.2rem !important;
padding-right: 1.2rem !important;
padding-bottom: 1.2rem !important;
}
}
@media (max-width: 768px) {
.site-wrap {
max-width: 100% !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
#header .inner {
max-width: 100% !important;
overflow: hidden;
}
.cate-swiper-container {
max-width: 100% !important;
overflow-x: auto !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* MyPage: Layout & styling */
/* ═══════════════════════════════════════════════════ */
.myshopArea {
max-width: 1320px;
}
@media screen and (max-width: 390px) {
.myshopArea {
padding: 0 20px;
}
}
/* All page content is wrapped in this column; it fills the space beside the sidebar */
.myshopArea__content {
flex: 1;
min-width: 0;
}
/* #myshopMain {
flex: 0 0 220px;
order: -1;
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
} */
#myshopMain .title {
font-size: 22px;
font-weight: 700;
color: #111;
padding-bottom: 20px;
border-bottom: 2px solid #111;
margin-bottom: 20px;
}
#myshopMain .subTitle h3 {
font-size: 16px;
font-weight: 600;
color: var(--basic);
font-weight: bold;
text-transform: uppercase;
margin: 24px 0 8px;
padding: 0;
}
#myshopMain .menu {
list-style: none;
padding: 0;
margin: 0;
}
#myshopMain .menu li {
margin: 0;
}
#myshopMain .menu li a {
display: block;
padding: 8px 0;
font-size: 14px;
color: #333;
text-decoration: none;
transition: color 0.15s;
}
#myshopMain .menu li a:hover {
color: #FF5D01;
}
#myshopMain .menu_last {
border-bottom: none;
padding-bottom: 0;
}
/* ═══════════════════════════════════════════════════ */
/* MyPage: juicebox pixel-perfect override */
/* Scoped via .myshopArea.myshopArea--juicebox so other sites */
/* (malone / vaporwave / damivape) keep their custom */
/* card-style mypage unchanged. */
/* ═══════════════════════════════════════════════════ */
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook,
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbenefit {
display: block;
gap: normal;
background: #f9f9f9;
margin-bottom: 24px;
}
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul,
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbenefit > ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
padding: 0;
list-style: none;
}
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul > li,
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbenefit > ul > li {
flex: 1 1 0;
padding: 28px 0 27px;
background: transparent;
border-radius: 0;
text-align: center;
position: relative;
box-sizing: border-box;
}
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul > li > div,
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbenefit > ul > li > div {
padding: 0;
}
/* Hide legacy .user block on desktop — live Cafe24 shows only .group */
@media (min-width: 1025px) {
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user {
display: none;
}
}
/* Vertical dividers between benefit cards (live parity) */
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul > li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 48px;
margin-top: -24px;
background: #e5e5e5;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate {
display: block;
border: 0;
border-radius: 0;
padding: 0;
margin-bottom: 20px;
justify-content: normal;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .state {
overflow: hidden;
border-top: 1px solid #000;
border-bottom: 1px solid #e5e5e5;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .state__order {
display: flex;
margin: 0;
padding: 0;
list-style: none;
justify-content: normal;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .state__order > li {
width: 25%;
flex: none;
padding: 35px 0 33px;
text-align: center;
position: relative;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .label {
display: block;
font-size: 13px;
color: #000;
}
@media (max-width: 1024px) {
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul > li:not(:last-child)::after {
display: none;
}
}
@media (max-width: 768px) {
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbankbook > ul,
.myshopArea.myshopArea--juicebox .xans-myshop-asyncbenefit > ul {
flex-direction: column;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .state__order {
flex-wrap: wrap;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderstate .state__order > li {
width: 50%;
padding: 20px 0;
}
}
/* MyPage orders — match live Cafe24 (/myshop/order/list.html) computed styles */
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorytab {
margin: 0;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorytab .menu li {
flex: 0 0 auto;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorytab .menu li a {
white-space: nowrap;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorytab .menu li span {
display: inline;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistoryhead .btnSubmit,
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistoryhead .btnSubmit.sizeM {
background: #333;
border: 1px solid transparent;
border-radius: 5px;
}
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorylistitem .prdName,
.myshopArea.myshopArea--juicebox .xans-myshop-orderhistorylistitem .prdName a {
font-weight: 700;
}
/* ═══════════════════════════════════════════════════ */
/* Toast animation */
/* ═══════════════════════════════════════════════════ */
@keyframes toastSlideUp {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ═══════════════════════════════════════════════════ */
/* GLOBAL FIX: Override original-styles.css Swiper */
/* The crawled CSS contains .swiper-wrapper{flex- */
/* direction:column} which forces vertical stacking. */
/* This global rule counteracts it for ALL swipers. */
/* ═══════════════════════════════════════════════════ */
.swiper-wrapper {
flex-direction: row !important;
}
/* ═══════════════════════════════════════════════════ */
/* FIX: Cafe24 wp-effect / animate.css visibility */
/* Original site uses JS scroll-reveal to add */
/* wp-completely class. Without JS, elements stay */
/* hidden (opacity:0 / visibility:hidden). */
/* Force all animated elements to be visible. */
/* ═══════════════════════════════════════════════════ */
/* wp-effect elements start hidden, revealed by scroll-reveal.tsx via IntersectionObserver */
.wp-effect:not(.wp-completely) {
opacity: 0;
visibility: hidden;
}
.wp-effect.wp-completely {
opacity: 1;
visibility: visible;
}
:root {
--brand-primary: #ff972c;
--brand-primary-dark: #e88520;
--brand-dark: #333333;
--brand-text: #111111;
--brand-gray: #555555;
--brand-light: #f5f5f5;
--brand-red: #e44040;
--brand-bg: #ffffff;
}
body {
background: var(--brand-bg);
color: var(--brand-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Korean e-commerce price formatting */
.price-sale {
color: var(--brand-red);
font-weight: 700;
}
.price-original {
color: var(--brand-gray);
text-decoration: line-through;
font-size: 0.75rem;
}
.discount-badge {
background: var(--brand-red);
color: white;
font-weight: 700;
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 2px;
}
/* Global image constraints — prevent layout overflow */
#contents img {
max-width: 100%;
height: auto;
}
/* Hot deal product cards — override global .swiper-slide sizing */
.index_prd_deal .swiper-slide {
width: 50% !important;
min-width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
box-sizing: border-box;
}
@media (min-width: 768px) {
.index_prd_deal .ec-base-product .prdList .prdList__item {
display: flex !important;
flex-direction: row !important;
padding: 2rem;
gap: 2rem;
align-items: center;
background: #fff;
border-radius: 1.5rem;
box-shadow: 0 0 7px rgba(0,0,0,0.07);
}
.index_prd_deal .ec-base-product .prdList .thumbnail,
.index_prd_deal .ec-base-product .prdList .description {
flex: 1 !important;
width: auto !important;
margin: 0;
padding: 0;
}
.index_prd_deal .ec-base-product .prdList .thumbnail img {
width: 100%;
max-width: 280px;
border-radius: 1rem;
}
.index_prd_deal .ec-base-product .prdList .description {
padding: 1rem 0;
}
}
/* Product detail two-column layout fix (Cafe24 uses inline-block) */
.xans-product-detail .detailArea {
display: flex !important;
gap: 0;
max-width: 1280px;
margin: 0 auto;
padding: 20px 0;
}
/* imgArea can be a direct child (juicebox) or wrapped in .leftArea (malone) */
.xans-product-detail .detailArea > .xans-product-image,
.xans-product-detail .detailArea > .imgArea,
.xans-product-detail .detailArea > .leftArea {
flex: 0 0 calc(100% - 660px);
max-width: calc(100% - 660px);
font-size: 14px;
line-height: 1.6;
}
/* infoArea can be a direct child or wrapped in .rightArea (malone) */
.xans-product-detail .detailArea > .infoArea,
.xans-product-detail .detailArea > .rightArea {
flex: 0 0 660px;
max-width: 660px;
font-size: 13px;
line-height: 1;
min-width: 0;
vertical-align: top;
}
/* direct infoArea child: keep margin */
.xans-product-detail .detailArea > .infoArea {
margin-left: 100px;
}
/* malone: infoArea inside .rightArea — sticky within the tall right column */
.xans-product-detail .detailArea > .rightArea > .infoArea {
position: sticky;
top: 110px;
margin-left: 100px;
}
/* Info area table styling */
.xans-product-detail .infoArea th {
font-weight: normal;
width: 106px;
text-align: left;
vertical-align: top;
padding: 5px 0;
}
.xans-product-detail .infoArea select {
width: 100%;
border-radius: 5px;
}
/* Product title */
.xans-product-detail .headingArea h1 {
font-size: 25px;
line-height: 1.2;
font-weight: bold;
display: block;
}
/* Total price area */
#totalPrice {
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 20px 0 26px;
}
#totalPrice .title {
font-size: 15px;
font-weight: normal;
margin-right: 8px;
line-height: 26px;
}
#totalPrice .total {
font-size: 13px;
color: #7d7d7d;
line-height: 26px;
}
#totalPrice .total strong {
font-size: 20px;
color: #000;
}
#totalPrice .total em {
font-style: normal;
}
#totalPrice .qty {
color: #7d7d7d;
font-weight: normal;
font-size: 0;
}
/* Tab bar - evenly spaced across full width */
.xans-product-additional .ec-base-tab.gFlex .menu {
display: flex;
border: 0;
margin: 0;
}
.xans-product-additional .ec-base-tab.gFlex .menu li {
display: flex;
align-items: center;
flex: 1;
background: #fff;
color: #222;
border: 0;
position: relative;
}
.xans-product-additional .ec-base-tab.gFlex .menu li a {
width: 100%;
padding: 0;
color: #222;
background: #fff;
border: 0;
border-bottom: 1px solid #dbdbdb;
font-size: 17px;
height: 70px;
line-height: 70px;
text-align: center;
display: inline-block;
text-decoration: none;
}
.xans-product-additional .ec-base-tab.gFlex .menu li.selected {
border: 0;
}
.xans-product-additional .ec-base-tab.gFlex .menu li.selected a {
border-bottom: 3px solid #111;
font-weight: bold;
}
@media (max-width: 768px) {
.xans-product-detail .detailArea {
flex-direction: column !important;
gap: 20px;
}
.xans-product-detail .detailArea > .xans-product-image,
.xans-product-detail .detailArea > .imgArea,
.xans-product-detail .detailArea > .leftArea,
.xans-product-detail .detailArea > .infoArea,
.xans-product-detail .detailArea > .rightArea {
flex: none;
max-width: 100%;
margin-left: 0;
}
.xans-product-detail .detailArea > .rightArea > .infoArea {
position: static;
margin-left: 0;
}
.xans-product-detail .headingArea h1 {
font-size: 1.4rem;
}
.xans-product-additional .ec-base-tab.gFlex .menu li a {
font-size: 1.05rem;
height: 3.5rem;
line-height: 3.5rem;
}
}
/* Product detail image constraints */
.xans-product-detail .imgArea img,
.xans-product-detail .imgArea .keyImg img,
.xans-product-image img {
max-width: 100%;
height: auto;
}
/* Option area layout */
#optionG .wp-opt-box2 {
display: grid;
margin-top: 20px;
}
#optionG .wp-opt-box3 {
order: 2;
}
#optionG #totalProducts {
order: 1;
}
/* Product detail description overflow */
.edibot-product-detail img,
#prdDetail img {
max-width: 100%;
height: auto;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Banner Slider (CSS-only auto-slide) */
/* ═══════════════════════════════════════════════════ */
/* Hero banner — matching original Cafe24 slider layout */
.index_ban_100 {
overflow: hidden; /* outer clips the overflowing slides */
margin: 15px 0 0;
}
.index_ban_100 .swiper-container {
position: relative;
overflow: visible !important; /* allows prev/next slides to peek */
max-width: 1292px;
margin: 0 auto;
padding: 0 15px;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Sub-menu banner (index_ban_200) */
/* ═══════════════════════════════════════════════════ */
/* Swiper JS handles layout — original CSS in master-styles.css covers styling */
/* ═══════════════════════════════════════════════════ */
/* Homepage: Center banners (index_ban_500) */
/* ═══════════════════════════════════════════════════ */
.index_ban_500 .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
gap: 15px;
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
list-style: none;
padding: 0;
}
.index_ban_500 .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.index_ban_500 .swiper-slide {
flex: 0 0 calc(50% - 8px);
}
.index_ban_500 .swiper-slide img {
width: 100%;
height: auto;
display: block;
border-radius: 0.9rem;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Bottom banner (index_ban_300) */
/* ═══════════════════════════════════════════════════ */
/* Reset Swiper base pagination positioning — the fraction indicator
sits as a sibling of .swiper-container inside .site-wrap, so the
library default (bottom: 10px; left: 0; width: 100%) places it
absolutely within the wrong ancestor. */
.index_ban_300 .swiper-pagination-fraction,
.index_ban_300 .swiper-pagination-horizontal {
bottom: auto;
left: auto;
width: auto;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Product Grid Layout */
/* ═══════════════════════════════════════════════════ */
.ec-base-product .prdList {
margin: 0;
text-align: left;
font-size: 0;
line-height: 0;
list-style: none;
padding: 0;
}
.ec-base-product .prdList > li,
.prdList > li {
display: inline-block !important;
vertical-align: top;
color: #757575;
font-size: 14px;
line-height: 1.4;
margin-bottom: 30px;
box-sizing: border-box;
}
/* Grid: 5 columns — desktop rule is provided by crawled master-styles.css
(width:19%; margin-right:1.25%). Previous override here forced
calc(20% - 19px) !important but the paired margin-left:23px was
overridden by master-styles' `.ec-base-product .prdList > li { margin: 0 0 18px }`,
leaving a 23px gap on the right of every row. See mobile @media override below. */
/* Grid: 4 columns */
.prdList.grid4 > li {
width: calc(25% - 19px) !important;
margin-left: 25px;
}
.prdList.grid4 > li:nth-child(4n+1) {
margin-left: 0;
}
/* Grid: 3 columns */
.prdList.grid3 > li {
width: calc(33.33% - 18px) !important;
margin-left: 27px;
}
.prdList.grid3 > li:nth-child(3n+1) {
margin-left: 0;
}
/* Grid: 3 columns → 2 columns on mobile (m_grid2) */
@media (max-width: 1024px) {
.prdList.grid3.m_grid2 > li {
width: calc(50% - 0.5rem) !important;
margin-left: 1rem !important;
}
.prdList.grid3.m_grid2 > li:nth-child(3n+1) {
margin-left: 1rem !important;
}
.prdList.grid3.m_grid2 > li:nth-child(2n+1) {
margin-left: 0 !important;
}
}
/* Product card image constraints */
.prdList > li .thumbnail {
position: relative;
overflow: hidden;
margin: 0 0 14px;
background: #f9f9f9;
border-radius: 0.9rem;
}
.prdList > li .thumbnail .prdImg {
border: 0;
}
.prdList > li .thumbnail a img,
.prdList > li .thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
border-radius: 0.9rem;
box-sizing: border-box;
}
.prdList > li .prdList__item {
position: relative;
}
/* Description / text area */
.prdList > li .description {
font-size: 14px;
line-height: 1.5;
padding: 0 5px;
}
/* Product name/price: measured 16px from original, master-styles.css sets 1.1rem !important
which resolves to 14px at html font-size 13px. Override to match original. */
.prdList > li .description .name a,
.prdList > li .description .name a * {
color: #000;
text-decoration: none;
font-size: 16px !important;
}
.ec-base-product .prdList .product_price span,
.ec-base-product .prdList .price span {
font-size: 16px !important;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Swiper product sections (horizontal) */
/* ═══════════════════════════════════════════════════ */
/* For sections using swiper-wrapper as a product list */
/* gap/overflow-x 는 swiper-init.tsx 의 spaceBetween:15 + transform 방식이 관리 */
.index_prd_deal .prdList.swiper-wrapper,
.index_prd_100 .prdList.swiper-wrapper,
.index_prd_400 .prdList.swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
padding: 10px 0;
list-style: none;
}
.index_prd_deal .prdList.swiper-wrapper > li,
.index_prd_100 .prdList.swiper-wrapper > li,
.index_prd_400 .prdList.swiper-wrapper > li {
flex: 0 0 200px !important;
min-width: 200px;
max-width: 200px;
width: 200px !important;
display: block !important;
font-size: 14px;
line-height: 1.4;
margin-left: 0 !important;
margin-bottom: 0;
}
.index_prd_deal .prdList.swiper-wrapper > li .thumbnail,
.index_prd_100 .prdList.swiper-wrapper > li .thumbnail,
.index_prd_400 .prdList.swiper-wrapper > li .thumbnail {
margin: 0 0 10px;
border-radius: 0.9rem;
overflow: hidden;
background: #f9f9f9;
}
.index_prd_deal .prdList.swiper-wrapper > li .thumbnail img,
.index_prd_100 .prdList.swiper-wrapper > li .thumbnail img,
.index_prd_400 .prdList.swiper-wrapper > li .thumbnail img {
width: 100%;
height: auto;
display: block;
border-radius: 0.9rem;
}
/* ═══════════════════════════════════════════════════ */
/* Register page: Fix form layout */
/* ═══════════════════════════════════════════════════ */
.xans-member-join {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.xans-member-join .ec-base-table {
width: 100% !important;
table-layout: fixed;
}
.xans-member-join .ec-base-table th {
width: 140px;
white-space: nowrap;
}
.xans-member-join .ec-base-table td {
word-break: break-all;
}
.xans-member-join .ec-base-table input[type="text"],
.xans-member-join .ec-base-table input[type="password"],
.xans-member-join .ec-base-table input[type="email"],
.xans-member-join .ec-base-table select,
.xans-member-join .ec-base-table textarea {
max-width: 100%;
box-sizing: border-box;
}
.xans-member-join .btnArea {
text-align: center;
margin: 20px 0;
}
/* ═══════════════════════════════════════════════════ */
/* Board/Gallery: Constrain oversized images */
/* ═══════════════════════════════════════════════════ */
#contents img,
.board-detail img,
.xans-board img,
span.thumbnail img {
max-width: 100% !important;
height: auto !important;
}
/* ═══════════════════════════════════════════════════ */
/* Board list: values measured from original site */
/* ═══════════════════════════════════════════════════ */
/* Board list: no overrides needed — master-styles.css handles
all styling when HTML structure matches the original Cafe24 HTML */
/* Gallery board: values measured from original juicebox.co.kr */
.boardList ul.grid4 {
margin: 0;
padding: 0;
font-size: 0;
}
.boardList ul.grid4 > li {
display: inline-block;
vertical-align: top;
width: calc(25% - 19px);
margin-left: 25px;
margin-bottom: 40px;
font-size: 15px;
list-style: none;
position: relative;
box-sizing: border-box;
}
.boardList ul.grid4 > li:nth-child(4n+1) {
margin-left: 0;
}
.boardList ul.grid4 > li a {
display: block;
text-decoration: none;
color: #000;
}
.boardList ul.grid4 > li .thumbnail {
display: block;
overflow: hidden;
border-radius: 0.9rem;
margin-bottom: 10px;
}
.boardList ul.grid4 > li .thumbnail img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
border-radius: 0.9rem;
}
.boardList ul.grid4 > li .summary {
display: block;
padding: 0 4px;
}
.boardList ul.grid4 > li .summary .subject {
display: block;
font-size: 15px;
font-weight: 400;
color: #000;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.boardList ul.grid4 > li .summary .write {
display: block;
font-size: 13px;
color: #6d6d6d;
margin-top: 4px;
}
@media (max-width: 768px) {
.boardList ul.grid4 > li {
width: calc(50% - 10px);
margin-left: 20px;
}
.boardList ul.grid4 > li:nth-child(4n+1) {
margin-left: 0.8rem;
}
.boardList ul.grid4 > li:nth-child(2n+1) {
margin-left: 0;
}
}
/* 게시판 목록 모바일: 가로 스크롤로 작성자/조회 확인 가능하게 — col 너비 리셋. */
@media (max-width: 768px) {
.xans-board-listpackage .ec-base-table.typeList colgroup col {
width: auto !important;
}
}
/* Crawled HTML: prevent any image overflow */
[dangerouslysetinnerhtml] img,
.myshopArea img,
.boardArea img {
max-width: 100% !important;
height: auto !important;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Section titles */
/* ═══════════════════════════════════════════════════ */
.section-title {
margin-bottom: 1.5rem;
}
.section-title h3 {
font-size: 1.5rem;
font-weight: bold;
color: #111;
line-height: 1.4;
}
.section-title h4 {
font-size: 1.2rem;
font-weight: bold;
color: #111;
line-height: 1.4;
}
/* MD'S PICK tabs — add spacing between tab buttons */
.index_prd_300 .tabs .swiper-slide,
.index_prd_300_2 .tabs .swiper-slide {
margin-right: 10px;
}
.index_prd_300 .tabs .swiper-slide:last-child,
.index_prd_300_2 .tabs .swiper-slide:last-child {
margin-right: 0;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Section spacing */
/* ═══════════════════════════════════════════════════ */
.index_prd_300_2 {
margin: 2.5rem 0 4rem;
}
.index_prd_deal {
position: relative;
background: #f9f9f9;
margin: 3rem 0;
padding: 3rem 0;
}
.index_prd_deal .section-title {
position: relative;
}
.index_prd_deal .section-title .more {
position: absolute;
bottom: 0;
right: 0;
color: #777;
text-decoration: none;
display: flex;
align-items: center;
font-size: 14px;
}
.index_prd_100 {
margin: 3rem 0;
}
.index_prd_100 .ec-base-product {
display: flex;
align-items: flex-start;
}
.index_prd_100 .section-title {
width: 18rem;
min-width: 18rem;
margin-right: 2rem;
}
.index_prd_100 .section-title .line {
height: 2px;
background: #111;
margin: 0 0 1.8rem;
}
.index_prd_100 .swiper-container {
flex: 1;
min-width: 0;
overflow: hidden;
}
.index_prd_200 {
margin: 3rem 0;
}
.index_prd_200 .site-wrap {
display: flex;
gap: 30px;
}
.index_prd_200 .section_first,
.index_prd_200 .section_second {
flex: 1;
}
.index_prd_400 {
margin: 3rem 0;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: site-wrap container */
/* ═══════════════════════════════════════════════════ */
.site-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════ */
/* Cart page: override cafe24 .cart-container {height:0} */
/* crawled CSS 는 height:0; overflow:hidden 규칙을 먼저 */
/* 선언해서 React 렌더 시 컨테이너가 접힌다. 복구 필수. */
/* ═══════════════════════════════════════════════════ */
.cart-container {
height: auto !important;
overflow: visible !important;
}
@media all and (min-width: 1025px) {
.cart-container {
display: flex !important;
align-items: flex-start !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Price display */
/* ═══════════════════════════════════════════════════ */
.displaynone {
display: none !important;
}
.discount_rate {
color: var(--brand-red, #e44040);
font-weight: bold;
font-size: 16px;
margin-right: 5px;
}
.spec_wrap .spec {
list-style: none;
padding: 0;
margin: 5px 0 0;
}
.spec_wrap .spec li {
font-size: 14px;
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════ */
/* Homepage: Mobile / PC view toggles */
/* ═══════════════════════════════════════════════════ */
.m_view {
display: none;
}
.pc_view {
display: block;
}
/* ═══════════════════════════════════════════════════ */
/* Mobile responsive (homepage) */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.m_view {
display: block;
}
.pc_view {
display: none;
}
/* grid5 mobile rule is provided by crawled master-styles.css
(width:calc(50% - 2px); margin-right:4px; nth-child(2n){margin-right:0}).
Previous override here forced calc(50% - 8px)!important but the paired
margin-left:16px was overridden by master-styles' shorthand margin reset,
leaving ~12px gap on the right of every row. */
.prdList.grid4 > li {
width: calc(33.33% - 10px) !important;
margin-left: 15px;
}
.prdList.grid4 > li:nth-child(4n+1) {
margin-left: 15px;
}
.prdList.grid4 > li:nth-child(3n+1) {
margin-left: 0;
}
.index_prd_100 .ec-base-product {
flex-direction: column;
}
.index_prd_100 .section-title {
width: 100%;
min-width: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
.index_prd_100 .swiper-container {
width: 100%;
}
.index_prd_200 .site-wrap {
flex-direction: column;
gap: 20px;
}
.index_ban_500 .swiper-slide {
flex: 0 0 calc(100% - 10px);
}
.index_prd_deal .prdList.swiper-wrapper > li,
.index_prd_100 .prdList.swiper-wrapper > li,
.index_prd_400 .prdList.swiper-wrapper > li {
flex: 0 0 160px !important;
min-width: 160px;
max-width: 160px;
width: 160px !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* Pagination: Ensure visibility */
/* ═══════════════════════════════════════════════════ */
.ec-base-paginate.typeList {
margin: 40px 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.ec-base-paginate.typeList > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 0;
background: #fff;
}
.ec-base-paginate.typeList > a:before {
content: "";
display: inline-block;
width: 1.2rem;
height: 1.2rem;
background: url(/skin_img/paginate__normal.svg) no-repeat center / contain;
}
.ec-base-paginate.typeList > a:first-child:before,
.ec-base-paginate.typeList > a.first + a:before {
transform: rotate(180deg);
}
.ec-base-paginate.typeList > a.first:before {
background-image: url(/skin_img/paginate__double.svg);
transform: rotate(180deg);
}
.ec-base-paginate.typeList > a.last:before {
background-image: url(/skin_img/paginate__double.svg);
}
.ec-base-paginate.typeList ol {
display: inline-flex;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.ec-base-paginate.typeList li {
display: inline-block;
}
.ec-base-paginate.typeList li a {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 13px;
color: #999;
text-decoration: none;
border-radius: 4px;
}
.ec-base-paginate.typeList li a.this {
color: #000;
font-weight: bold;
background: #f5f5f5;
}
.ec-base-paginate.typeList li a:hover {
color: #333;
background: #f0f0f0;
}
/* ═══════════════════════════════════════════════════ */
/* Board: Cafe24 원본 테이블형 레이아웃 복원 */
/* ═══════════════════════════════════════════════════ */
/* --- List package wrapper --- */
.xans-board-listpackage {
max-width: 1080px;
margin: 0 auto;
padding: 0 15px 40px;
}
/* --- Title area --- */
/* titleArea: removed overrides — master-styles.css provides
font-size:23px and font-weight:normal which match the original */
/* Category banner: match the gap between h2 and subcategory tabs (40px from titleArea margin-bottom) */
.titleArea .banner { margin-bottom: 40px; }
.xans-board-listpackage .path {
display: none;
}
/* --- Board sort dropdown --- */
.xans-board-listpackage .boardSort {
margin-bottom: 10px;
}
.xans-board-listpackage .boardSort select {
padding: 4px 8px;
font-size: 12px;
border: 1px solid #d5d5d5;
color: #555;
}
/* --- Table: restore traditional table layout (override master-styles block layout) --- */
.xans-board-listpackage .ec-base-table.typeList {
border-top: 2px solid #222;
}
.xans-board-listpackage .ec-base-table.typeList table {
display: table !important;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.xans-board-listpackage .ec-base-table.typeList thead {
display: table-header-group !important;
}
.xans-board-listpackage .ec-base-table.typeList tbody {
display: table-row-group !important;
}
.xans-board-listpackage .ec-base-table.typeList tr {
display: table-row !important;
position: static !important;
padding: 0 !important;
border-bottom: 1px solid #e8e8e8;
}
.xans-board-listpackage .ec-base-table.typeList tr::after {
display: none !important;
}
/* th/td: measured from original juicebox.co.kr/board/free/list.html */
.xans-board-listpackage .ec-base-table.typeList th {
display: table-cell !important;
padding: 16px 10px 14px;
font-size: 14px;
font-weight: 700;
color: #000;
background: #f6f6f6;
border-bottom: 0;
text-align: center;
vertical-align: middle;
line-height: 22px;
}
.xans-board-listpackage .ec-base-table.typeList td {
display: table-cell !important;
float: none !important;
height: auto;
padding: 16px 10px 14px;
font-size: 14px;
color: #6d6d6d;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid #e8e8e8;
line-height: 22px;
}
.xans-board-listpackage .ec-base-table.typeList td.subject {
text-align: left;
padding-left: 15px;
}
.xans-board-listpackage .ec-base-table.typeList td.subject a {
color: #111;
text-decoration: none;
font-size: 14px;
font-weight: 400;
}
.xans-board-listpackage .ec-base-table.typeList td.subject a:hover {
text-decoration: underline;
}
.xans-board-listpackage .ec-base-table.typeList td.chk.no {
color: #6d6d6d;
font-size: 14px;
}
.xans-board-listpackage .ec-base-table.typeList .displaynone {
display: none !important;
}
.xans-board-listpackage .ec-base-table.typeList .RTMI {
display: none;
}
.xans-board-listpackage .ec-base-table.typeList td .comment {
display: none;
}
/* --- Notice pinned table (top border only, no thead) --- */
.xans-board-listpackage .ec-base-table.typeList.notice {
border-bottom: 0;
margin-bottom: 0;
}
.xans-board-listpackage .ec-base-table.typeList.notice + .ec-base-table.typeList {
border-top: 0;
}
/* --- Empty message --- */
.xans-board-listpackage .ec-base-table.typeList .message {
padding: 60px 0;
text-align: center;
color: #999;
font-size: 13px;
border-bottom: 1px solid #e8e8e8;
}
/* --- Mobile: 가로 스크롤로 제목+작성자+조회 표시 (번호만 숨김) --- */
@media (max-width: 768px) {
/* 테이블 컨테이너에 가로 스크롤 허용 */
.xans-board-listpackage .ec-base-table.typeList {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.xans-board-listpackage .ec-base-table.typeList table {
min-width: 420px;
table-layout: auto !important;
}
/* 번호 컬럼(1번째)만 숨김 */
.xans-board-listpackage .ec-base-table.typeList th:nth-child(1),
.xans-board-listpackage .ec-base-table.typeList td.chk.no {
display: none !important;
}
/* 제목·작성자·조회 헤더 표시 */
.xans-board-listpackage .ec-base-table.typeList th:nth-child(2),
.xans-board-listpackage .ec-base-table.typeList th:nth-child(4),
.xans-board-listpackage .ec-base-table.typeList th:nth-child(6) {
display: table-cell !important;
}
/* 작성자 셀(4번째 td) 표시 */
.xans-board-listpackage .ec-base-table.typeList td:nth-child(4) {
display: table-cell !important;
min-width: 80px;
}
/* 조회 셀 표시 */
.xans-board-listpackage .ec-base-table.typeList td.board-views {
display: table-cell !important;
min-width: 60px;
}
.xans-board-listpackage .ec-base-table.typeList td.subject {
padding: 14px 10px;
min-width: 180px;
}
}
/* --- Write button area --- */
.xans-board-listpackage .ec-base-button.gBottom {
display: flex;
justify-content: flex-end;
margin: 15px 0 0;
padding: 0;
}
.xans-board-listpackage .ec-base-button.gBottom .gRight {
float: none;
}
.xans-board-listpackage .btnSubmitFix.sizeM {
display: inline-block;
padding: 8px 25px;
font-size: 13px;
color: #fff;
background: #555;
border: 1px solid #555;
text-decoration: none;
line-height: 1.4;
}
.xans-board-listpackage .btnSubmitFix.sizeM:hover {
background: #333;
border-color: #333;
}
/* --- Search form --- */
.xans-board-listpackage .boardSearch {
border: 0;
padding: 0;
margin: 0;
}
.xans-board-listpackage .boardSearch legend {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.xans-board-listpackage .boardSearch .form {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 20px 0;
}
.xans-board-listpackage .boardSearch select {
padding: 6px 10px;
font-size: 12px;
border: 1px solid #d5d5d5;
color: #555;
height: 32px;
background: #fff;
}
.xans-board-listpackage .boardSearch .inputTypeText {
padding: 6px 10px;
font-size: 12px;
border: 1px solid #d5d5d5;
height: 32px;
width: 200px;
box-sizing: border-box;
}
.xans-board-listpackage .boardSearch .btnNormal {
display: inline-block;
padding: 6px 20px;
font-size: 12px;
color: #555;
border: 1px solid #d5d5d5;
background: #fff;
height: 32px;
cursor: pointer;
line-height: 1;
}
.xans-board-listpackage .boardSearch .btnNormal:hover {
border-color: #333;
color: #333;
}
/* --- Total count --- */
.xans-board-listpackage .board-total-count {
text-align: center;
padding: 10px 0;
font-size: 12px;
color: #999;
}
/* --- Read package (detail page) --- */
.xans-board-readpackage {
max-width: 1080px;
margin: 0 auto;
padding: 0 15px 40px;
}
.xans-board-readpackage .titleArea {
text-align: center;
padding: 30px 0 15px;
}
.xans-board-readpackage .titleArea h2 {
font-size: 20px;
font-weight: 700;
}
.xans-board-readpackage .path {
display: none;
}
.xans-board-readpackage .ec-base-table.typeView {
border-top: 2px solid #222;
}
.xans-board-readpackage .ec-base-table.typeView table {
width: 100%;
border-collapse: collapse;
}
.xans-board-readpackage .ec-base-table.typeView th {
padding: 12px 20px;
font-size: 13px;
font-weight: 600;
color: #555;
background: #f6f6f6;
border-bottom: 1px solid #e5e5e5;
text-align: left;
white-space: nowrap;
}
.xans-board-readpackage .ec-base-table.typeView td {
padding: 12px 20px;
font-size: 13px;
color: #333;
border-bottom: 1px solid #e5e5e5;
}
.xans-board-readpackage .board-detail-content {
padding: 30px 20px;
min-height: 200px;
border-bottom: 1px solid #e5e5e5;
font-size: 14px;
line-height: 1.7;
color: #333;
}
.xans-board-readpackage .board-detail-content img {
max-width: 100%;
height: auto;
}
.xans-board-readpackage .ec-base-button.gBottom {
display: flex;
margin: 20px 0 0;
}
.xans-board-readpackage .btnNormal.sizeM {
display: inline-block;
padding: 8px 25px;
font-size: 13px;
color: #555;
border: 1px solid #d5d5d5;
background: #fff;
text-decoration: none;
}
.xans-board-readpackage .btnNormal.sizeM:hover {
border-color: #333;
color: #333;
}
/* ═══════════════════════════════════════════════════ */
/* Category tabs: ensure horizontal layout */
/* ═══════════════════════════════════════════════════ */
.ec-base-tab.typeMenu {
display: flex;
margin: 15px 0;
justify-content: center;
}
.ec-base-tab.typeMenu ul {
display: flex;
gap: 0;
margin: 0 auto;
padding: 0;
list-style: none;
}
.ec-base-tab.typeMenu li {
white-space: nowrap;
}
/* Tab buttons: measured from original — 15px, #777, lineHeight 38px */
.ec-base-tab.typeMenu .button {
display: block;
margin: 0 20px;
padding: 0;
color: #777;
text-decoration: none;
font-size: 15px;
font-weight: 400;
line-height: 38px;
position: relative;
}
.ec-base-tab.typeMenu .button.active {
font-weight: bold;
color: #000;
}
.ec-base-tab.typeMenu .button.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: #000;
}
/* Toast animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate(-50%, 1rem);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* ═══════════════════════════════════════════════════ */
/* CART PAGE — 추천 상품 배너 */
/* ═══════════════════════════════════════════════════ */
.cart-recommend-banner {
background: #fff4ec;
border: 1px solid #ffd9b3;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 16px;
}
.cart-recommend-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-recommend-header strong {
font-size: 14px;
color: #333;
}
.cart-recommend-sub {
font-size: 12px;
color: #ff972c;
font-weight: 700;
}
/* ═══════════════════════════════════════════════════ */
/* ORDER PAGE — Cafe24 원본 스타일 재현 */
/* ═══════════════════════════════════════════════════ */
.order-loading {
max-width: 960px;
margin: 0 auto;
padding: 80px 16px;
text-align: center;
color: #999;
}
.order-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 15px 60px;
}
.order-title-area {
padding: 20px 0;
border-bottom: 2px solid #000;
margin-bottom: 20px;
}
.order-title-area h1 {
font-size: 20px;
font-weight: 700;
color: #000;
margin: 0;
}
/* 2-column layout */
.order-layout {
display: flex;
gap: 24px;
align-items: flex-start;
}
.order-left {
flex: 1;
min-width: 0;
}
.order-right {
width: 280px;
flex-shrink: 0;
}
.order-sticky {
position: sticky;
top: 20px;
}
/* Section (collapsible panels) */
.order-section {
border: 1px solid #e8e8e8;
border-radius: 4px;
margin-bottom: 12px;
background: #fff;
}
.order-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #e8e8e8;
cursor: default;
}
.order-section-header h2 {
font-size: 15px;
font-weight: 700;
color: #000;
margin: 0;
}
.order-section-count {
font-size: 13px;
font-weight: 700;
color: #508bed;
}
.order-section-body {
padding: 16px 20px;
}
.order-section-collapsed .order-section-header {
border-bottom: none;
}
/* Product item */
.order-prd-item {
display: flex;
gap: 14px;
padding: 12px 0;
}
.order-prd-item + .order-prd-item {
border-top: 1px solid #f2f2f2;
}
.order-prd-thumb {
width: 90px;
height: 90px;
flex-shrink: 0;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
background: #fafafa;
}
.order-prd-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.order-prd-info {
flex: 1;
min-width: 0;
}
.order-prd-name {
display: block;
font-size: 13px;
font-weight: 400;
color: #333;
line-height: 1.4;
margin-bottom: 6px;
word-break: break-word;
}
.order-prd-meta {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
color: #888;
}
.order-prd-meta li {
margin-top: 2px;
}
.order-prd-price {
margin-top: 6px;
font-size: 14px;
font-weight: 700;
color: #000;
}
.order-ship-fee {
display: flex;
justify-content: space-between;
padding: 14px 0 4px;
border-top: 1px solid #e8e8e8;
font-size: 13px;
color: #333;
}
/* Toggle icon */
.order-section-toggle .order-section-header {
cursor: pointer;
}
.order-toggle-icon {
font-size: 20px;
color: #999;
transition: transform 0.2s;
line-height: 1;
}
.order-toggle-icon.collapsed {
transform: rotate(180deg);
}
/* Same as member checkbox */
.order-same-member {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #333;
padding-bottom: 16px;
border-bottom: 1px solid #f2f2f2;
margin-bottom: 16px;
cursor: pointer;
}
.order-same-member input[type="checkbox"] {
accent-color: #508bed;
width: 18px;
height: 18px;
}
/* Save address */
.order-save-address {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #333;
margin-top: 12px;
cursor: pointer;
}
.order-save-address input[type="checkbox"] {
accent-color: #508bed;
}
/* Vertical form (legacy style) */
.order-form-vertical {
display: flex;
flex-direction: column;
gap: 0;
}
.order-field {
padding: 10px 0;
}
.order-field-label {
display: block;
font-size: 13px;
font-weight: 700;
color: #333;
margin-bottom: 8px;
}
.order-field-label .required {
color: #e44040;
font-size: 11px;
}
/* Email row */
.order-email-row {
display: flex;
align-items: center;
gap: 6px;
}
.order-email-at {
font-size: 13px;
color: #666;
}
.order-email-id {
flex: 1;
}
.order-email-domain {
flex: 1;
}
/* Discount info */
.order-discount-info {
font-size: 12px;
color: #888;
text-align: right;
margin: 4px 0 12px;
}
.order-discount-note {
font-size: 12px;
color: #888;
margin: 4px 0 12px;
}
.order-input-sm {
width: 120px;
}
/* Form table (keep for bank transfer) */
.order-form-table {
font-size: 13px;
}
.order-form-table table {
width: 100%;
border-collapse: collapse;
}
.order-form-table th {
text-align: left;
vertical-align: top;
padding: 10px 10px 10px 0;
font-weight: 400;
color: #333;
white-space: nowrap;
}
.order-form-table td {
padding: 10px 0;
}
.order-form-table .required {
color: #e44040;
font-size: 11px;
}
.order-input {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid #d5d5d5;
border-radius: 3px;
font-size: 13px;
color: #333;
background: #fff;
box-sizing: border-box;
outline: none;
}
.order-input:focus {
border-color: #508bed;
}
.order-input-zip {
width: 140px;
}
.order-input-full {
margin-top: 6px;
}
.order-addr-row {
display: flex;
gap: 6px;
}
.order-btn-zip {
height: 36px;
padding: 0 14px;
border: 1px solid #d5d5d5;
border-radius: 3px;
background: #fff;
font-size: 13px;
color: #333;
cursor: pointer;
white-space: nowrap;
}
.order-btn-zip:hover {
background: #f5f5f5;
}
.order-select {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid #d5d5d5;
border-radius: 3px;
font-size: 13px;
color: #333;
background: #fff;
cursor: pointer;
}
.order-textarea {
width: 100%;
height: 70px;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid #d5d5d5;
border-radius: 3px;
font-size: 13px;
color: #333;
resize: vertical;
outline: none;
box-sizing: border-box;
}
/* Discount */
.order-discount-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
}
.order-discount-row strong {
font-size: 13px;
font-weight: 400;
color: #333;
}
.order-discount-ctrl {
display: flex;
align-items: center;
gap: 8px;
}
.order-discount-price {
font-size: 13px;
font-weight: 700;
color: #e44040;
}
.order-btn-sm {
width: 125px;
height: 40px;
padding: 0 12px;
border: 1px solid #d5d5d5;
border-radius: 3px;
background: #fff;
font-size: 12px;
color: #333;
cursor: pointer;
}
.order-btn-sm:hover {
background: #f5f5f5;
}
.order-discount-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0 4px;
border-top: 1px solid #e8e8e8;
font-size: 14px;
font-weight: 700;
color: #333;
}
/* Payment methods */
.order-pay-methods {
display: flex;
flex-direction: column;
gap: 8px;
}
.order-pay-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #333;
cursor: pointer;
margin-left: 0;
margin-right: 10px;
}
.order-pay-label input[type="radio"] {
accent-color: #508bed;
}
.order-bank-info {
margin-top: 12px;
padding: 12px;
background: #f9f9f9;
border-radius: 4px;
}
.order-pay-help {
margin: 14px 0 0;
padding: 0;
list-style: none;
font-size: 12px;
color: #888;
}
.order-pay-help li::before {
content: "- ";
}
/* Right column summary */
.order-summary-table {
border-bottom: 1px solid #e8e8e8;
}
.order-summary-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 13px;
color: #333;
}
.order-summary-row .txt-red {
color: #e44040;
}
.order-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 8px;
}
.order-summary-total span {
font-size: 14px;
font-weight: 700;
color: #333;
}
.order-summary-total strong {
font-size: 20px;
font-weight: 700;
color: #508bed;
}
/* Agreement */
.order-agree-area {
padding: 12px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.order-agree-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: #333;
cursor: pointer;
margin-left: 0;
}
.order-agree-label span {
flex: 1;
min-width: 0;
}
.order-agree-label input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
accent-color: #508bed;
}
.order-agree-all {
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 4px;
}
.order-agree-link {
color: #666;
text-decoration: underline;
margin-left: 2px;
}
/* Error */
.order-error {
margin: 8px 0;
padding: 10px 14px;
border-radius: 4px;
background: #fff0f0;
border: 1px solid #fdd;
font-size: 13px;
color: #e44040;
text-align: center;
}
/* Submit button */
.order-submit-btn {
width: 100%;
height: 50px;
border: none;
border-radius: 4px;
background: #508bed;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
.order-submit-btn:hover {
background: #3a7ae0;
}
.order-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive: single column on mobile */
@media (max-width: 768px) {
.order-layout {
flex-direction: column;
}
.order-right {
width: 100%;
}
.order-sticky {
position: static;
}
.order-form-table th {
display: block;
padding-bottom: 4px;
}
.order-form-table td {
display: block;
padding-top: 0;
}
}
/* Hide Swiper 12 injected SVG arrows — original CSS uses ::after icon font */
.swiper-button-prev svg,
.swiper-button-next svg {
display: none !important;
}
/* Header nav: allow iconMove badges to overflow above the nav bar */
#header .cate-swiper-container,
#header .cate-swiper-container.swiper {
overflow: visible !important;
}
#header .navigation_ {
overflow: visible !important;
}
/* Mobile (juicebox): horizontal swipe scroll for category nav,
kakao-talk bubble always on top, footer util links wrap by link boundary. */
@media (max-width: 768px) {
#header .inner { overflow: visible !important; }
#header .navigation_ {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#header .navigation_::-webkit-scrollbar { display: none; }
#footer .util > .site-wrap { flex-wrap: wrap; }
#footer .util ul { flex-wrap: wrap; row-gap: 0.4rem; }
#footer .util li,
#footer .util li a { white-space: nowrap; }
}
#wrap .bottom-nav,
#wrap .bottom-nav .nav__chat {
z-index: 10000 !important;
}
/* Side menu (#aside) open state: lift above #header (99) / .logo-wrap (100).
Live juicebox.co.kr injects `style="z-index:101"` via JS at runtime; we
replicate that with a CSS rule gated on html.aside--extend. */
html.aside--extend .section-allmenu-wrap {
z-index: 101;
}
/* tbanner: vertical auto-sliding announcement bar (pure CSS) */
#tbanner {
position: relative;
overflow: hidden;
z-index: 99;
height: 40px;
}
#tbanner .tbanner-track {
display: flex;
flex-direction: column;
animation: tbanner-scroll 6s infinite;
}
#tbanner .tbanner-slide {
height: 40px;
flex-shrink: 0;
}
#tbanner .tbanner-slide a {
display: block;
text-align: center;
text-decoration: none;
height: 40px;
line-height: 40px;
font-size: 15px;
width: 100%;
}
@keyframes tbanner-scroll {
0%, 42% { transform: translateY(0); }
50%, 92% { transform: translateY(-40px); }
100% { transform: translateY(-80px); }
}
@media (max-width: 768px) {
#tbanner { height: 2.8rem; }
#tbanner .tbanner-slide { height: 2.8rem; }
#tbanner .tbanner-slide a {
height: 2.8rem;
line-height: 2.8rem;
font-size: 1rem;
}
@keyframes tbanner-scroll {
0%, 42% { transform: translateY(0); }
50%, 92% { transform: translateY(-2.8rem); }
100% { transform: translateY(-5.6rem); }
}
}
/* likeButton active state */
.likeButton.liked button {
color: #ff5d01 !important;
}
/* Toast notification animation */
@keyframes fadeInOut {
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
15% { opacity: 1; transform: translateX(-50%) translateY(0); }
85% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
/* ═══════════════════════════════════════════════════ */
/* Login page: form field fixes */
/* master-styles.css 내 전역 input 규칙이 .login input */
/* 규칙을 덮어써서 너비·높이·border가 깨짐 → 여기서 복구 */
/* ═══════════════════════════════════════════════════ */
.wp-login .login .id,
.wp-login .login .password {
overflow: hidden;
}
.wp-login .login .id span,
.wp-login .login .password span {
display: block;
}
.wp-login .login input[type="text"],
.wp-login .login input[type="password"] {
width: 100% !important;
height: 50px !important;
line-height: 48px;
padding: 0 10px;
margin: 0 0 10px;
font-size: 1.1rem;
border: none !important;
border-bottom: 1px solid #ccc !important;
display: block;
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════ */
/* MyPage: 혜택 통계 카드 (ul/li 구조 flex 복원) */
/* globals.css의 기존 규칙이 ul wrapper를 무시해서 */
/* 수직으로 쌓힘 → ul에 flex 직접 적용 */
/* ═══════════════════════════════════════════════════ */
.myshopArea .xans-myshop-asyncbankbook > ul {
display: flex;
gap: 16px;
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.myshopArea .xans-myshop-asyncbankbook > ul > li {
flex: 1;
background: #f9f9f9;
padding: 16px;
border-radius: 8px;
text-align: center;
}
/* ═══════════════════════════════════════════════════
Login page: 원본 external-styles.css 기반 복원
master-styles.css에 없는 규칙만 추가.
master-styles에 이미 있음:
.login .form{display:grid}, .login .id{order:1},
.login .password{order:2}, .login__security{order:3},
.login__button{order:4}, .login .form span{display:none}
═══════════════════════════════════════════════════ */
/* 전체 사이트 헤더 숨김 (로그인 페이지는 standalone) */
body.login-page #header {
display: none !important;
}
/* wp-login 컨테이너: external-styles.css 원본 그대로 (460px 제한) */
.wp-login {
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: 5rem;
}
/* 라이브 사이트는 display:block (float 레이아웃).
master-styles의 display:grid를 로그인 페이지에서만 해제. */
body.login-page .login .form {
display: block !important;
}
/* login_header: external-styles.css 원본 */
.wp-login .login_header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
border-bottom: 1px solid #eee;
padding: 0 0 1rem;
}
.wp-login .login_header a,
.wp-login .login_header a:hover {
font-size: 0;
width: 2rem;
height: 2rem;
}
/* login_head_logo: external-styles.css 원본 */
.wp-login .login_head_logo {
text-align: center;
margin: 2rem 0 3rem;
}
/* 로고 크기 (--logo-login-head CSS 변수 보정) */
.wp-login .login_head_logo img {
width: 110px !important;
max-width: 100%;
}
/* login_bnr: margin이 master-styles에 있으나 명시적으로 보장 */
.wp-login .login_bnr {
margin: 30px 0;
}
/* .xans-member-login .login: master-styles의 width:421px 오버라이드 → 전체 460px 사용 */
.xans-member-login .login {
width: 100% !important;
margin: 0 !important;
}
/* login__security: flex + 기본 스타일 (외부CSS 원본) */
.login__security {
margin: 10px 0 30px;
font-size: 13px;
display: flex;
align-items: center;
}
/* 1025px+: 40% 좌측 float (외부CSS @media 원본) */
@media (min-width: 1025px) {
.login__security {
width: 40%;
float: left;
margin-bottom: 0;
}
}
/* 보안접속: master-styles의 .login .form span{display:none} 오버라이드 */
/* 원본과 동일: SVG 배경 아이콘 + GIF img는 투명 오버레이 */
.login__security .secret {
position: relative;
display: inline-block !important;
height: 17px;
padding: 0 0 0 22px;
background: url("//img.echosting.cafe24.com/skin/skin/member/ico_access.svg") no-repeat 0 0;
margin-left: 12px;
font-size: 13px;
color: #2e2e2e;
}
.login__security .secret img {
position: absolute !important;
top: 0;
left: 0;
opacity: 0.00001 !important;
width: 100%;
height: 100%;
z-index: 10;
}
/* 에러 메시지: float 해제 후 버튼 위에 표시 */
.login .form .txtWarn {
clear: both;
color: #e74c3c;
font-size: 13px;
margin: 8px 0 4px;
}
/* login__button: float 해제 후 배치, mb:30 */
.login__button {
clear: both;
margin-bottom: 30px;
}
/* btnBasic: 원본 dark 버튼 + 4rem 높이 */
.login__button .btnBasic {
display: block;
width: 100%;
height: 4rem;
line-height: 4rem;
text-align: center;
background: #111;
color: #fff;
cursor: pointer;
border: 0;
border-radius: 5px;
font-size: 1rem;
margin-bottom: 10px;
}
/* login__util: 외부CSS 원본 */
.login__util {
overflow: hidden;
margin: 10px 0 0;
text-align: center;
list-style: none;
padding: 0;
}
/* 1025px+: 60% 우측 float + flex 정렬 (외부CSS @media 원본) */
@media (min-width: 1025px) {
.login__util {
display: flex;
align-items: center;
width: 60%;
float: right;
margin: 10px 0 0;
justify-content: flex-end;
}
}
.login__util li {
display: inline-block;
vertical-align: middle;
}
.login__util li:not(:last-child)::after {
content: "";
display: inline-block;
width: 1px;
height: 13px;
margin: 0 8px 0 12px;
vertical-align: middle;
background: #e0e0e0;
}
.login__util li a {
color: #2e2e2e;
font-size: 13px;
text-decoration: none;
}
.login__util li a strong {
font-weight: normal;
}
/* 19_no2.png: 사이에 직접 위치 (li 밖), flex item */
.login__util > img {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin: 0 6px;
}
/* login__sns: 원본 외부CSS 그대로 (order 추가, CDN URL 사용) */
.login__sns {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-direction: column;
order: 70;
}
.login__sns [class*="btn"] {
display: block;
font-size: 1rem;
text-align: center;
height: 4rem;
line-height: 4rem;
width: 100%;
text-decoration: none;
box-sizing: border-box;
padding-left: 48px;
border-radius: 5px;
font-weight: bold;
}
/* 원본: /skin_img/ → Cafe24 CDN으로 교체 */
.login__sns .btnNaver {
color: #FFF;
border: 1px solid #ddd;
background: #03c75a url("https://img.echosting.cafe24.com/skin/skin/member/ico_naver.svg") no-repeat 20px center / 20px 20px;
}
.login__sns .btnGoogle {
color: #000;
border: 1px solid #ddd;
background: #fff url("https://img.echosting.cafe24.com/skin/skin/member/ico_google.svg") no-repeat 20px center / 20px 20px;
}
/* ═══════════════════════════════════════════════════ */
/* Cart page: external-styles.css 기반 복원 */
/* ═══════════════════════════════════════════════════ */
.xans-order-basketpackage .title.subTitle{display:block;padding:0;}
.xans-order-basketpackage .title.subTitle:after{display:none;}
.xans-order-basketpackage .title.subTitle h4{display:block;padding:0 0 0 15px;line-height:55px;font-size:13px;font-weight:normal;background-color:#f6f6f6;}
.xans-order-basketpackage .summary{padding:20px;border-bottom:1px solid #e5e5e5;background:#f9f9f9;}
.xans-order-basketpackage .summary .title{margin:0 0 ;}
.xans-order-basketpackage .summary .title h5{font-size:13px;font-weight:normal;}
.xans-order-basketpackage .summary .contents{line-height:20px;}
.xans-order-basketpackage .summary .total{display:block;margin:5px 0 0;}
.xans-order-basketpackage .ec-base-prdInfo .thumbnail,.xans-order-basketpackage .ec-base-prdInfo .thumbnail img{height:auto;}
.xans-order-basketpackage .ec-base-prdInfo .thumbnail{border:0;}
.xans-order-basketpackage .ec-base-prdInfo .thumbnail img{border:1px solid #eee;}
.xans-order-basketpackage .ec-base-prdInfo .description .prdName img{width:0;height:0;}
.xans-order-basketpackage .ec-base-prdInfo .description .price li[class*='display__0']{display:none;}
.xans-order-basketpackage .ec-base-prdInfo .description .optionGroup li .product,.xans-order-basketpackage .ec-base-prdInfo .description .optionGroup li .optionStr{color:#777;}
.xans-order-basketpackage .ec-base-prdInfo .description .info li.mileage img{vertical-align:middle;}
.xans-order-basketpackage .xans-order-weight .totalWeight {text-align: right;padding:14px;font-size:13px;border-bottom:1px solid #d5d5d5;}
.xans-order-basketpackage .xans-order-weight .totalWeight span {display: inline-block;min-width:50px;}
.xans-order-basketpackage .totalSummary__title{display:block;margin:0 0 20px;padding:0 0 19px;font-size:14px;border-bottom:1px solid #e5e5e5;}
.xans-order-basketpackage .totalSummary{padding:8px 7px;}
.xans-order-basketpackage .totalSummary__item{margin:0 0 20px;}
.xans-order-basketpackage .totalSummary__item .heading{display:flex;justify-content: space-between;margin:0 0 15px;}
.xans-order-basketpackage .totalSummary__item .item{display:flex;justify-content: space-between;margin:10px 0 0;color:#6d6d6d;}
.xans-order-basketpackage .totalSummary__item .title{font-size:13px;font-weight:normal;}
.xans-order-basketpackage .totalSummary__item .data{text-align:right;}
.xans-order-basketpackage .totalSummary .item .title:before{content:"";display:inline-block;width:9px;height:9px;margin:-2px 10px 0 0;vertical-align:top;border-left:1px solid #dadada;border-bottom:1px solid #dadada;}
.xans-order-basketpackage .totalSummary .total{display:flex;justify-content: space-between;overflow:hidden;margin:20px 0 0;padding:20px 0 0;border-top:1px solid #e5e5e5;align-items:center;}
.xans-order-basketpackage .totalSummary .total .title{font-size:15px;}
.xans-order-basketpackage .totalSummary .total_mileage_price_area{margin:10px 0 0;}
.xans-order-basketpackage .totalSummary .paymentPrice{text-align:right;}
.xans-order-basketpackage .totalSummary .paymentPrice strong,.xans-order-basketpackage .totalSummary .paymentPrice span{display:inline-block;word-break:break-all;}
.xans-order-basketpackage .totalSummary .paymentPrice strong{font-size:18px;}
.xans-order-basketpackage .totalSummary .title p .refer,.xans-order-basketpackage .totalSummary .title div .refer{display:inline-block;font-size:12px;word-break:break-all;}
.xans-order-basketpackage .totalSummary .ec-base-help{margin:10px 0;}
#orderFixItem .ec-base-button{margin:20px 5px;}
.xans-order-basketpriceinfoguide .ec-base-help li{margin:0;background-position:0 3px;}
.xans-order-basketpackage td .box.shipping{line-height:1.3em;}
.xans-order-basketpackage td .box.shipping .shippingArea{font-size:12px;line-height:1.3em;}
.xans-order-basketpackage .shippingFee{position:relative;display:inline-block;vertical-align:middle;text-align:left;}
.xans-order-basketpackage .shippingFee .ec-base-tooltip{display:block;margin:0 0 0 -340px;width:360px;}
.xans-order-basketpackage .ec-base-table.total .ec-base-tooltip table th{width:40px;}
.xans-order-basketpackage .ec-base-table.total .ec-base-tooltip table th,.xans-order-basketpackage .ec-base-table.total .ec-base-tooltip table td{padding:7px 10px 8px 10px;height:auto;font-size:12px;line-height:1.5;text-align:left;}
.xans-order-basketpackage .ec-base-prdEmpty + .cart-container{height:0;overflow: hidden;}
.xans-order-basketpackage .total_mileage_price_area .heading{display:flex;justify-content: space-between;margin:0 0 15px;}
.xans-order-basketpackage .total_mileage_price_area .heading .title {font-size:13px;font-weight: normal;}
.xans-order-basketpackage .total_mileage_price_area .heading .data {text-align: right;}
.xans-order-basketpackage .total_mileage_price_area .content .item {display:flex;justify-content: space-between;margin:10px 0 0;color:#6d6d6d;}
.xans-order-basketpackage .total_mileage_price_area .content .item .title {font-size:13px;font-weight: normal;}
.xans-order-basketpackage .total_mileage_price_area .content .data {text-align: right;}
@media all and (min-width:1025px){.cart-container{display:flex;}.cart-product{flex:1;}.cart-total{position:relative;width:300px;margin:0 0 0 47px;}.cart-total .sticky{position:sticky;top:100px;padding:10px;background:#fff;border:1px solid #ddd;}.xans-order-basketpackage .xans-order-tabinfo{margin:40px 0 54px;}.xans-order-basketpackage .ec-base-prdInfo .description{margin:0 20% 0 0;}#orderFixArea{display:none !important;}}
@media all and (min-width: 1025px) {
.cart-container {
display: flex !important;
align-items: flex-start !important;
}
}
@media all and (max-width:1024px){.xans-order-basketpackage .xans-order-tabinfo{margin:0 0 1rem;}.xans-order-basketpackage .xans-order-emptyitem.ec-base-fold.theme1 > .title,.xans-order-basketpackage .xans-order-emptyitem.ec-base-fold.theme1.selected > .title{padding:0;border:0;}.xans-order-basketpackage .xans-order-emptyitem.ec-base-fold.theme1 > .title:after,.xans-order-basketpackage .xans-order-emptyitem.ec-base-fold.theme1.selected > .title:after{top:1.8rem;right:5px;}.xans-order-basketpackage .xans-order-emptyitem.ec-base-fold.theme1 > .title:after{top:1.4rem;}.xans-order-basketpackage .title.subTitle h4{line-height:3.5;}.xans-order-basketpackage .ec-base-prdInfo .prdBox{padding:1.5rem 0;}.xans-order-basketpackage .ec-base-prdInfo .btnDelete{right:0;top:0.9rem;}.xans-order-basketpackage .ec-base-prdInfo .sumPrice strong{font-size:1rem;}.xans-order-basketpackage .ec-base-prdInfo.gCheck .sumPrice,.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity,.xans-order-basketpackage .ec-base-prdInfo.gCheck .buttonGroup{padding:0 0 0 130px;}.xans-order-basketpackage .totalSummary{border:1px solid #111;box-shadow:1px 2px 4px rgba(0,0,0,0.1);padding:1rem;margin:0 0 2rem;}#orderFixItem .ec-base-button{margin:0;border:0;}#orderFixArea{border:0;padding:0;margin:0;z-index:98;}#orderFixArea.ec-base-button.gFixed > .ec-base-button[class*="gColumn"]{margin:0;border:0;padding:0;}#orderFixArea.ec-base-button.gFixed > .ec-base-button[class*="gColumn"] [class^='btn']{margin:0;border-radius:0;}#orderFixArea.ec-base-button.gFixed > .ec-base-button[class*="gColumn"] [class^='btnNormal ']{border:0;border-top:1px solid #ddd;}.xans-order-basketguide.ec-base-help > h3{padding:0;margin:0 0 1rem;}.xans-order-basketguide.ec-base-help .inner{padding:1rem;}#footer{padding-bottom:5rem;}#wrap .bottom-nav{bottom:7rem;}}
.ec-base-qty{position:relative;display:inline-block;width:103px;padding:0 30px;vertical-align:top;box-sizing:border-box;}
.ec-base-qty input[type="text"]{width:45px;height:30px;padding:0;line-height:28px;margin-left:-1px;border:1px solid #e5e5e5;text-align:center;}
.ec-base-qty input[type="text"]:focus,.ec-base-qty input[type="text"]:hover{border:1px solid #e5e5e5;}
.ec-base-qty img{position:absolute;top:0;left:0;opacity:.00001;width:100%;height:100%;z-index:10;}
.ec-base-qty .up{position:absolute;right:0;top:0;}
.ec-base-qty .down{position:absolute;left:0;top:0;}
.ec-base-qty a{width:30px;height:30px;border:1px solid #e5e5e5;box-sizing:border-box;overflow: hidden;white-space: nowrap;text-indent:150%;color: transparent;font-size:1px;line-height:1px;}
.ec-base-qty a:before{content: '';position:absolute;left:10px;top:50%;width:9px;height:1px;background:#000;}
.ec-base-qty .up:after {content: '';position:absolute;left:50%;top:50%;width:1px;height:9px;margin: -4px 0 0 0;background:#000;}
.ec-base-qty .qtyUp {position:absolute;right:0;top:0;}
.ec-base-qty .qtyDown{position:absolute;left:0;top:0;}
.ec-base-qty .qtyUp .up{position:static;left:auto;top:auto;}
.ec-base-qty .qtyDown .down{position:static;left:auto;top:auto;}
[class^='btn'].sizeQty{padding:9px 14px;height:30px;margin-left:6px;font-size:12px;line-height:12px;}
@media all and (min-width:1025px){.ec-base-table table{font-size:14px;}.ec-base-table .gFlow{width:100%;margin-left:20px;}.ec-base-table tr.gBorderClear td{border-bottom:0;}.ec-base-table th{padding:14px 30px;}.ec-base-table.typeWrite th{padding:10px 30px;}.ec-base-table.typeWrite th[scope*="row"]{padding-right:15px;}.ec-base-table.typeWrite td{padding:10px 20px;}.ec-base-table.typeWrite .formMultiple{padding-top:10px;padding-bottom:10px;}.ec-base-table.typeWrite td.formGroup{padding-left:15px;padding-right:15px;}.ec-base-table.typeWrite .formGroup input[type="text"],.ec-base-table.typeWrite .formGroup select{width:190px;}.ec-base-table.typeWrite td input[type="text"],.ec-base-table.typeWrite td input[type="password"],.ec-base-table.typeWrite td select{width:290px;}.ec-base-table.typeWrite td .ec-base-qty input[type="text"]{width:45px;}.ec-base-table.typeWrite .ec-address input[type="text"],.ec-base-table.typeWrite .ec-address select{width:450px;}.ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"]{width:200px;}.ec-base-table.typeWrite .ec-address .ec-address-zipcode .ec-base-label{margin:0 0 0 15px;line-height:40px;}.ec-base-table.typeList{border-top:0;}.ec-base-table.typeList th,.ec-base-table.typeList td{padding:16px 10px 14px;}.ec-base-table.typeList th{border-bottom:0;}.ec-base-table.typeList td {color:#888;}.ec-base-table.typeList td.subject a{color:#111;}.ec-base-table.typeList td.subject{padding-left:20px;padding-right:20px;}.ec-base-table.typeList td.chk:not(.no) .boardChk,.ec-base-table.typeList td.chk .boardChk{margin-right:5px;}.ec-base-table.typeList td.subject img{max-height:16px;}}
.ec-base-fold{position:relative;}
.ec-base-fold > .title{position:relative;z-index:1;overflow:hidden;cursor:pointer;font-size:13px;line-height:1.3;-webkit-tap-highlight-color:rgba(255,255,255,0);display:-webkit-flex;display:-ms-flex;display:-moz-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;-moz-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between;}
.ec-base-fold > .title h2,.ec-base-fold > .title h3{display:inline-block;font-size:13px;line-height:1.3;}
.ec-base-fold > .title:after{content:"";position:absolute;top:0;right:0;width:40px;height:100%;-webkit-transition:.3s ease-out;transition:.3s ease-out;}
.ec-base-fold > .contents{display:none;background:#fff;}
.ec-base-fold .ec-base-fold{border-width:1px 0 0;}
.ec-base-fold .ec-base-fold + .ec-base-fold{margin-top:0;}
.ec-base-fold.selected > .title:after{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform:rotate(180deg);}
.ec-base-fold.selected > .contents{display:block;}
.ec-base-fold.theme1{position:relative;}
.ec-base-fold.theme1 > .title{border-top:1px solid #000;}
.ec-base-fold.theme1 > .title h2{padding:25px 0;font-weight:normal;}
.ec-base-fold.theme1 > .title h3{padding:20px 0;font-size:13px;}
.ec-base-fold.theme1 > .title:after{content:"";position:absolute;top:20px;right:5px;overflow:hidden;display:inline-block;width:10px;height:10px;border-left:1px solid #000;border-bottom:1px solid #000;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.ec-base-fold.theme1.selected > .title:after{top:25px;-webkit-transform:rotate(135deg);transform:rotate(135deg);}
.ec-base-fold.theme1.gBottomLine > .title{border-top:0;border-bottom:1px solid #000;}
.ec-base-fold.theme1.gClearLine > .title{border-top:0;border-bottom:1px solid transparent;}
.ec-base-fold.theme1 + .ec-base-fold.theme1{margin-top:30px;}
.ec-base-fold.theme1.gBottomLine > .contents .ec-base-table,.ec-base-fold.theme1.gBottomLine .ec-base-fold > .contents .ec-base-table{border:0;}
@media all and (max-width:1024px){.ec-base-fold.theme1.gMargin{margin-left:16px;margin-right:16px;}.ec-base-fold.theme1 > .title{}.ec-base-fold.theme1 > .title h2{font-size:16px;}.ec-base-fold.theme1 > .title:after{right:21px;}.ec-base-fold.theme1.selected > .title:after{top:32px;}.ec-base-fold.theme1 .ec-base-table.typeList{border-color:#e5e5e5 }}
@media all and (min-width:1025px){.ec-base-fold.theme1 .title > h2{font-size:18px;}}
.ec-base-prdInfo{position:relative;border-bottom:1px solid #ddd;box-sizing:border-box;background:#fff;}
.ec-base-prdInfo .prdBox{display:-webkit-flex;display:-ms-flex;display:flex;flex:1;flex-wrap:wrap;}
.ec-base-prdInfo .check{display:inline-block;margin:0 10px 0 0;}
.ec-base-prdInfo .check label{margin:0;}
.ec-base-prdInfo .thumbnail{overflow:hidden;width:83px;height:83px;margin:0 15px 0 0;border:1px solid #d5d5d5;box-sizing:border-box;}
.ec-base-prdInfo .thumbnail img{width:100%;}
.ec-base-prdInfo .description{-webkit-flex:1;-ms-flex:1;flex:1;line-height:18px;}
.ec-base-prdInfo .description .prdName{display:block;margin:0 0 3px;font-weight:normal;}
.ec-base-prdInfo .description .prdName a{color:#000;}
.ec-base-prdInfo .description .prdName .ec-set-product-name{display:block;margin:0 0 3px;}
.ec-base-prdInfo .description .prdName img{margin:0 1px;vertical-align:middle;}
.ec-base-prdInfo .description .price,.ec-base-prdInfo .description .price li{font-size:13px;color:#000;line-height:20px;}
.ec-base-prdInfo .description .price strong{font-weight:normal;}
.ec-base-prdInfo .description .price .refer{font-weight:normal;font-size:11px;}
.ec-base-prdInfo .description .price .discount{font-weight:normal;text-decoration:line-through;}
.ec-base-prdInfo .description .price .strike{font-weight:normal;text-decoration:line-through;}
.ec-base-prdInfo .description .price .strike strong{font-weight:normal;}
.ec-base-prdInfo .description .info{margin:5px 0 0;}
.ec-base-prdInfo .description .info li{margin:0 0 3px;font-size:12px;color:#7d7d7d;}
.ec-base-prdInfo .description .info a{color:#7d7d7d;}
.ec-base-prdInfo .description .info .mileage{display:inline-block;}
.ec-base-prdInfo .description .info .mileage img{vertical-align: text-top;}
.ec-base-prdInfo .description input[type="number"]{max-width:51px;}
.ec-base-prdInfo .description .info .amount button{margin:0;padding:0;border:0;}
.ec-base-prdInfo .description .info .amount{width:50px;}
.ec-base-prdInfo .description .info input.amount{text-align:right;}
.ec-base-prdInfo .description input[type="tel"]{text-align:right;}
.ec-base-prdInfo .description .quantity input[type="tel"]{width:51px;}
.ec-base-prdInfo .sumPrice strong{font-size:16px;}
.ec-base-prdInfo .quantity{margin:20px 0 0;padding:0 0 0 98px;box-sizing:border-box;width:100%;}
.ec-base-prdInfo.gCheck .quantity{padding:0 0 0 125px;}
.ec-base-prdInfo .btnDelete{display:block;position:absolute;top:20px;right:-5px;overflow:hidden;width:30px;height:30px;margin:0 auto;font-size:0px;line-height:0;color:transparent;white-space:nowrap;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.ec-base-prdInfo .btnDelete:before{content:"";position:absolute;top:4px;right:14px;width:1px;height:21px;background:#b5b5b5;-webkit-transition:.3s ease-out;transition:.3s ease-out;}
.ec-base-prdInfo .btnDelete:after{content:"";position:absolute;top:14px;right:4px;width:21px;height:1px;background:#b5b5b5;-webkit-transition:.3s ease-out;transition:.3s ease-out;}
.ec-base-prdInfo .optionGroup{margin:15px 0 0;}
.ec-base-prdInfo .optionGroup:empty{margin-top:0;}
.ec-base-prdInfo .optionGroup li{margin:5px 0 0;line-height:20px;color:#7d7d7d;}
.ec-base-prdInfo .optionGroup .optionName{line-height:18px;word-break:break-all;}
.ec-base-prdInfo .optionGroup li .product{display:block;margin:8px 0 0;color:#000;}
.ec-base-prdInfo .optionGroup li .change{margin:0 0 0 5px;white-space:nowrap;}
.ec-base-prdInfo .optionGroup .product.displaynone + .optionStr{display:inline-block;margin-right:10px;color:#000;}
.ec-base-prdInfo .optionGroup .product.displaynone + .optionStr:empty{margin-right:0;}
.ec-base-prdInfo .optionGroup li br{display:none;}
.ec-base-prdInfo .optionGroup .file a{color:#07a4fd;text-decoration:underline;word-break:break-all;}
.ec-base-prdInfo .optionSelect{padding:10px 20px 20px;background:#f6f6f6;}
.ec-base-prdInfo .optionSelect li{margin:10px 0 0;}
.ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input{width:calc(100% - 258px);}
.ec-base-prdInfo .optionSelect + .optionSelect{margin-top:-34px;padding-top:0;}
.ec-base-prdInfo .optionDesc{display:inline-block;width:254px;color:#545454;}
.ec-base-prdInfo .prdFoot{line-height:26px;border-top:1px solid #e5e5e5;}
.ec-base-prdInfo .prdFoot:after{content:'';display:block;clear:both;}
.ec-base-prdInfo .prdFoot .gLeft{float:left;text-align:left;line-height:32px;}
.ec-base-prdInfo .prdFoot .gRight{float:right;text-align:right;}
.ec-base-prdInfo .prdFoot .txtStatus{display:inline-block;margin-right:10px;font-size:16px;font-weight:bold;}
.ec-base-prdInfo .prdFoot .store{color:#000;font-weight:normal;}
.ec-base-prdInfo .prdFoot span span.discount{text-decoration:line-through;}
.ec-base-prdInfo .prdFoot span span.discount strong {font-weight:normal;}
.ec-base-prdInfo .optionModifyLayer{display:none;}
.ec-base-prdInfo .optionModifyLayer .dimmed {position:fixed;top:0;right:0;bottom:0;left:0;background: rgba(0,0,0,0.3);}
.ec-base-prdInfo .optionModifyLayer .title{display:block;margin:0 0 6px;font-size:13px;}
.ec-base-prdInfo .optionModifyLayer .prdInfo{font-size:13px;}
.ec-base-prdInfo .optionModifyLayer .prdInfo li{margin:0 0 20px;}
.ec-base-prdInfo .optionModifyLayer .prdInfo li:empty{margin:0;}
.ec-base-prdInfo .optionModifyLayer .prdModify li{display:flex;margin:10px 0 0;}
.ec-base-prdInfo .optionModifyLayer .prdModify li:first-child{margin-top:0;}
.ec-base-prdInfo .optionModifyLayer .prdModify .optionDesc{display:inline-block;width:89px;padding:11px 0 0;font-size:13px;color:#545454;}
.ec-base-prdInfo .optionModifyLayer .prdModify li select{flex:1;width:100%;}
.ec-base-prdInfo .optionModifyLayer .prdModify li input[type=text]{flex:1;width:100%;}
.orderArea .ec-base-fold .ec-base-prdInfo{border-bottom:1px solid #d5d5d5;}
.orderConfirmLayer .orderArea .ec-base-prdInfo{border-bottom:0;}
.orderArea .ec-base-prdInfo + .ec-base-prdInfo{border-top:1px solid #d5d5d5;}
.ec-base-prdEmpty{text-align:center;color:#6d6d6d;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
@media all and (max-width:1024px){.ec-base-prdInfo .prdBox{padding:24px 16px;}.ec-base-prdInfo .description{padding:0 40px 0 0;}.ec-base-prdInfo .sumPrice{margin:20px 0 0;padding:0 0 0 98px;box-sizing:border-box;width:100%;}.ec-base-prdInfo .buttonGroup{margin:20px 0 0;padding:0 0 0 98px;box-sizing:border-box;width:100%;}.ec-base-prdInfo.gCheck .sumPrice,.ec-base-prdInfo.gCheck .quantity,.ec-base-prdInfo.gCheck .buttonGroup{padding:0 0 0 125px;}.ec-base-prdInfo .btnDelete{right:12px;}.ec-base-prdInfo .optionSelect{margin:0 16px 24px;padding:10px 20px 20px;}.ec-base-prdInfo .optionSelect li{margin:10px 0 0;}.ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input{width:100%;}.ec-base-prdInfo .optionSelect + .optionSelect{margin-top:-34px;padding-top:0;}.ec-base-prdInfo .optionDesc{display:block;margin:0 0 10px;color:#545454;}.ec-base-prdInfo .prdFoot{padding:18px 16px;}.optionModifyLayer .ec-base-button{display:flex;}.optionModifyLayer .ec-base-button [class*='Fix'] {flex:1;min-width:auto;}.ec-base-prdEmpty{padding:40px 0;}}
@media all and (min-width:1025px){.ec-base-prdInfo .prdBox{position:relative;padding:25px 0;}.ec-base-prdInfo .description{margin:0 250px 0 0;}.ec-base-prdInfo .sumPrice{text-align:right;padding:0 42px 0 0;}.ec-base-prdInfo .buttonGroup{position:absolute;bottom:25px;right:0;width:300px;text-align:right;}.ec-base-prdInfo .btnDelete{right:-5px;}.ec-base-prdInfo .optionSelect{margin:0 0 24px 98px;padding:10px 20px 20px;}.ec-base-prdInfo .optionSelect li{margin:10px 0 0;}.ec-base-prdInfo .optionSelect select,.ec-base-prdInfo .optionSelect input{width:calc(100% - 258px);}.ec-base-prdInfo .optionSelect + .optionSelect{margin-top:-34px;padding-top:0;}.ec-base-prdInfo .optionDesc{width:254px;}.ec-base-prdInfo .prdFoot{padding:18px 0;}.optionModifyLayer .ec-base-layer{width:485px;}.ec-base-prdEmpty{padding:56px 0;}}div.ec-base-help{margin:50px 0 20px;line-height:18px;word-break:keep-all;}
div.ec-base-help > h2,div.ec-base-help > h3{display:block;margin:0 0 20px;font-size:16px;color:#000;}
div.ec-base-help .inner{padding:20px;border:1px solid #e5e5e5;}
div.ec-base-help h4{color:#000;font-size:12px;font-weight:normal;margin:22px 0 10px;margin-bottom:0.5rem;font-size:0.9rem;}
div.ec-base-help h4:first-child{margin-top:0;}
div.ec-base-help h4 + ul,div.ec-base-help p,div.ec-base-help ul,div.ec-base-help ol{margin:15px 0 0 0;}
div.ec-base-help .inner ul{margin:0;}
div.ec-base-help ul + h4{margin-top:0.9rem;}
div.ec-base-help p,div.ec-base-help li{color:#6d6d6d;font-size:12px;line-height:21px;}
div.ec-base-help p,div.ec-base-help ul li{padding:0 0 0 12px;}
div.ec-base-help p:before,div.ec-base-help ul li:before{content:"";display:inline-block;width:3px;height:3px;margin:7px 9px 0 -12px;vertical-align:top;border-radius:50%;background:#6d6d6d;}
div.ec-base-help > h2,div.ec-base-help > h3{padding:0;font-size:1.1rem;}
.xans-order-basketguide.ec-base-help > h3{padding:0;margin:0 0 1rem;}
.xans-order-basketguide.ec-base-help .inner{padding:1rem;}
/* ===== Delivery Notice (.dm) ===== */
.dm{background:#fff;padding:15px;position:relative;margin:10px 0;border:1px solid #eee;font-size:0;border-radius:5px;}
.dm .ico{background:#aaa;width:42px;height:42px;display:inline-block;vertical-align:middle;border-radius:50%;margin-right:15px;background-image:url(/skin_img/ico_time_fff.svg);background-size:30px;background-position:50% 50%;background-repeat:no-repeat;}
.dm.active .ico{background:#FF5D01;background-image:url(/skin_img/ico_detail_delivery_fff.svg);}
.dm .info{display:inline-block;vertical-align:middle;width:calc(100% - 57px);line-height:1.3;color:#555;}
.dm .msg1{color:#333;font-weight:500;}
.dm .msg2>span{color:#FF5D01;font-weight:600;}
.dm .msg3>span{color:#FF5D01;font-weight:600;}
@media all and (min-width:1025px){.dm .info{font-size:13px;}.dm .msg1{font-size:14px;margin-bottom:3px;}}
@media all and (max-width:1024px){.dm .info{font-size:1rem;}.dm .msg1{font-size:0.9rem;margin-bottom:0.2rem;}}