/* BASIC css start */
.wrap {position:relative;}

/* 오른쪽퀵버튼 */
#fix_pagescroll {position:fixed;/*right:-50px;*/right:10px;bottom:56px;z-index:1000;  -webkit-transition:all 1s;moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#fix_pagescroll.active {right:10px;bottom:56px;}
.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:#fff;  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:left; }
#asideMenu .logo a { display:inline-block; margin-left:52px; }
#asideMenu .logo img { width:auto; height:16px; margin:24px 0;  } /* 로고이미지로사용시 */


#asideMenu .aside_top p.category { position:absolute; top:8px; right:7px; padding:12px 8px; width:24px; line-height:24px; cursor:pointer;}
#asideMenu .aside_top p.category .line:after { display:block; height:1px;}
#asideMenu .aside_top p.category a { display:block; position:relative; width:20px; height:30px;} 
#asideMenu .aside_top p.category img { width:22px;margin-top: 1px;margin-left: 1px;} 


/* 로그인 메뉴 */
.loginBox { clear:both; margin:32px 24px 0; border-bottom:1px solid #ddd; font-weight:bold;}
.loginBox ul { overflow:hidden;}
.loginBox li { float:left; margin-right:16px;}
.loginBox li a{ line-height:48px; text-align:center; display:block; color:#000; font-size:14px;}

/* 카테고리메뉴 new */
.side_menu_cat {padding:0 24px 80px;}
.side_menu_cat li a {display:block; line-height:30px; font-size:16px; /* font-weight:bold; */ color:#000; padding-left:12px; cursor:pointer;}
.side_menu_cat li.side_menu_header{ line-height:28px; font-size:12px; color:#000; margin-top:20px;}
.side_menu_cat li.side_menu_magazine a{padding:0; font-size:18px; margin-top:28px;}


/* 카테고리메뉴 */
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;   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 .navCustomer nav p span { font-weight:700; color:#999; }
aside .navCustomer nav .phone a { font-weight:700; font-size:16px;  color:#fff; padding:0 0 5px 0px; }
aside .navCustomer nav .bankact { font-weight:700; 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;}
aside .navCustomer.last { margin:20px 10px 50px;}

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

.header_banner { position:fixed; left:0; top:0; z-index:99;  width:100%; height:48px; text-align:center; background-color:#000;}
.header_banner a {display: flex; text-align:center; font-size:13px; justify-content: center; align-items: center; width: 100%; height: 48px; color:#fff;}

#header { position:fixed; left:0; top:48px; z-index:99;  width:100%; text-align:center;  background:rgba(0,0,0,0);}
.header{
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );

}

.header--hidden	{
    -webkit-transform: translateY( -100% );
    -ms-transform: translateY( -100% );
    transform: translateY( -100% );
}
#header .header-top { position:relative; width:100%; height:64px; text-align:center; transition:all 0.3s;}
#header .header-top.on {background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.0));}
#header .header-top > .b_border { position:absolute; bottom:0; width:100%; height:1px; text-align:left;}
#header .header-top > .b_border p { height:1px; border-radius:10px; background-color:rgba(255,255,255,1); margin:0 15px; transition:all 0.6s;}

#header.scrollUp {
  transform: translateY(-56px);
}

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


#header .header-top h1 a { display:inline-block;}
#header .header-top .logo img { width:auto; height:18px; margin:24px 0 21px;  } /* 로고이미지로사용시 */


#header .header-top i { display:block; font-size: 24px;  color:#fff; cursor:pointer }

#header .header-top p.category { position:absolute; top:8px; left:7px; padding:12px 8px; width:24px; line-height:24px; cursor:pointer;}
#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 img { width:22px;margin-top: 8px;} 

#header .header-top div.cart { position:absolute; top:8px; right:7px; width:40px; line-height:24px;}
#header .header-top div.cart a{ display:block; padding:12px 8px;width:24px;}
#header .header-top div.cart a p{ display:block; width:22px; height:14px; margin-top:9px; border-left:1px solid #fff; border-right:1px solid #fff; border-bottom:1px solid #fff;}
#header .header-top div.cart span {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 14px;
    min-width: 12px;
    line-height: 16px;
    padding: 0px 2px;
    border-radius: 2px;
    background-color: #fff;
    color: #000;
    font-size: 10px;
    text-align: center;
    z-index: 99;
}


/* 검색 */
#header .header-top p.searchToggle { position:absolute; top:8px; right:47px; line-height:24px; cursor:pointer;}
#header .header-top p.searchToggle a { display:block; padding:12px 8px; width:24px;}
#header .header-top p.searchToggle a img { width:22px;}
#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 .header-top-bg {position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.0)); opacity:0; transition:all 0.3s ease-in;}
#header .header-top .header-top-bg.on {opacity:1;}

.searchLy { display:none; position:fixed; top:0; left:0; background:#fff; z-index:9999; width:100%; height:100%;}
.searchLy .search { position:relative; padding:15px;}
.searchLy .search input { width:100%; border:none; height:50px; border-bottom:2px solid #000; padding:0; font-size:20px; outline:none }
.searchLy .search .btn_search { position:absolute; right:8px; top:84px; border:0; width:22px; padding:8px; }
.searchLy .search .btn_search img{width:100%;}
.searchLy .search .btn_search i{width:18px; height:18px; line-height:18px; font-size:15px;  border-radius:20px;text-align:center; background:#eee;}
.searchLy .search .delete_btn { position:absolute; top:94px; right:56px; width:20px; height:20px; border-radius:20px; text-align:center; background:#ddd; font-size:14px; color:#fff; line-height:20px; z-index:10 } /* 검색어삭제 */
.searchLy .clearTag { height:200px ; }

.searchLy .search .sch_title {font-size:12px; color:#000; font-weight:bold; line-height:40px; margin-bottom:24px;}
.searchLy .search .btn_sch_close {position:absolute; top:15px; right:8px; width:22px; padding:8px;}
.searchLy .search .btn_sch_close img{width:100%;}

/* 인기검색어 */
.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,1);left:0; top:56px;  box-shadow:0 6px 6px rgba(0,0,0,0.1);}
#top_menu { opacity: 1; /* visibility: visible;*/ background:rgba(255,255,255,1);left:0; top:56px;  box-shadow:0 6px 6px rgba(0,0,0,0.1);  }

/*
#top_menu { opacity: 0; /* visibility: hidden;*/ position:fixed; left:0; top:-48px; 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:48px; padding:0 40px 0 12px;    }
.top_menu .swiper-slide { text-align: center; font-size: 18px;  width:auto; padding:0;
 /* 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; margin-right:12px; color:#222; font-size:14px; font-family:Montserrat,'Roboto' !important;font-weight:700;  white-space:nowrap; ; }
.top_menu .swiper-wrapper .swiper-slide a span.accent_red {color: #ff0000; /*border: 2px solid #ff0000;*/ display: inline-block; line-height: 100%; padding: 4px 4px 3px;}
.top_menu .swiper-wrapper .swiper-slide a span.accent_blue {color: #0056b7; /*border: 2px solid #0056b7;*/ display: inline-block; line-height: 100%; padding: 4px 4px 3px;}

/* 전체메뉴버튼 */
.all_menu { position:absolute; right:0; top:56px; z-index:10; overflow:hidden;  width:50px; height:48px;  background: rgb(255,255,255);
background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9430147058823529) 32%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9430147058823529) 32%, rgba(255,255,255,1) 100%);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9430147058823529) 32%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=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:22px; right:15px;}
.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:16px; right:15px;}

.top_menu .allmenuLy {display:none; width: 100%; position:absolute; top:104px; left:0; background:#f5f5f5; z-index:100; }
.top_menu .allmenuLy .inner_menu {padding:5px;}
.top_menu .allmenuLy h2 { text-align:left; padding: 8px 8px 3px;  color:#222; font-size:10px;  font-weight:900;  }
.allmenuLy .inner_menu ul li {background-color:#fff;}

/* 가로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;}

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

.t_banner, .t_banner_box {height:0;}
.t_banner a, .t_banner_box a{display:block;}
.t_banner a img, .t_banner_box a img{width:100%}

.side_menu_banner_slider a{padding-left:0 !important;}

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; line-height:14px; background:#fff; }
.search-auto-complete-list ul { width:100%; padding:10px 0 6px; border-bottom:1px solid #ddd; list-style:none; overflow:hidden;}
.search-auto-complete-list ul li { float:left;  margin:0 4px 4px 0;  }
.search-auto-complete-list ul li.on { background:#eee; }
.search-auto-complete-list ul li a { display:block; padding:8px 12px; color:#000; background:none; font-size:14px; letter-spacing:-1px;background-color:#f5f5f5;border-radius:30px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#eee; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }

/* 인기검색어 */
.side_best_keywords {display:none;}
.side_best_keywords p {padding:16px 15px 8px; font-size:12px; font-weight:bold;}
.side_best_keywords ol {counter-reset: count 0;}
.side_best_keywords li {counter-increment: count 1; float:left; width:27% !important; position:relative; text-align:center; font-size:12px; padding-bottom:8px;}
.side_best_keywords li a{display:block; margin:0 2px;}
.side_best_keywords li img{width:100%; margin-bottom: 4px;}
.side_best_keywords li::before {content: counter(count, decimal); position:absolute; left:4px; top:2px; background-color:#000; color:#fff; width:16px; line-height:16px; font-size:12px;}

/* 추가 검색 키워드 */
.side_add_keyword {
    margin-right: 8px;
    width: auto !important;    
}
.side_add_keyword a{
    display:inline-block;
    border: 1px solid #ccc;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 15px;
}
/* BASIC css end */