/* BASIC css start */
/* »ó´Ü */


#header { position:relative; width:100%; z-index:100; height:80px }

#header .topbar{z-index:9999; position:fixed; width:100%; height:25px; background:#000; padding-top:7px;text-align:center;}
#header .topbar a{color:#fff; font-size: 13px; font-weight: 600;}

#header .headerLnb { position:fixed; background:#fff; padding:40px 0 5px; width:100%; height:35px; text-align:center;}
#header .headerLnb .sideMenuOpen { cursor:pointer; position:absolute; left:10px }
#header .headerLnb .sideMenuOpen img { height:20px }
#header .headerLnb .tlogo { text-align:center; }
#header .headerLnb .tlogo img { height:20px }
#header .headerLnb .tcart { z-index:9999; position:absolute; right:15px }
#header .headerLnb .tcart img { z-index:9999; height:27px }
#header .headerLnb #toggle-search { z-index:9999; position:absolute; right:45px; cursor:pointer; }
#header .headerLnb #toggle-search img { z-index:9999; height:21px; margin-top: 3px; }


@media screen and (max-width:375px) {
#header .headerLnb .tm01 a { padding:0 12px }
}
@media screen and (min-width:500px) {
#header .headerLnb .tm01 a { padding:0 20px }
}

.mask {	display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; opacity:0.6; filter:alpha(opacity=50); z-index:990 }
   

/* »çÀÌµå ¸Þ´º */
#asideMenu #menu__toggle {
  opacity: 0;
}
#asideMenu #menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#asideMenu #menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#asideMenu #menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#asideMenu #menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 50px;
  left: 18px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}









#asideMenu { position:fixed; top:40px; left:-100%; width:70%; height:100%; z-index:9999; background:#fff; overflow-y:auto; overflow-x:hidden; }

#asideClose { cursor:pointer; position:fixed; top:35px; background:url(/design/zooyork77/2021/mo/all_menu_x.png) 0 0 no-repeat; width:22px; height:22px; background-size:100% 100%; z-index:9999999; left:-100%; text-indent:-9999em; margin-left:10px; }

#asideMenu .search_box { position:relative; width:100%;padding-top:15px; }
#asideMenu .search_box input { width:70%; height:20px; color:#000; border:2px solid #000; font-size:14px; margin-left:15px }
#asideMenu .search_box .btn_search { } 
#asideMenu .search_box .btn_search img { margin-left:7px; height:20px; }



.navCategory { padding-top:15px; font-family:'Noto Sans KR' }
.navCategory li { position:relative; width:100%; font-size:4vw; line-height:6.3vw; color:#000; letter-spacing:0.3px; font-weight:600; }
.navCategory li > a { font-size:4vw; height:40px; line-height:40px; padding-left:15px; color:#000; letter-spacing:0.3px;  }
.navCategory li.plus { cursor:pointer; padding-left:15px }
.navCategory li.plus span { padding-right:1px; }
.navCategory li a.red { color:#f00 }

.navCategory li.logbox { margin-top:50px; padding-top:10px; border-top: 2px solid #000; }
.navCategory li.logbox a.log01 { padding-right:5px }
.navCategory li.logbox a.log02 { padding-left:5px } 

.navCategory li p { background-color:#fff; padding:10px 0 10px 30px }
.navCategory li p a { display:block; margin: 0; font-size:4vw; line-height:6.3vw; }

#asideMenu .call_box { font-family: 'Noto Sans KR'; padding-top:50px; padding-left:15px; font-size:10px; line-height:16px; }
#asideMenu .call_box a { font-family: 'Noto Sans KR'; border-bottom:1px solid #707070; font-size:10px; }

#asideMenu .event_box {overflow:hidden; padding-top:20px; padding-left:15px; width:100%; box-sizing:border-box; }
#asideMenu .event_box p {font-family:Roboto; font-weight:bold; font-size:12px; color:#000; line-height:30px;}
#asideMenu .event_box li{ width:48%; display:inline-block;}
#asideMenu .event_box img { width:100%; display:block; margin-bottom:5px }
#asideMenu .event_box a { font-size:12px;}


.menubox2 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0px;
  transition-duration: .25s;
}


.menu__box {
  display: block;
  position: fixed;
  top: 80px;
  left: -100%;
  width: 100%;
  height: 100%;
  margin: 0;
  list-style: none;
  background-color: #fff;
  transition-duration: .25s;
}







/* °Ë»ö Åä±Û */

  .ion-navicon,
  #toggle-search {
    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
            transition: all 0.6s ease;
    &:hover {
      color: rgba(#efefef, 1);
    }
  }
  .ion-navicon {
    float: left;
  }
  span {

    @media screen and (min-width: 320px) {

    }
  }
  #searchBar {

    background-color: #fff;
    border: none;
    margin-top: 40px;
    padding-top:10px;
    width: 100%;
    position: absolute;
    
  }
  #toggle-search {
    float: right;
  }
}

#searchBar { position:relative; width:100%;padding-top:15px; }
#searchBar input { width:70%; height:30px; color:#000; border:1px solid #000; font-size:14px; margin-left:15px; }
#searchBar .btn_search { } 
#searchBar .btn_search img { margin-left:7px; margin-top: 3px; height:21px; }

/* °Ë»ö Åä±Û */










@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;

  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}





/* ´Ùã´Ù °Ë»ö ÆÄÀδõ - ·¹À̾î */
#allfinder-ctr { z-index: 100; position: fixed; right:0; bottom:10%; }
#allfinder-ctr a { display:block; width:65px; height:65px; background:url('/design/zooyork77/deetong/finder2.png') no-repeat 0 0; background-size:100% 100%; border:none; outline:none; font-size:0; }

