/* BASIC css start */
.lang {margin:10px 10px;}
.lang img {/*filter: grayscale(1);*/ margin:0 5px; width:28px; height:auto; }

#asideMenu .inner .top_icon li {width:40px!important; margin:0px 10px; float: left;}
#asideMenu .inner .top_icon li a{line-height: 28px; background: #000; padding: 0 14px; border-radius: 40px; display: inline-block;color:#fff; border: 1px solid #000; box-sizing: border-box;transition: all 0.35s; font-size: 10px; }
#asideMenu .inner .top_icon li a:hover{background: #fff; color: #000;}
#asideMenu .inner .top_icon li.lang {width:40px!important; margin:0px 10px; }
#asideMenu .inner .top_icon li.lang a{line-height: 28px; background: #fff; padding: 0 14px; border-radius: 40px; display: inline-block;color:#000; border: 1px solid #000; box-sizing: border-box;transition: all 0.35s; font-size: 10px;}
#asideMenu .inner .top_icon li.lang a:hover{background: #000; color: #fff;}
#asideMenu .language li {width:80px!important; margin:10px 10px; font-size: 12px; color: #fff; line-height: 28px;}

/* 오른쪽퀵버튼 */
#fix_pagescroll {position:fixed;right:-50px;bottom:80px;z-index:99999;  -webkit-transition:all 1s;moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#fix_pagescroll.active {right:10px;bottom:80px;}
.updown > div {margin-top:5px;opacity:1;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.updown > div:hover {opacity:0.8;}
.updown div.r_icon { cursor:pointer; position:relative; width:38px;height:38px; line-height:38px; background-color:#fff; border:1px solid #ddd; border-radius:50%;-webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; box-sizing:border-box;}
.updown div.r_icon i {font-size:14px;color:#999;}
.updown img { width:38px;height:38px; }
.mask {	display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:990 }


/* ============= 사이드 메뉴 ============= */

#asideMenu { position:fixed; top:0; left:-100%; width:100%; height:100%;  background:rgba(0,0,0,0.8);  overflow-y:auto; overflow-x:hidden ;  z-index:9999; }
#asideMenu  .close {  width:100%; text-align:right;  border:0px solid #fff;  }
#asideMenu  #asideClose {  width:40px; height:40px; line-height:45px;  cursor:pointer;   }
#asideMenu  #asideClose i { color:#fff; font-size:20px;  padding:10px; font-weight: bold; cursor:pointer; }
#asideMenu  #asideClose:hover {  transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);}
#asideMenu .logo { text-align:center;  }
#asideMenu .logo img { height:30px;  }
#asideMenu .logo a { color:#fff; font-size:20px; font-weight: 700;}


/* 로그인 메뉴 */
.loginBox { clear:both; margin:10px 10px 20px 10px ; padding-bottom:10px; text-align:center; border-bottom:1px solid #666; margin-bottom:10px; }
.loginBox ul { margin-top:15px; }
.loginBox li { clear:both; display:inline-block; height:35px; text-align:center;  padding: 0 2%  }
.loginBox li a { display:block; font-size:11px; color:#fff; letter-spacing:0; line-height:35px;      font-weight: 700;  }


/* 카테고리메뉴 */
aside .asideTop { text-align:center; font-size: 0.875em;  overflow:hidden; padding: 0px 0px 10px; margin:0 10px;}
aside .asideTop a:first-child { border-left: 0px solid #eee;}
aside .asideTop a { width:33.33%; height:35px; line-height: 35px;  font-size:11px;  font-weight:700;  position:relative; font-weight:normal; border-left: 1px solid #666; -webkit-box-sizing:border-box; border-left: 0px; background:#000; color:#fff; display:inline-block; box-sizing: border-box;}
aside .asideTop a .fa {margin-top:10px;}
aside .asideTop a.act { background:#fff; color:#000; font-weight:700; }
aside .asideTop a.act em { position:absolute; left:44%; bottom:-6px; border-top:6px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent;}


aside .navCategory { margin:0 10px; border:0px solid #666;  /* background:rgba(0,0,0,0.7); */ }
aside nav li { border-bottom:1px solid #333; position:relative;}
aside nav li a { display: block; height:40px; line-height: 40px;  padding:0 0 0 20px; font-size:11px; color:#fff; font-weight:700;  margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:normal; }
aside nav li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px; color:#fff; }
aside nav li > ul { display:none; border-top:1px solid #333;}
aside nav li > ul > li {border-bottom:0px none; border-top:1px solid #333;}
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 #333;}
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; }

aside .navCommunity {display:none; margin:0 10px; border:0px solid #eee; }
aside .navMypage { display:none; margin:0 10px; border:0px solid #eee;}


aside .navCustomer { margin:20px 10px 10px; border:0px solid #eee; }
aside .navCustomer nav li { border-bottom:1px solid #eee; position:relative;}
aside .navCustomer nav p { display: block; height:30px; line-height: 30px;  padding:0 0 0 20px; font-size:11px; color:#fff; font-weight:500;  margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:normal; }
aside .navCustomer nav p span { font-weight:500; color:#999; }
aside .navCustomer nav .phone a { font-weight:500; font-size:16px;  color:#fff; padding:0 0 5px 0px; }
aside .navCustomer nav p.tel  { display: block;  height:35px; line-height:35px;   background:#fff; width:90%; text-align:center; margin:10px auto ;  padding:0 !important; }
aside .navCustomer nav p.tel a { color:#000;  font-weight:300; font-size:14px;  letter-spacing:0.1em;}


.h_layerTitle { height:30px; line-height:30px; padding:0 20px; margin-bottom:0px;  border-bottom:0px solid #333;   }
.h_layerTitle h3 { font-weight:500; color:#fff; }
.h_layerTitle .fa-times {float:right; margin-top: 5px;}


#header { position:fixed; left:0; top:0; border-bottom:0px solid #ddd; z-index:5;  width:100%; text-align:center;  } 
#header .header-top { position:relative; width:100%; height:50px; text-align:center;  }
#header .header-top .logo img { width:auto; height:30px !important; margin-top:10px !important;  } /* 로고이미지로사용시 */
#header .header-top:hover  { background:rgba(255,255,255,0.95);  }


/* ============= 스크롤후 위치영역 =============== */
#header.active .header-top  { background:rgba(255,255,255,0.95);  }


/* ============= 스크롤후 위치영역 =============== */
#header.small .header-top { background:rgba(255,255,255,0.95);    }
#header.small:hover { background:rgba(255,255,255,0.95);     }


.sub_list_title {  border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; }


#header .header-top h1 a {  display:inline-block; font-family: Montserrat,"Roboto"; font-weight:700; font-size: 20px; height:50px; line-height:50px; color:#222; letter-spacing:1px }
#header .header-top .logo img { width:auto; height: 20px; margin-top:15px;  } /* 로고이미지로사용시 */

#header .header-top p.category { position:absolute; top:10px; left:10px; }
#header .header-top p.category .line:after { display:block; height:1px;   }
#header .header-top p.category a { display:block; position:relative; width:20px; height:30px;   } 
#header .header-top p.category span { display:block; position:absolute; top:50%; width:100%;  height:1px; background: rgba(0,0,0,1); transform:translate(0,-50%); color:transparent; }
#header .header-top p.category span:before,
#header .header-top p.category span:after { content: ""; position:absolute; left:0; top:0; width:100%; height:1px;  background: rgba(0,0,0,1);  }
#header .header-top p.category span:before { top:-6px; }
#header .header-top p.category span:after { top:6px; }
#header .header-top p.category i { display:block; font-size: 24px;  color:#000; cursor:pointer   }

#header .header-top p.cart { position:absolute; top:20px; right:45px; }
#header .header-top p.cart span {  width:22px; height:18px; display:block; position:relative; color:transparent;  } 
#header .header-top p.cart .css-cart {width:18px; height:16px; background:#fff; border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px; border:1px solid #333; position:relative;}
#header .header-top p.cart .css-cart:before {content:''; height:8px; width:10px; border:1px solid #333; border-bottom:none; border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;-moz-border-radius:50px 50px 0 0; position:absolute; top:-7px; left:3px; }
#header .header-top p.cart a .count { position:absolute; left:50%; top:0px ;transform:translateX(-50%);  color:#000;  font-size:0.5rem; font-weight:300; z-index:99; }


/* 검색 */
#header .header-top p.searchToggle { position:absolute; top:14px; right:10px;  }
#header .header-top p.searchToggle span {  width:22px; height:22px; display:block; position:relative; color:transparent; transition:all 0.6s;  } 
#header .header-top p.searchToggle .css-ser:before { content:''; height:16px; display:block; position:absolute; top:0; left:0; width:16px; border:1px #333 solid; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}
#header .header-top p.searchToggle .css-ser:after{ content:''; height:10px; display:block; position:absolute; top:0; left:0; width:1px; background:#333; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:14px; left:17px;}

#header .header-top p.searchToggle.active .css-ser { border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px; background:#333;  transition:all 0.6s;}
#header .header-top p.searchToggle.active .css-ser:before, #header .header-top p.searchToggle.active .css-ser:after{ border:0px #333 solid; height:1px; width:22px; display:block; background:#fff; position:absolute; top:10px; left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
#header .header-top p.searchToggle.active .css-ser:after{ content:''; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}


/* 이미지로사용시
#header .header-top p.searchToggle a { display:block; width:30px; height:30px; background:url('/design/d4-0278/wizmobile/t_ser_b.png') no-repeat center / 22px 22px;}
#header .header-top p.searchToggle a.active {background-image:url('/design/d4-0278/wizmobile/t_cart_b.png'); background-size:13px;} */

#header .header-top .searchLy { display:none; position:absolute; top:50px; left:0; padding:18px 5% 18px;  background:#f5f5f5; z-index:100; width:90% }
#header .header-top .searchLy .search { position:relative; text-align:center; }
#header .header-top .searchLy .search input { width:100%; height:30px; border:none; border-radius:5px; outline:none }
#header .header-top .searchLy .search .btn_search { position:absolute; right:0px; top:0px; border:0; border-radius:5px; background:#fff; padding:6px 8px 5px; }
#header .header-top .searchLy .search .btn_search i{width:18px; height:18px; line-height:18px; font-size:15px;  border-radius:20px;text-align:center; background:#eee;}
#header .header-top .searchLy .search .delete_btn { position:absolute; top:0px; right:40px; width:30px; height:24px; font-size:18px; color:#adadad; line-height:24px; z-index:10 } /* 검색어삭제 */
#header .header-top .searchLy .clearTag { height:200px ; }


/* 인기검색어 */
.hit-keyword { background: #fff; margin-top: 20px;}
.hit-keyword ul { overflow-y:auto; text-align:left; max-height:100px; padding:8px; }
.hit-keyword li { display:inline-block; vertical-align:top; }
.hit-keyword li a { display:block; color:#666; background:#f8f8f8; border-radius:25px;  font-size:10px; margin:3px;   padding:5px 10px; }


#top_menu.fixed { opacity: 1; /* visibility: visible;*/ background:rgba(255,255,255,0.95);left:0; top:50px;  }
#top_menu { opacity: 0; /* visibility: hidden;*/ position:fixed; left:0; top:-40px; width:100%; -webkit-transition:all 0.3s ease,-webkit-transform 0.3s ease-out;-moz-transition:all 0.3s ease,-moz-transform 1s ease-out;-ms-transition:all 0.3s ease,-ms-transform 0.3s ease-out;  }

.top_menu { position:relative;  }
.top_menu .swiper-container { overflow:hidden; height:40px; padding-right:30px;    }
.top_menu .swiper-slide { text-align: center; font-size: 18px;  width:auto; padding:0 5px;
 /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	
.top_menu .swiper-wrapper .swiper-slide a { display:block; overflow:hidden; text-overflow:ellipsis; width:100%; height:40px; line-height:40px; padding:0 5px; color:#222; font-size:12px; font-family:Montserrat,'Roboto' !important;font-weight:700;  white-space:nowrap; ; }


/* 전체메뉴버튼 */
.all_menu { position:absolute; right:0; top:0px; z-index:10; overflow:hidden;  width:30px; height:100%;  background:rgba(255,255,255,1); border-left:0px solid #ddd; transition:all 0.35s;}
.all_menu span:before{content:''; height:10px; width:10px; display:block; border:1px solid #222; border-right-width:0; border-top-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; bottom:20px; left:10px; transition:all 0.35s ease;}
.all_menu.active span:before{ content:''; height:10px; width:10px; display:block; border:1px solid #222; border-left-width:0; border-bottom-width:0;  transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; bottom:15px; left:10px;}

.top_menu .allmenuLy { display:none; position:absolute; top:40px; left:0; padding:15px 4% 5px;  background:#f5f5f5; z-index:100; width:92%;}
.top_menu .allmenuLy h2 { text-align:left; padding-bottom:5px;  color:#222; font-size:10px;  font-weight:900;  }

.allmenuLy .inner_menu { width:100%;  background:rgba(255,255,255,0.95);  overflow:hidden; margin-bottom:10px;}
.allmenuLy .inner_menu:after { content: ""; display: block; clear: both; }

/* 가로5개 */
.allmenuLy .inner_menu ul.grid5 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;}
.allmenuLy .inner_menu ul.grid5 > li {float:left; width:calc(20% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; }
.allmenuLy .inner_menu ul.grid5 > li:nth-child(5n+5) {border-right:0;}

/* 가로4개 */
.allmenuLy .inner_menu ul.grid4 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;}
.allmenuLy .inner_menu ul.grid4 > li {float:left; width:calc(25% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; }
.allmenuLy .inner_menu ul.grid4 > li:nth-child(4n+4) {border-right:0;}

/* 가로3개 */
.allmenuLy .inner_menu ul.grid3 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;}
.allmenuLy .inner_menu ul.grid3 > li {float:left; width:calc(33.33% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; }
.allmenuLy .inner_menu ul.grid3 > li:nth-child(3n+3) {border-right:0;}

/* 가로2개 */
.allmenuLy .inner_menu ul.grid2 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;}
.allmenuLy .inner_menu ul.grid2 > li {float:left; width:calc(50% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; }
.allmenuLy .inner_menu ul.grid2 > li:nth-child(2n+2) {border-right:0;}

.allmenuLy .inner_menu ul > li a {display:block; overflow:hidden; height:40px; padding:0 5px; line-height:40px; color:#222; font-size:11px; font-weight:500;    }
/*
.allmenuLy .inner_menu ul.smenu  > li:nth-child(2) a { color:#ad4d4d; }
.allmenuLy .inner_menu ul.smenu  > li:nth-child(1) a { color:#ad864d; }
*/


@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;}
}


/* BASIC css end */