/* BASIC css start */

/* 풍류 모바일 상단 v4 | 기본 상단 > 기능 설정 > CSS 전체 교체. style 태그 없이 입력합니다. 크림 원본 CSS 복사가 아닌 별도 구현입니다. */ #prm-header { /* 이 값들로 간격·크기·속도를 조절합니다. */ --prm-nav-gap: 24px; --prm-nav-edge: 16px; --prm-nav-height: 48px; --prm-nav-size: 15px; --prm-motion: 240ms; --prm-z-index: 100; --prm-ink: #222; --prm-line: #ededed; --prm-accent: #f05223; --prm-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; position: sticky; top: 0; z-index: var(--prm-z-index); display: block; width: 100%; min-width: 0; margin: 0; padding: env(safe-area-inset-top, 0px) 0 0; border: 0; background: #fff; color: var(--prm-ink); font-family: var(--prm-font) !important; font-size: 14px; font-style: normal; line-height: 1.4; text-align: left; -webkit-text-size-adjust: 100%; } #prm-header.prm-fixed { position: fixed; top: 0; right: 0; bottom: auto; left: 0; width: 100%; max-width: none; transform: none; } #prm-header-space { display: none; clear: both; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } #prm-header, #prm-header *, #prm-header *::before, #prm-header *::after { box-sizing: border-box; } #prm-header * { font-family: var(--prm-font) !important; } #prm-header a { color: inherit; text-decoration: none; } #prm-header button, #prm-header input { font: inherit; } #prm-header a:focus-visible, #prm-header button:focus-visible, #prm-header input:focus-visible { outline: 2px solid #2157ca; outline-offset: -3px; } /* 1. 로고와 예약판매 안내: 기존 구성 유지 */ #prm-header .prm-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; max-width: 768px; margin: 0 auto; padding: 0 16px; } #prm-header .prm-logo { display: block; flex-shrink: 0; font-size: 19px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; } #prm-header .prm-notice { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; min-height: 44px; color: #777; font-size: 10px; } #prm-header .prm-notice strong { color: #222; font-size: 10px; font-weight: 750; } /* 2. 검색창·전체 메뉴·장바구니 */ #prm-header .prm-tools { display: flex; align-items: center; gap: 2px; width: 100%; max-width: 768px; margin: 0 auto; padding: 0 10px 4px 16px; } #prm-header .prm-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 10px; border: 0; border-radius: 0; background: transparent; color: var(--prm-ink); cursor: pointer; appearance: none; } #prm-header .prm-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } #prm-header .prm-search { display: flex; align-items: center; flex: 1 1 0%; min-width: 0; height: 42px; margin: 0 4px 0 0; padding: 0 0 0 12px; border: 0; border-radius: 8px; background: #f4f4f4; } #prm-header .prm-search input { display: block; flex: 1 1 0%; width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--prm-ink); font-size: 16px; line-height: normal; box-shadow: none; -webkit-appearance: none; appearance: none; } #prm-header .prm-search input::placeholder { color: #999; opacity: 1; font-family: var(--prm-font); font-size: 12px; } #prm-header .prm-search .prm-icon svg { width: 19px; height: 19px; color: #666; } /* 3. 카테고리: 글자 길이만큼 너비 + 일정한 24px 간격 */ #prm-header .prm-nav-shell { width: 100%; border-bottom: 1px solid var(--prm-line); } #prm-header .prm-nav { width: 100%; max-width: 768px; margin: 0 auto; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: auto; scroll-snap-type: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #prm-header .prm-nav::-webkit-scrollbar { display: none; } #prm-header .prm-nav-track { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--prm-nav-gap); width: max-content; min-width: 100%; margin: 0; padding: 0 var(--prm-nav-edge); } #prm-header .prm-tab { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; min-height: var(--prm-nav-height); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #333; font-size: var(--prm-nav-size); font-style: normal; font-weight: 500; line-height: 1.4; letter-spacing: -.3px; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; } #prm-header .prm-tab.prm-active { color: #222; font-weight: 700; } #prm-header .prm-tab.prm-preorder, #prm-header .prm-menu-grid .prm-preorder { color: var(--prm-accent); } /* 각각 생기는 밑줄 대신, 하나의 밑줄이 선택한 메뉴로 이동합니다. */ #prm-header .prm-nav-indicator { position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 2px; margin: 0; padding: 0; background: #222; opacity: 0; transform: translate3d(0, 0, 0); pointer-events: none; transition: transform var(--prm-motion) ease, width var(--prm-motion) ease, background-color var(--prm-motion) ease; } /* 4. 전체 메뉴: 고정 헤더 아래에서 펼침. 메뉴 안쪽만 세로 스크롤 */ #prm-header .prm-menu { position: absolute; top: 100%; left: 50%; display: none; width: 100%; max-width: 768px; max-height: calc(100vh - var(--prm-bar-height, 141px)); max-height: calc(100dvh - var(--prm-bar-height, 141px)); margin: 0; padding: 12px 16px 20px; overflow-y: auto; overscroll-behavior-y: contain; border-bottom: 1px solid var(--prm-line); background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .045); transform: translateX(-50%); -webkit-overflow-scrolling: touch; } #prm-header .prm-menu:target, #prm-header .prm-menu.prm-is-open { display: block; } #prm-header.prm-enhanced .prm-menu:not(.prm-is-open) { display: none; } #prm-header .prm-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } #prm-header .prm-menu-heading strong { font-size: 11px; font-weight: 750; letter-spacing: 1.1px; } #prm-header .prm-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #777; font-size: 12px; } #prm-header .prm-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } #prm-header .prm-menu-grid a { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; font-weight: 600; } #prm-header .prm-menu-grid span { color: #999; font-size: 14px; } #prm-header .prm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 359px) { #prm-header { --prm-nav-edge: 12px; } #prm-header .prm-brandbar { padding-right: 12px; padding-left: 12px; } #prm-header .prm-logo { font-size: 18px; } #prm-header .prm-tools { padding-right: 6px; padding-left: 12px; } } @media (prefers-reduced-motion: reduce) { #prm-header { --prm-motion: 0ms; } #prm-header .prm-nav-indicator { transition: none; } } /* 상단 가로 카테고리: 텍스트에만 기울임 적용 */ #prm-header .prm-nav .prm-tab { font-style: italic; }
div.H-5864-1-3216 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* 레이어 목록 */
#layer-list .pp2-layer-bg {height: 100%; background-color: #fff; margin-right: 60px;}
#pp2-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background-color: #000; }
#layer-list {visibility: visible; position: fixed; 
    top: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    z-index: 101;
    -webkit-transition-property:-webkit-transform, right, top;
    -webkit-transition-duration:.2s;
    -webkit-transform:translate3d(-100%,0,0);
    -webkit-transition-timing-function:ease-out;

    -moz-transition-property:-moz-transform, right, top;
    -moz-transition-duration:.2s;
    -moz-transform:translate3d(-100%,0,0);
    -moz-transition-timing-function:ease-out;

    -o-transition-property:-o-transform, right, top;
    -o-transition-duration:.2s;
    -o-transform:translate3d(-100%,0,0);
    -o-transition-timing-function:ease-out;
    -o-transform:translate(100%,0px);

    -ms-transition-property:-ms-transform, right, top;
    -ms-transition-duration:.2s;
    -ms-transform:translate3d(-100%,0,0);
    -ms-transition-timing-function:ease-out;

    transition-property:transform, right, top;
    transition-duration:.2s;
    transform:translate3d(-100%,0,0);
    transition-timing-function:ease-out;
}
.bg-modal {position:absolute; left:0; top:0; width:100%; height: 100%; z-index:4;}