.all-finder-layer { z-index: 9999999; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow-y:auto; }
.all-finder-layer .finder-hd { z-index:1; position:fixed; top:0; left:0; width:100%; height:60px; border-bottom:1px solid #e7e7e7; background:#fff; }
.all-finder-layer .finder-hd .fa-close { position:absolute; top:17px; right:10px; font-size:26px; color:#000; }
.all-finder-layer .finder-hd .finder-tit { height:60px; line-height:60px; padding:0 10px; font-size:16px; font-weight:bold; color:#000; letter-spacing:-2px; }
.all-finder-layer .finder-search { position:relative; margin:0 10px 20px; border:2px solid #000; border-radius:3px; }
.all-finder-layer .finder-search .fa-search { display: inline-block; width: 40px; height: 42px; line-height: 42px; text-align: center; font-size: 18px; }
.all-finder-layer .finder-search .txt-input { width:85%; height:42px; line-height:42px; margin:0; padding:0; font-size:14px; outline:none; border:none; color: #000; vertical-align:top; letter-spacing:-1px; }
.all-finder-layer .finder-search .txt-input::-webkit-input-placeholder { color:#b1b1b1; }
.all-finder-layer .finder-search dd { background:#FFF; }
.all-finder-layer .finder-opt { padding:60px 0 55px; color:#000; }
.all-finder-layer .finder-opt dl dt { position:relative; height:53px; line-height:53px; padding:0 10px; border-top:1px solid #e7e7e7; font-size:14px; font-weight:bold; color:#000; letter-spacing:-1px; }
.all-finder-layer .finder-opt dl dt .fa { position:absolute; top:50%; right:10px; margin-top:-13px; font-size:25px; color:#b2b2b2; }
.all-finder-layer .finder-opt dl dd { display:none; padding:10px 5px 0; border-top:1px solid #e7e7e7; background:#f4f4f4; font-size:0; }
.all-finder-layer .finder-opt dl dd label { display:inline-block; width:33.3333%; text-align:center; line-height:18px;}
.all-finder-layer .finder-opt .finder-color label { width:12.5%; }
.all-finder-layer .finder-opt .finder-price .finder-price-input { padding:0 5px 10px; text-align:right; font-size:12px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input:after { clear: both; content: ""; display: block; }
.all-finder-layer .finder-opt .finder-price .finder-price-input span { float:left; display:inline-block; height:34px; line-height:34px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label { display: inline-block; width: 33%; padding: 0 8px; border: 1px solid #ccc; border-radius:3px; color: #666; background:#fff; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input { display: inline-block; width: 84%; height: 32px; line-height: 32px; padding: 0; border: none; background: none; color: #000; outline:none; text-align:right; }
.all-finder-layer .finder-btn-c { z-index:1; position:fixed; bottom:0; left:0; width:100%; height:55px; text-align: center; font-size:0; }
.all-finder-layer .finder-btn-c a.reset { display: inline-block; width: 30%; height: 55px; line-height: 55px; background: #999; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 1px; border:none; }
.all-finder-layer .finder-btn-c button { display: inline-block; width: 70%; height: 55px; line-height: 55px; background: #000; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; border:none; }
.all-finder-layer .finder-btn-c button span.fa-search { margin-right:5px; margin-top:-2px; vertical-align:middle; font-size:0.750em; }
.all-finder-layer .finder-btn-c button span.finder-count { display:inline-block; color:#fff; font-size:18px; vertical-align:middle; }

.all-finder-layer .finder-opt .finder-options { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:80%; height:22px; padding: 5px 5%; line-height:22px; border: 1px solid #ccc; word-break:break-all; border-radius: 20px; background:#fff; color:#000; text-align:center; font-size:12px; }
.all-finder-layer .finder-opt .finder-options.on { font-weight: bold; border: 1px solid #000; box-shadow:2px 2px 3px #d2d2d2; }
.all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 33px; height: 33px; border-radius:20px; font-size:0; vertical-align:middle; }
.all-finder-layer .finder-opt .finder-option-color.color-picker { width:33px; height:33px; padding: 0; border: none; } 
.all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check { display:none; width:33px; height:33px; margin-top:-25px; color:#fff; text-align:center; font-size:16px; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; }

.finder-option-color.finder-option-color-black em { background-color: #000; }
.finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; }
.finder-option-color.finder-option-color-gray em { background-color: #808080; }
.finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; }
.finder-option-color.finder-option-color-brown em { background-color: #aa6810; }
.finder-option-color.finder-option-color-navy em { background-color: #425583; }
.finder-option-color.finder-option-color-blue em { background-color: #0000ff; }
.finder-option-color.finder-option-color-light-blue em { background-color: #62acff; }
.finder-option-color.finder-option-color-red em { background-color: #ff0000; }
.finder-option-color.finder-option-color-orange em { background-color: #ffa500; }
.finder-option-color.finder-option-color-yellow em { background-color: #ffff00; }
.finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; }
.finder-option-color.finder-option-color-purple em { background-color: #800080; }
.finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; }
.finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; }
.finder-option-color.finder-option-color-green em { background-color: #008000; }
.finder-option-color.finder-option-color-light-green em { background-color: #72dd95; }
.finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; }
.finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; }
.finder-option-color.finder-option-color-apricot em { background-color: #fbceb1;  }

.all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:45%; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.all-finder-layer .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.all-finder-layer .search-auto-complete-list ul li { text-align:center; margin: 3px; }
.all-finder-layer .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; }
.all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.all-finder-layer .search-auto-complete-list ul li a:hover span {}
.all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }







































/* BASIC css end */