/* BASIC css start */
/* BASIC css start */
/* 최상단 배너 */
#topBanner { position:relative; overflow:hidden }
#topBanner a { display:block }
#topBanner img { width:100%;}


/* 상단메뉴 */
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:inherit;}

#header {width:100%; height:auto; position: relative; left: 0; top: 0px; z-index: 12; background-color: rgba(255,255,255,1);}
#header.active { position:fixed; height: auto; background-color: rgba(255,255,255,1); }

#header .header-menu { height: 0; visibility: hidden; opacity: 0; border-bottom: 1px solid rgba(35, 35, 35, 0.1); transition: all 0.3s }
#header .header-menu.active { visibility: visible; opacity: 1; height: auto; }

#header .header-menu ul {  display: table-cell; width:40%; align-items: center; }
#header .header-menu ul li { text-align: center;  vertical-align: middle; }
#header .header-menu ul li a { font-size: 12px; }

#header #menu { position: absolute; top: 7px; left: 9px; display: block; width: 30px; height: 30px; }
#header span.fa { position:absolute; left:0; color:#3b3b3b; margin: 3px; }

#header h1 > a > img { width: 40%; max-width: 160px; vertical-align: 0px; }
#header .headerBottomLeft { position: relative; height: 44px; line-height: 44px; text-align: center;     border-bottom: 1px solid #e5e5e5; }
#header .headerBottomLeft a { font-size: 24px; }
#header .headerBottomRight { position: absolute; top: 7px; right: 9px; }
#header .headerBottomRight a { color: #7d7d7d; font-size: 24px; width: 30px; height: 30px; display: block; float: left; line-height: 30px; }
#header .headerBottomRight a .fa-bookmark-o {color:#f1494d;}
#header .headerBottomRight .btn_search { position: relative; }
#header .headerBottomRight .cart {position:relative; }
#header .headerBottomRight .cart sup { width: 16px; height: 16px; background-color: #c17d68; color: #fff; border-radius: 50%; position: absolute; top: 2px; right: 0px; text-align: center; line-height: 16px; font-size: 8px; }
#header.active .search{}
#header .search { width:100%; height:42px; position: absolute;/*relative;*/ top: 45px; /*-36px;*/ left:0; right:0; background-color: rgba(255,255,255,1); text-align:center; display:none; z-index:10;}
#header .search .searchBox { position: relative; width:100%; }
#header .search .searchBox input { width: 92%; height: 34px; border-width: 0 0 1px 0; padding: 0 5px; border-color: #111; background: transparent; outline: 0 none;}
#header .search .btn_search {width:45px; height:42px; line-height:42px; font-size: 20px; background-color: transparent; position:absolute; top:5px; right:0; color:#3b3b3b; text-align:center;}
#header .search .btn_search i { width: 45px; height: 32px; line-height: 32px; font-size: 20px; }