.layer-list {position:absolute; left:0; top:0; width:100%;}
.layer-list .layer-list-box {margin-right:60px; background:#fff; overflow:hidden; line-height:14px;}
.layer-goods-box .layer-overlay-click,
.layer-list .layer-overlay-click { position: absolute; right: 0; top: 0; width: 60px; height: 100%; z-index: 1; }



.layer-list .layer-list-top { position: relative; height: 50px; border-bottom: 1px solid #bbbbbb; }
.layer-list .layer-list-top .btn-logo { display: inline-block; margin-left: 10px; height: 50px; line-height: 50px; font-weight: bold;}
.layer-list .layer-list-top .btn-logo img { max-height: 20px; width: auto; }
.layer-list .layer-list-top .btn-list-close {position: absolute; top: 5px; right: 5px; width: 45px; height: 36px;}
.layer-list .layer-list-top .btn-list-close .pop-close-btn .x1 {border: 1px solid #777; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 25px; position: absolute; top: 17px; right: 7px;}
.layer-list .layer-list-top .btn-list-close .pop-close-btn .x2 {border: 1px solid #777; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 25px; position: absolute; top: 17px; right: 7px;}
.layer-list .layer-list-top .menu-sch-box .sch .btn-detail-sch {position: absolute; right: 10px; top: 15px; width: 15px; height: 15px; font-size: 0.75em; line-height: 0; color: #777;}

.layer-list .my-list { height: 40px; padding: 0 10px 15px; overflow: hidden; background-color: #f1f1f1; }
.layer-list .my-list li {float:left; width:50%; color:#333; font-size:0.75em; text-align:center;}
.layer-list .my-list li a.btn-join { display: block; height: 36px; line-height: 36px; border: 1px solid #383838; color: #383838; font-weight: bold; background-color: #fff; border-radius: 3px; margin-right: 3px; }
.layer-list .my-list li a.btn-login { display: block; height: 36px; line-height: 36px; border: 1px solid #383838; color: #fff; background-color: #383838; border-radius: 3px; }
.layer-list .my-list li strong {color:#e74c3c;}z`
.layer-list .my-list li a {color:#333;}
.layer-list .my-list li a strong {color:#e74c3c;}

.layer-list .my-list-sch { position: relative; }
.layer-list .my-list-sch .menu-sch-box .sch { background: none; }
.layer-list .my-list-sch .menu-sch-box .sch p { margin: 0; }
.layer-list .my-list-sch .menu-sch-box .sch .btn-detail-sch {position: absolute; right: 20px; top: 21px; width: 15px; height: 15px; font-size: 0.75em; line-height: 0; color: #777;}
.layer-list .my-list-sch .menu-sch-box .sch input[type='text'] {border: 2px solid #9e9e9e; width: 100%; height: 35px; line-height: 35px; border-radius: 18px;}
.layer-list .my-list-sch .menu-sch-box .sch > div { padding: 10px; background-color: #f1f1f1; } 

.layer-list .stats-logout .member-stats { padding: 10px 0 25px; text-align: center; background-color: #f1f1f1; }
.layer-list .stats-logout .member-stats dl dt { margin-bottom: 15px; font-weight: bold; color: #202020; font-size: 0.875em; }
.layer-list .stats-logout .member-stats dl dd { line-height: 20px; font-weight: bold; color: #858484; font-size: 0.875em; }

.layer-list .stats-login .member-stats { padding: 10px 0 25px; text-align: center; background-color: #f1f1f1; }
.layer-list .stats-login .member-stats dl dt { margin-bottom: 15px; font-weight: bold; color: #202020; font-size: 0.875em; }
.layer-list .stats-login .member-stats dl dd { line-height: 20px; font-weight: bold; color: #858484; font-size: 0.875em; }
.layer-list .stats-login .member-stats dl dd .del-count {display: block; color: #F74F4F; margin-top: 5px;}


.layer-list .tab-menu {overflow:hidden; font-size: 0.875em; padding: 5px 2px 10px;}
.layer-list .tab-menu li {position:relative; float:left; width:33.3%; margin-top:8px; box-sizing: border-box;}
.layer-list .tab-menu li:first-child {border-left: 1px solid #585858;}
.layer-list .tab-menu li a {display:block; text-align:center; height:39px; line-height:40px; color:#585858; font-size:0.875em; border: 1px solid #585858; border-left: 0px;}
.layer-list .tab-menu .on a {background:#585858; color:#fff;}
.layer-list .tab-menu .on a em {position:absolute; left:44%; bottom:-6px; border-top:6px solid #585858; border-left:4px solid transparent; border-right:4px solid transparent;}
.layer-list .list-menu {overflow:hidden; font-size: 0.79em;}
.layer-list .list-menu .category-list-top {border-top: 1px solid #e0e0e0;}
.layer-list .list-menu ul li span {display:block; height:41px; line-height:42px; border-bottom:1px solid #e0e0e0; padding-right: 35px;}
.layer-list .list-menu ul li span a { display:block; padding-left:10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; height:100%;}
.layer-list .list-menu ul li ul li span a {padding-left:25px;}
.layer-list #tab-category.list-menu > ul li { position: relative; }
.layer-list #tab-category.list-menu > ul > li ul { display: none; background-color: #f9f9f9; }
.layer-list #tab-category.list-menu > ul > li > ul > li > ul > li > span a { padding-left: 50px; }
.layer-list #tab-category.list-menu > ul li span a.expend {display: block; position: absolute; top: 0; right: 0; width: 50px; height: 41px; padding-left: 0; text-align: center;}
.layer-list #tab-category.list-menu > ul li span a.expend:before { content: "\f107"; font-family: FontAwesome; }
.layer-list #tab-category.list-menu > ul li span a.expend.showing:before { content: "\f106"; font-family: FontAwesome;}

#review-board-type .reply-write .sub-reviews li { border-bottom: 1px solid #e1e1e1; list-style-type: none; padding: 10px 14px; background-color: #fff; }
#review-board-type .reply-write .sub-reviews li:last-child { border-bottom: none; }
#review-board-type .reply-write .sub-reviews .info { font-size: .75em; color: #777; }
#review-board-type .reply-write .sub-reviews .info .btns { display: inline-block; margin-left: 10px; }
#review-board-type .reply-write .sub-reviews .info a { font-size: 1em; }
#review-board-type .reply-write .sub-reviews li p { margin-top: 5px; font-size: .75em; color: #777; }
#review-board-type .reply-write td ul.agree li a {position: absolute; right: 14px; top: 7px; font-size: 1em; }

.layer-list .cs-center {padding:20px;}
.layer-list .cs-center p {color:#666; font-size:0.75em; text-align: center;}


.member-menu { position: relative; margin: 7px 5px 0; border: 3px double #dedede; border-radius: 5px; }
.member-menu .fa-hover {color: #717171;}
.member-menu .fa-hover span {font-size: 1.5em;}

#menuArea { padding: 15px 0; text-align: center; }
#menuArea ul {overflow: hidden;}
#menuArea ul li { display: inline-block; float: left;}
#menuArea ul li figure {padding-top: 2px;}
#menuArea ul li.last { margin-right: 0; }
#menuArea ul li figcaption { margin-top: 3px; font-size: 12px; }

/* 최근 본 상품 */
.resent-list ul {overflow:hidden;}
.resent-list ul li dl dd a span.tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.resent-list {overflow:hidden; padding: 0 8px; text-align: center;}
.resent-list ul li {float:left; width:50%; margin-bottom:10px;}
.resent-list ul li dl {padding: 0 1px 5px;}
.resent-list ul li dl dt img {max-width:100%; height:auto;}
.resent-list ul li dl dd {color:#555555; line-height:18px; font-size:0.75em; padding:5px 7px 0 7px;}
.resent-list ul li dl dd span {display:block; color:#000; word-break: break-all; }
.resent-list ul li dl dd a {color:#555555;}
.resent-list .recent-dec {text-align: center; display: block; font-size: 0.875em; background-color: #f9f9f9; padding: 20px 0;}

/* 자주찾는 카테고리 모음 */
.favorite_cate {border: 1px solid #b1bbc5; margin: 2px 3px 5px; border-radius: 3px;}
.favorite_cate .favorite_btn {padding: 10px 0; display: inline-block; width: 100%; background-color: #e2e6ea; text-align: center;}
.favorite_cate .favorite_wrap li { overflow:hidden; padding:5px 10px 10px; font-size: 0.875em; text-align: center;}
.favorite_cate .favorite_wrap li a {float:left; height: 25px; line-height: 25px; padding: 0 5px; margin:5px 5px 0 0; border:1px solid #ccc; background:#fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; box-sizing: border-box;}
.favorite_cate .favorite_wrap {display: none; border-top: 1px dotted #b1bbc5;}


div.H-5864-1-3220 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }

div.H-5864-1-3221 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* BASIC css end */