:root {    
    --font-family:"Domine", "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;    
    --font-size:13px;
    --font-size-small:calc(var(--font-size) - 1px);
    --font-weight:400;
    --font-weight-bold:600;
    --line-height:1.6;

    --color:#000;
    --color-sub:#777;
    
    --background:#fff;
    --border-color:#e1e1e1;
    --border-color-point:#000;

    --padding:7px 10px;
    --padding-large:10px;
    --padding-small:4px 7px;
    
    --box-background:transparent;
    --box-border:1px solid #e1e1e1;
    --box-border-radius:0;
    
    --btn-background:none;
    --btn-background-point:#000;
    --btn-border:1px solid #e1e1e1;
    --btn-border-point:1px solid transparent;
    --btn-border-radius:0;
    --btn-color-point:#fff;
    
    --qty-btn-up:0;
    --qty-btn-down:-1;
    
    --title-large-font-size:calc(var(--font-size) + 2px);
    --title-large-font-weight:400;
    --title-medium-font-size:calc(var(--font-size) + 1.5px);
    --title-medium-font-weight:400;
    --title-small-font-size:calc(var(--font-size) + 1px);
    --title-small-font-weight:400;
    
    --font-resize-list:1px;
    --font-resize-detail:1px;
    --font-resize-edit:1px;
    
    --prd-space-right:10px;
    --prd-space-bottom:50px;
}

body { font-family:var(--font-family); font-size:var(--font-size); font-weight:var(--font-weight); line-height:var(--line-height); background:var(--background); color:var(--color); }
body.fix { padding-top:var(--header); }

#loading { position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; background:var(--background); }
#loading.off { opacity:0; visibility:hidden; transition:all 0.5s; }

