/* BASIC css start */
.pink { color:#E59DA0; }
.blue { color:#9DB3E6; }
.beige { color:#C9AF7C; }
.green { color:#1fad86; }
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}

#header { z-index:99; position:relative; width:100%; height:45px; left:0; top:0; background:#fff; -webkit-overflow-scrolling: touch; }
.headerFixed #header { position:fixed; box-shadow:rgba(0,0,0,0.1) 0 4px 4px; }
.headerFixed #container { padding-top:55px; }

#header .mainHeader { display:none; }

#header .basicHeader .headerTop h1,
#header .basicHeader .headerTop div.cartBtn { position:absolute; z-index:9; top:0; background:#000; height:45px; width:45px; display:flex; align-items:center; justify-content:center; }
#header .basicHeader .headerTop h1 img,
#header .basicHeader .headerTop div.cartBtn img { height:16px; }
#header .basicHeader .headerTop h1 { left:0; border-radius:0 50% 50% 0; }
#header .basicHeader .headerTop div.cartBtn { right:0; border-radius:50% 0 0 50%; }
#header .basicHeader .headerTop div.cartBtn sup { font-size:0; position:absolute; width:5px; height:5px; background:#fff; border-radius:50%; top:30%; }
#header .basicHeader .headerTop h1 a,
#header .basicHeader .headerTop div.cartBtn a { padding:5px; }

#header .headerCateArea { padding:0 70px 0 55px; background:#fff; overflow:hidden; box-sizing:border-box; width:100%; }

#mainContainer #header {  height:auto; }
#mainContainer #header .mainHeader { display:block; position:absolute; top:20px; left:20px; width:calc(100% - 40px); }
#mainContainer #header .mainHeader h1 { height:40px; position:absolute; left:0; top:0; }
#mainContainer #header .mainHeader h1 img { height:100%; filter: drop-shadow(0px 2px 3px rgb(0,0,0,0.3)); }
#mainContainer #header .mainHeader .cartBtn { position:absolute; right:0; top:0; padding:3px; }
#mainContainer #header .mainHeader .cartBtn sup { font-size:0; position:absolute; width:5px; height:5px; background:#ff0000; border-radius:50%; top:10%; right:-3px; }
#mainContainer #header .mainHeader .headerSearchBtn { position:absolute; right:35px; top:0; padding:3px; }
#mainContainer #header .mainHeader .cartBtn img,
#mainContainer #header .mainHeader .headerSearchBtn img { height:16px; filter: drop-shadow(0px 1px 2px rgb(0,0,0,0.3)); }
#mainContainer #header .basicHeader { display:none; }
#mainContainer #header .headerCateArea { display:none; }
#mainContainer #container { padding:0; }

.mainHeaderFixed1 #mainContainer #header .mainHeader { display:none; }
.mainHeaderFixed1 #mainContainer #header .basicHeader { display:block; animation:0.3s fadeIn; }
.mainHeaderFixed2 #mainContainer #header .headerCateArea { display:block; }


.bottomFixBar { position:fixed; z-index:9; bottom:18px; left:14px; width:calc(100% - 84px); background:#000;  border-radius:50px; box-sizing:border-box; padding:0 20px;  }
.bottomFixBar ul { display:flex; }
.bottomFixBar ul li { flex:1; display:flex; height:50px; text-align:center;  align-items:center; justify-content:center;   }
.bottomFixBar ul li a,
.bottomFixBar ul li span { display:flex; height:30px; padding:0 10px; align-items:center; position:relative; }
.bottomFixBar ul li a img,
.bottomFixBar ul li span img { height:16px; }
.bottomFixBar ul li a.cartBtn sup { font-size:0; position:absolute; width:5px; height:5px; background:#ff0000; border-radius:50%; top:20%; right:12%; }


@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:1; }
}

.topBanner { text-align:center; line-height:40px; background: #000;}
.topBanner a { background: #000; color: #fff; }

.searchArea {  }
.searchArea .searchBox { position:fixed; z-index:12; left:5%; width:90%; background:#fff; top:55%; transform:translate(0,-50%); box-sizing:border-box; padding:50px 20px 40px; font-size:0; transition:0.3s; visibility:hidden; opacity:0;  }
.searchArea.active { position:relative; z-index:1002; } 
.searchArea.active .searchBox { visibility:visible; opacity:1; top:50%;  }
.searchArea .searchBox form { border-bottom:1px solid #000;  }
.searchArea .searchBox form > * { display:inline-block; vertical-align:middle;  }
.searchArea .searchBox form .btn_search { width:25px; }
.searchArea .searchBox form .btn_search img { width:100%; vertical-align:middle; }
.searchArea .searchBox form fieldset {  width:calc(100% - 30px); }
.searchArea .searchBox form input[type=text] { width:100%; box-sizing:border-box; font-size:12px; border:0; font-size:15px; font-weight:bold; line-height:35px; }
.searchArea .searchBox form input[type=text]:focus { outline:none; }
.searchArea .searchBox form input::placeholder { color:#000; }
.searchArea .searchBox .searchBest { margin-top:30px; }
.searchArea .searchBox .searchBest ul li { display:inline-block; vertical-align:top; margin:0 10px 10px 0; }
.searchArea .searchBox .searchBest ul li a { color:#585858; font-size:12px; background:#E8E8E8; height:26px; line-height:26px; border-radius:26px; padding:0 15px; display:block; }
.searchArea .searchBox .searchBest ul li a:before { content:'#'; }
.searchArea .searchBox .searchClose { position:absolute; top:12px; right:12px; width:20px; height:20px; }
.searchArea .searchBox .searchClose:before { content:''; position:absolute; width:100%; left:0; top:50%; height:1px; background:#000; transform:rotate(45deg); }
.searchArea .searchBox .searchClose:after { content:''; position:absolute; width:100%; left:0; top:50%; height:1px; background:#000; transform:rotate(-45deg); }
.searchArea .searchBack { position:fixed; left:0; top:0; right:0; bottom:0; z-index:11; background:rgba(0,0,0,0.5); transition:0.3s; visibility:hidden;  opacity:0; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.searchArea.active .searchBack { visibility:visible; opacity:1; }


/* 카테고리 */
aside {position:fixed; width:100%; height:100%; top:0; left:-100%; bottom:0; background-color:#fff; overflow-y:auto; -webkit-overflow-scrolling: touch; z-index:1001; box-sizing:border-box; transition:0.5s; visibility:hidden; padding:45px 0 0;  }
.asideOpen aside { visibility:visible; left:0; }

aside .asideTop { background:#000; position:fixed; z-index:9; left:-100%; top:0; width:100%; height:45px; text-align:right; font-size:0; padding:0 15px; box-sizing:border-box; transition:0.5s; visibility:hidden; }
.asideOpen aside .asideTop { visibility:visible; left:0; } 
aside .asideTop:after { content:''; display:block; clear:both; }
aside .asideTop .asideTopRight { display:flex;  float:right;  }
aside .asideTop .asideTopRight > div  {  margin:0 0 0 7px; height:45px; display:flex; align-items:center; justify-content:center;  }
aside .asideTop .asideTopRight > div a { display:block; }
aside .asideTop .asideTopRight > div img { height:16px; padding:10px; }
aside .asideTop .asideClose { position:absolute; left:10px; top:5px; }
aside .asideTop .asideClose img { height:16px; padding:10px; }

aside .asideMenuTop { padding:0 15px; font-size:0; margin:30px 0 30px; }
aside .asideMenuTop > div { display:inline-block; vertical-align:top; margin:0 20px 0 0; }
aside .asideMenuTop > div:last-child { margin:0; }
aside .asideMenuTop > div a { font-size:16px; font-family: 'Archivo Black','Noto Sans KR', sans-serif; }

aside .asideMenuTabArea { margin:0 0 15px; padding:0 15px; font-size:0; }
aside .asideMenuTabArea > div { display:inline-block; vertical-align:top; margin:0 15px 0 0; font-size:16px; font-family: 'Archivo Black','Noto Sans KR', sans-serif; cursor:pointer; color:#dbdbdb; transition:0.2s; }
aside .asideMenuTabArea > div:last-child { margin:0; }
aside .asideMenuTabArea > div.active { color:#000; }

aside .asideMenuContainer { position:relative; padding:0 0 15px; }
aside .asideMenuContainer:after { content:''; position:absolute; left:15px; bottom:0; width:calc(100% - 30px); height:1px; background:#000; }
aside .asideMenuContainer .asideMenuTit { padding:0 15px; font-size:15px; position:relative; line-height:48px; }
aside .asideMenuContainer .asideMenuTit .arrow { position:absolute; right:25px; top:8px;  font-size:16px; width:30px; height:30px; text-align:center; transition:0.3s;   }
aside .asideMenuContainer .asideMenuTit .arrow i { line-height:30px; }
aside .asideMenuContainer .asideMenuCate { background:#f2f2f2; padding:25px 15px 0 35px; font-size:0; display:none; }
aside .asideMenuContainer .asideMenuCate > ul > li { display:inline-block; vertical-align:top; font-size:14px; margin:0 25px 25px 0; }
aside .asideMenuContainer .asideMenuToggle.open .asideMenuTit  { font-weight:bold; }
aside .asideMenuContainer .asideMenuToggle.open .asideMenuTit .arrow { transform:rotate(180deg); }

aside .asideBoard { padding:20px 0 12px; margin:0 15px; font-size:0; border-bottom:1px solid #000;  }
aside .asideBoard > div { display:inline-block; vertical-align:top; margin:0 12px 8px 0;  }
aside .asideBoard > div a { display:block; font-size:12px; font-weight:bold; line-height:35px; background:#f2f2f2; border-radius:35px; padding:0 20px; }

aside .asideSeller { padding:30px 0 50px; }
aside .asideSeller .asideSellerTit { position:relative; margin:0 15px 25px; }
aside .asideSeller .asideSellerTit h1 { font-weight:bold; font-size:20px;  font-family: 'Archivo Black','Noto Sans KR', sans-serif; line-height:1; margin:0 0 3px;  }
aside .asideSeller .asideSellerTit .link { position:absolute; top:5px; right:0px; padding:5px; font-size:16px; }
aside .asideSeller .asideSellerSlide.swiper-container { padding:0 15px; }
aside .asideSeller .swiper-slide { width:27%; margin:0 3% 0 0; text-align:center; }
aside .asideSeller ul li a .img { margin:0 0 7px; }
aside .asideSeller ul li a img { width:100%; }
aside .asideSeller ul li a .tit { color:#121212; font-size:11px; line-height:1.3; }

aside .monoMagazine.swiper-container { padding:0 15px 35px; }
aside .monoMagazine .titArea { margin:0 0 20px; position:relative; }
aside .monoMagazine .titArea h1 { font-weight:bold; font-size:20px;  font-family: 'Archivo Black','Noto Sans KR', sans-serif; line-height:1; }
aside .monoMagazine .titArea .link { position:absolute; top:-3px; right:0px; padding:5px; font-size:16px; }
aside .monoMagazine .swiper-slide { width:40vw; margin:0 2% 0 0; text-align:left; }
aside .monoMagazine ul li a .img { margin:0 0 7px; width:100%; height:40vw; overflow:hidden; position:relative;  }
aside .monoMagazine ul li a img { width:100%; position:absolute; transform:translate(0,-50%); top:50%; }
aside .monoMagazine ul li a .sub { color:#121212; font-size:11px; line-height:1.3; }

aside .asideBottom { margin:0 15px; border-top:1px solid #000; padding:25px 0 30px; }
aside .asideBottom > div { margin:0 0 20px; }
aside .asideBottom a { font-weight:bold; font-size:20px;  font-family: 'Archivo Black','Noto Sans KR', sans-serif; line-height:1; }


.asideBack { position:fixed; z-index:1000; background:rgba(0,0,0,0.8); top:0; left:0; right:0; bottom:0; visibility:hidden; transition:0.5s; opacity:0; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.asideOpen .asideBack { visibility:visible; opacity:1; }

body.asideOpen { overflow:hidden; }

/* //카테고리 */

/* 최근 본 상품 */
#ly_lastView {width:100%; position:absolute; top:36px; left:0; background-color:#fff; z-index:101; padding-bottom:20px; box-shadow: 0 1px 10px #717171; display:none;}
/* //최근 본 상품 */

@media screen and (min-width:768px) {
    #header #menu { }
    #header .headerTop {padding-right:85px;}
    #header .search {padding-right:85px;}
    #header .search .searchBox input {width:95%;}
    #header .search .btn_search {width:85px;}
}
/* BASIC css end */