.header-swiper { line-height: 30px; }
.header-swiper .swiper-wrapper { height: 35px; line-height: 35px; margin: 0 auto; }
.header-swiper .swiper-slide { width: auto; }
.header-swiper .headerSwiper-prevBtn:focus,.header-swiper .headerSwiper-nextBtn:focus { outline: none !important;}
.header-swiper .swiper-slide a { font-size:12px; font-weight: 600; padding-left:35px; }
.header-swiper .swiper-slide:first-of-type a {padding-left:35px;}
.header-swiper .swiper-slide:last-of-type a {padding-right:35px;}
.header-swiper .headerSwiper-nextBtn { color:#000; font-size: 18px; right: 0px; left: auto; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); z-index:10; width: 35px; height: 100%; line-height: 33px; text-align: center; background: linear-gradient(to right,rgba(255,255,255,0),#fff 30%); }
.header-swiper .headerSwiper-prevBtn { color:#000; font-size: 18px; left: 0px;  right: auto; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);z-index:10; width: 35px; height: 100%; line-height: 33px; text-align: center; background: linear-gradient(to left,rgba(255,255,255,0),#fff 30%); }
.header-swiper .swiper-button-disabled { color:#cecece }
.header-swiper .swiper-slide.swiperIndex a{font-weight:bold;}

/* 카테고리 */
aside ul::after { content: ""; display: block; clear: both; }

aside { position:fixed; width:100%; height:100%; top:0px; left:-100%; bottom:0; background-color:#fff; overflow-y:auto; -webkit-overflow-scrolling: touch; z-index:9999; transition: all 0.3s; }
aside.active { left: 0; }
aside .asideTop {text-align:center;}
aside .asideTop a {width:33.33%; height:62px; display:inline-block; border-bottom:2px solid #c3c3c3; color:#8f8f8f; font-weight:bold;}
aside .asideTop a .fa {margin-top:10px;}
aside .asideTop a.act {color:#ab3e41; border-bottom:2px solid #ab3e41;}
aside nav li {border-bottom:1px solid #ccc; position:relative;}
aside nav li a {display: block; height: 35px; line-height:35px; padding:0 0 0 20px; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
aside nav li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px;}
aside nav li > ul {background-color:#f4f4f4; display:none; border-top:1px solid #6e6e6e;}
aside nav li > ul > li {border-bottom:0px none; border-top:1px solid #ccc;}
aside nav li > ul > li:first-child {border-top:0px none;}
aside nav li > ul > li a {padding:0 40px 0 30px; margin: 0;}
aside nav li > ul > li > ul {border-top:0px none; border-top:1px solid #ccc;}
aside nav li > ul > li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > ul > li a {padding:0 0 0 40px; margin: 0; background-color: #DDDDDD;}
aside .asideBottom {padding:20px 22px;}
aside .asideBottom .tel {color:#ab3e41; font-size:1.333em; font-weight:bold; display: block;}
aside .asideBottom .fa-stack {color:#000; margin-top: -5px;}
aside .asideBottom .copyright {margin-top:10px;}
aside .navCommunity {display:none;}
aside .navMypage {display:none;}

aside .login-wrap { padding: 18px 13px 0; }
aside .login-wrap > i { float: right; font-size: 20px; }
aside .login-wrap > p { color: #959595; }
aside .login-wrap > p > strong { color: #3b3b3b; }
aside .login-wrap ul { margin-top: 14px; }
aside .login-wrap ul li { float: left; width: 50%; height: 30px; line-height: 30px; border: 1px solid #a1a1a1; box-sizing: border-box; text-align: center; position:relative; }
aside .login-wrap ul li a { display: block; width: 100%; height: 100%; }
aside .login-wrap ul li:nth-child(1) { border-right: 0; }
aside .login-wrap ul li:nth-child(1) a { background-color: #3b3b3b; color: #fff; }
aside .login-wrap .join-bubble { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); height: 18px; line-height: 18px; background: #3b3b3b; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 10px;}
aside .login-wrap .join-bubble::before { content:""; display:block; border-top: 50px solid #3b3b3b; border-top: 9px solid #3b3b3b; border-right: 10px solid transparent; border-bottom: 10px solid transparent;
border-left: 10px solid transparent; width: 0px; height: 00px; position: absolute; left: 50%; transform: translateX(-50%); top: 14px;}

aside .util-wrap { clear: both; margin: 25px 0 38px 0; padding: 0 13px; }
aside .util-wrap ul { border: 1px solid #ddd; padding: 10px 0px; }
aside .util-wrap li { display: block; float: left; width: 25%; text-align: center; position: relative; }
aside .util-wrap li::after { content: ''; display: block; width: 1px; background: #ddd; height: 28px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
aside .util-wrap li:nth-last-child(1)::after { content: none; }
aside .util-wrap li > a > i { display: block; font-size: 16px; margin-bottom: 6px; }

aside .nav-category { padding: 0 13px; }
aside .nav-category h3 { margin-bottom: 7px; font-size: 15px; font-weight: 600; }
aside .nav-category ul li { float: left; width: calc(50% + 1px); border: 1px solid #d8d8d8; box-sizing: border-box; margin-left: -1px; margin-bottom: -1px; }
aside .nav-category ul li a { height: 40px; line-height: 40px; padding: 0 0 0 13px; margin: 0; }

aside .nav-community { padding: 0 13px; margin-top: 35px; }
aside .nav-community h3 { margin-bottom: 7px; font-size: 15px; font-weight: 600; }
aside .nav-community ul li { float: left;  width: calc(50% + 1px);  border: 1px solid #d8d8d8;  box-sizing: border-box;  margin-left: -1px;  margin-bottom: -1px; }
aside .nav-community ul li:nth-child(1) { border-right: 0; }
aside .nav-community ul li:nth-child(1) a { color: #c17d68; }
aside .nav-community ul li a { height: 40px; line-height: 40px; padding: 0 0 0 13px; margin: 0; }

aside .todayView-wrap { padding: 0 13px; margin-top: 38px; }
aside .todayView-wrap h3 { float: left; margin-bottom: 7px; font-size: 15px; font-weight: 600; }
aside .todayView-wrap > span { float: right; }
aside .todayView-wrap > span i { font-size: 15px; vertical-align: text-bottom; }

aside .logout_btn { display: block; width: 120px; height: 33px; line-height: 33px; margin: 0 auto; text-align: center; background: #ddd; }


/* //카테고리 */

/* 최근 본 상품 */
#ly_lastView {width:100%; top:36px; left:0; background-color:#fff; z-index:101; padding-bottom:30px;  }
#ly_lastView ul { width: calc(100% + 4px); margin: 0 -2px; }
#ly_lastView figure { padding: 2px; }
/* //최근 본 상품 */

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


.fixBottom {
    transition: all 0.3s;
    background: #f6f6f6;
    position: fixed;
    bottom: 0;
    left: -100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    gap: 25px;
}
.fixBottom.active {left:0;}

.fixBottom > div {
    /* flex: 1; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.fixBottom > div h1 {
    color: #939393;
    font-size: 15px;
    font-weight: 600;
    margin-right: 5px;
} 

.fixBottom > div > a > img {
    max-width: 30px;
}
/* BASIC css end */


/* BASIC css end */