::selection { background:#555; color:#fff; }
::placeholder { color:var(--color-sub); }
::-webkit-scrollbar-thumb { background-color:#ddd; }

.a-header { position:relative; top:0; z-index:20; width:100%; }
body.fix .a-header { position:fixed; }

.a-header .visible .wrap { position:absolute; padding:20px; }
.a-header .visible .logo { margin:0 0 15px; line-height:0; }
.a-header .visible .logo span { font-size:22px; line-height:1; }
.a-header .visible .logo img[src*="/"] + span { display:none; }

.a-header .visible .menu-main { font-size:14px; }
.a-header .visible .menu-main > ul > li { position:relative; }
.a-header .visible .menu-main .more { position:absolute; top:0; left:0; z-index:1; width:100%; height:1.6em; cursor:pointer; }
.a-header .visible .menu-main .active a:not([href*="#none"]) + .more { display:none; }
.a-header .visible .menu-main .sub { display:none; margin:10px 7px; font-size:12.5px; }
.a-header .visible .menu-main .this > .sub { display:block; }

.a-header .visible .menu-etc { position:absolute; right:0; padding:20px; font-size:12px; }
.a-header .visible .menu-etc li { display:inline-block; margin-left:10px; }
.a-header .visible .menu-etc .xans-layout-orderbasketcount span { display:inline-block !important; margin-left:3px; }

.a-header .visible .btn-menu { display:none; margin:-1px 15px 0 0; }
.a-header .visible .btn-menu .bar { position:relative; width:16px; height:16px; cursor:pointer; }
.a-header .visible .btn-menu span,
.a-header .visible .btn-menu span:before,
.a-header .visible .btn-menu span:after { content:""; position:absolute; top:50%; left:0; width:100%; height:0; border-bottom:1.2px solid var(--color); font-size:0; }
.a-header .visible .btn-menu span:before { top:-6px; }
.a-header .visible .btn-menu span:after { top:6px; }

.a-menu .wrap { position:fixed; top:0; left:-300px; z-index:20; width:70%; max-width:300px; height:100%; background:var(--background); transition:left 0.5s; line-height:1.9; }
.a-menu .wrap .inner { height:100%; padding:15px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.a-menu .menu-main { font-size:14px; }
.a-menu .menu-main > ul > li { position:relative; }
.a-menu .menu-main .more { position:absolute; top:0; right:0; z-index:1; width:100%; height:1.9em; cursor:pointer; }
.a-menu .menu-main .active a:not([href*="#none"]) + .more { display:none; }
.a-menu .menu-main .sub { display:none; margin:7px 10px; font-size:12.5px; line-height:1.8; }
.a-menu .menu-main .this > .sub { display:block; }

.a-menu .xans-layout-searchheader { margin:30px 0 40px; }
.a-menu .xans-layout-searchheader fieldset { position:relative; display:flex; align-items:center; padding:5px 0; border-bottom:1px solid; }
.a-menu .xans-layout-searchheader input { padding:0; border:0; font-size:inherit; color:inherit; }
.a-menu .xans-layout-searchheader ::placeholder { color:inherit; }
.a-menu .xans-layout-searchheader .delete { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.a-menu .xans-layout-searchheader .btn { position:relative; top:1px; font-size:0; cursor:pointer; }
.a-menu .xans-layout-searchheader .btn:before { content:"\e97a"; font-family:"xeicon"; font-size:13px; }
.a-menu .xans-layout-searchheader .xans-search-hotkeyword .a-wrap li,
.a-menu .xans-layout-searchheader .xans-search-hotkeyword .swiper .a-wrap { height:35px; line-height:35px; }

.a-menu .menu-etc { font-size:11.5px; }
.a-menu .menu-etc .xans-layout-orderbasketcount span { display:inline-block !important; margin-left:2px; }

.a-menu .btn-close { position:absolute; top:20px; right:0; margin-right:-30px; width:16px; height:16px; font-size:0; opacity:0; visibility:hidden; transition:opacity 1s 0.5s; cursor:pointer; }
.a-menu .btn-close span:before,
.a-menu .btn-close span:after { content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:#fff; }
.a-menu .btn-close span:before { transform:rotate(45deg); }
.a-menu .btn-close span:after { transform:rotate(-45deg); }
.a-menu .bg-close { position:fixed; top:0; left:0; z-index:12; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; visibility:hidden; transition:opacity 1s, visibility 1s; cursor:pointer; }

.a-search { position:fixed; top:0; left:0; z-index:20; width:100%; height:100%; color:#fff; text-align:center; opacity:0; visibility:hidden; transition:opacity 0.5s, visibility 0.5s; }
.search-active .a-search { opacity:1; visibility:visible; }
.a-search .xans-layout-searchheader { width:90%; max-width:550px; margin:100px auto 0; }
.a-search .xans-layout-searchheader fieldset { position:relative; display:flex; align-items:center; margin:0 30px; border-bottom:1px solid; }
.a-search .xans-layout-searchheader input { padding:10px 0; background:none; border:0; font-size:14px; color:inherit; }
.a-search .xans-layout-searchheader ::placeholder { color:inherit; }
.a-search .xans-layout-searchheader .delete { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.a-search .xans-layout-searchheader .btn { position:relative; top:1px; font-size:0; cursor:pointer; }
.a-search .xans-layout-searchheader .btn:before { content:"\e97a"; font-family:"xeicon"; font-size:15px; }
.a-search .xans-search-hotkeyword { margin:50px 0 0; }
.a-search .xans-search-hotkeyword li { display:inline-block; margin:5px 7px; }
.a-search .btn-close { margin:120px 0 0; cursor:pointer; }
.a-search .bg-close { position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(57,55,55,0.95); }

.a-container { position:relative; max-width:1500px; height:100%; min-height:calc(var(--vh, 100vh) - var(--header, 0px) - var(--footer, 0px)); margin:0 auto; padding:65px 200px 100px; }

.a-footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; padding:20px; font-size:11.5px; }
.a-footer .company { line-height:1.5; }
.a-footer .company > div { display:inline-block; margin-right:5px; }
.a-footer .company span { margin-right:3px; }
.a-footer .company .blank { display:none; }
.a-footer .company .company_name span { display:none; }
.a-footer .company .mall_addr span { display:none; }
.a-footer .company .president_name + .blank { display:block; }
.a-footer .company .network_regno + .blank { display:block; }
.a-footer .company .copy { display:none; }
.a-footer .escrow { display:block; margin:10px 0 0; line-height:1.4; word-break:keep-all; }
.a-footer .escrow u { position:relative; display:inline-block; text-decoration:none; }
.a-footer .escrow u:before { content:""; position:absolute; left:0; bottom:1px; width:100%; border-bottom:1px solid; opacity:0.5; }
.a-footer .escrow[href="#"] { display:none; }

.a-btnfix { position:fixed; bottom:20px; right:20px; z-index:10; opacity:0; transition:opacity 0.5s 2s, bottom 0.5s; }
.a-btnfix .chat { display:block; width:45px; height:45px; background:var(--background) url("/ade/skin/img/btn_chat.png") 50% 45%/60% no-repeat; border-radius:100%; box-shadow:0 0 20px 2px rgba(120,120,120,0.2); font-size:0; transition:all 0.5s; }
.a-btnfix .chat:hover { box-shadow:0 0 25px 2px rgba(120,120,120,0.3); }
.a-btnfix .chat[href="#"] { display:none; }
html[style] .a-btnfix { opacity:1; }

@media (max-width:1650px) {
	.a-container { padding-left:250px; }
}
@media (max-width:1500px) {
	.a-container { padding-right:100px; }
}
@media (max-width:1300px) {
	.a-footer .wrap > .copy { display:none; }
    .a-footer .company .copy { display:inline-block; }
}
 
@media (max-width:1023px) { 
    :root { --font-size:12px; }
    html[data-ua="pc"]:not(#html) { --font-size:13px; }    
    #wrap { overflow-x:hidden; }
    
    .a-header .visible { display:flex; align-items:center; padding:15px; }
    .a-header .visible .btn-menu { display:block; }
    .a-header .visible .wrap { flex:1; position:inherit; padding:0; }
    .a-header .visible .logo { margin:0; }
    .a-header .visible .logo span { position:relative; top:1px; font-size:19px; }
    .a-header .visible .menu-main { display:none; }
    .a-header .visible .menu-etc { position:inherit; padding:0; }
    .a-header .visible .menu-etc li:not(.xans-layout-orderbasketcount) { display:none; }
    
    .menu-active { height:100%; overflow:hidden; touch-action:none; }
    .menu-active .a-menu .wrap { left:0; }
    .menu-active .a-menu .btn-close { opacity:1; visibility:visible; }
    .menu-active .a-menu .bg-close { opacity:1; visibility:visible; }
    
    .a-container { padding:15px 15px 50px; }
    
    .a-footer .wrap { padding:15px; font-size:10.5px; line-height:1.7; }
    .a-footer .company { order:1; width:100%; margin:15px 0 0; font-size:10px; }
    .a-footer .company > div { margin-right:4px; }
	.a-footer .company span { margin-right:2px; }
    .a-footer .company .company_name { margin:0 0 3px; font-size:11px; }
    .a-footer .company .company_name + .blank { display:block; }
    .a-footer .company .president_name + .blank { display:none; }
	.a-footer .company .network_regno + .blank { display:none; }
    
    .a-btnfix { right:10px; bottom:15px; }
    .a-btnfix .chat { width:40px; height:40px; }
}

/* 상품 */
@media (max-width:1023px) {
    :root { --prd-space-bottom:30px; }
}

.layout .ec-base-product .effect .hover { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:all 0.2s; }
.layout .ec-base-product .thumbnail:hover .effect .hover:not([style*="img.echosting.cafe24.com"],[style*="_1.gif"]) { opacity:1; }
.layout .ec-base-product .spec > li[class*="_custom"] [style*="line-through"],
.layout .ec-base-product .spec > li[class*="_price"] [style*="line-through"] { display:inline-block; transform:scale(0.93); transform-origin:0 0; }
.layout .ec-base-product .spec > li.prd_price_sale > span > span,
.layout .ec-base-product .spec > li.optimum_discount_price > span > span { margin-left:2px; }
.layout .ec-base-product .button { display:none; }

.ico-soldout:before { content:"OUT OF STOCK"; }
.icon .ico-soldout { font-size:var(--font-size-small); color:#777; }

/* 게시판 */
.board-category { font-size:1.05em; margin:0 0 15px; }
.board-category > ul { display:flex; flex-wrap:wrap; }
.board-category > ul > li { margin-right:10px; }
.board-category > ul > li.selected { font-weight:var(--font-weight-bold); }

/* 모달 */
#aModal { position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; background:rgba(57,55,55,0.95); backdrop-filter:blur(20px); color:#fff; opacity:0; visibility:hidden; transition:all 0.3s; }
#aModal.show { opacity:1; visibility:visible; }
#aModal .close { position:absolute; top:0; left:0; width:100%; height:100%; font-size:1.1em; line-height:1; }
#aModal .close:before { content:"CLOSE"; position:absolute; top:10px; right:10px; z-index:10; padding:10px; cursor:pointer; }
#aModal .content { max-width:1000px; height:100%; margin:0 auto; }
#aModal .s-wrap,
#aModal .s-wrap .over,
#aModal .s-wrap .swiper { height:100%; }
#aModal .swiper-slide { display:flex; align-items:center; justify-content:center; }
#aModal .swiper-slide img { width:auto !important; max-height:100% !important; padding:50px 0; }
#aModal .btn-swiper-navi { font-size:1.7em; color:#fff; }
@media (max-width:767px) {
    #aModal .btn-swiper-navi { display:none; }
}