@charset "utf-8";

#shop_quick {position:fixed;top:0;right:-220px;z-index:1001;width:220px;height:100%;border-left:1px solid #e7e7e7;background-color:#fff;font-family:notokr-regular}

/* 퀵메뉴 버튼 */
#quick_mn {position:relative;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);width:45px;margin-left:-45px}
#quick_mn li {position:relative;width:43px;height:43px;border:1px solid #e7e7e7;border-top:none;box-sizing:content-box;font-size:16px;text-align:center;background-color:rgba(255,255,255,.9)}
#quick_mn li:first-child{border-right-color:#fff}
#quick_mn li a {display:block;width:100%;height:100%;line-height:43px;color:#adadad;transition:all .1s}
#quick_mn li a:hover {color:#2d2d2d}
#quick_mn li .named {display:none;opacity:0;position:absolute;left:-93px;top:10px;width:80px;padding:3px 0;font-size:12px;color:#fff;text-align:center;background-color:#2d2d2d}
#quick_mn li .named:after {display:block;position:absolute;right:-5px;top:8px;content:'';width:5px;height:7px;background-image:url(/sh_img/hd/shop_quick/angle.png)}
#quick_mn .naver_talk {border-color:#00c73c;background-color:#00c73c}
#quick_mn .quick_kakao {border-color:#fce41d}
#quick_mn .quick_kakao_popup {position:absolute;left:-212px;top:-28px;opacity:0;transition:all 0.2s}
/* 익스 8 */
@media \0screen {
#quick_mn .quick_kakao_popup { display:none}
#quick_mn .quick_kakao:hover .quick_kakao_popup { display:block}
}

#quick_mn .up_down {height:auto;padding-top:8px;border:none;font-size:14px;color:#adadad;background-color:transparent}
#quick_mn .up_down p {padding:3px 0;cursor:pointer}

#quick_mn li:hover .named {display:block;opacity:1}

/* 퀵메뉴 ON/OFF */
#quick_mn li.first {}
#quick_mn_btn{position:relative;border-top:1px solid #e7e7e7!important;background-color:#f2f2f2;transition:all .4s}
#quick_mn_btn span, #quick_mn_btn span:before, #quick_mn_btn span:after {position:absolute;z-index:20;width:17px;height:2px;background-color:#2d2d2d}
#quick_mn_btn span {position:absolute;top:50%;left:13px;margin-top:-1px;-webkit-transition:all ease .2s;transition:all ease .2s}
#quick_mn_btn span:before, #quick_mn_btn span:after {content:'';right:0;z-index:-1;-webkit-transition:all ease .2s;transition:all ease .2s}
#quick_mn_btn span:before {top:-5px}
#quick_mn_btn span:after {top:5px}
#quick_mn_btn.active {z-index:2500;background-color:#fff;transition:all .4s}
#quick_mn_btn.active span {background-color:transparent}
#quick_mn_btn.active span:before {-webkit-transform:translateY(5px) translateX(0) rotate(45deg);-ms-transform:translateY(5px) translateX(0) rotate(45deg);transform:translateY(5px) translateX(0) rotate(45deg);background-color:#2d2d2d}
#quick_mn_btn.active span:after {-webkit-transform:translateY(-5px) translateX(0) rotate(-45deg);-ms-transform:translateY(-5px) translateX(0) rotate(-45deg);transform:translateY(-5px) translateX(0) rotate(-45deg);background-color:#2d2d2d}


/* 퀵메뉴 CONT 시작 {*/
#shop_quick_cont {position:absolute;top:0;right:0;width:220px;height:100%;padding:0 22px 0 24px}
#shop_quick_cont h2 {margin-bottom:10px;text-transform:uppercase;font-size:13px;color:#2d2d2d;text-align:center;font-family:notokr-bold}

/* 1. TODAY VIEW */
#quick_today {margin:25px auto 30px;text-align:center}
#quick_today ul {overflow:hidden;min-height:174px}
#quick_today ul li {display:none;float:left;margin:0 10px 10px 0}
#quick_today ul li:nth-child(2n) {margin-right:0}
#quick_today ul li a {display:block;border:1px solid #e7e7e7;transition:all .2s}
#quick_today ul li a:hover {border:1px solid #f4bcbe}
#quick_today button {width:50%;height:21px;border:none;line-height:20px;background-color:#2d2d2d;transition:all .2s}
#quick_today button:hover {background-color:#474747}
#quick_today button#up:before {content:"\f104";font-family:FontAwesome;color:#fff}
#quick_today button#down:before {content:"\f105";font-family:FontAwesome;color:#fff}
#quick_today .empty {padding:20px 0;color:#888}

/* 2. 인기차종 */
#popular_maker {overflow:hidden;position:relative;height:220px}
#popular_maker h2 {font-size:14px}
#popular_maker ul {overflow:hidden}
#popular_maker ul li {float:left!important;width:80px!important;height:80px;margin:0 10px 10px 0;line-height:75px;text-align:center}
#popular_maker ul li:nth-child(2n) {margin-right:0}
#popular_maker ul li {display:block;border:1px solid #e7e7e7;transition:all .2s}
#popular_maker ul li:hover {border:1px solid #f4bcbe}
#popular_maker .bx-pager{position:absolute;bottom:0;left:50%;z-index:100;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#popular_maker .bx-pager-item{float:left}
#popular_maker .bx-pager-item a{display:block;width:8px;height:8px;margin:0 3px;border-radius:8px;text-indent:-9999px;background:#c0c0c0}
#popular_maker .bx-pager-item a.active{background:#2d2d2d}

/* 3. CS */
#quick_cs {font-size:12px;color:#777;line-height:18px}
#quick_cs h4 {margin:35px 0 8px;text-transform:uppercase;color:#8b8b8b;letter-spacing:0.3px;font-family:notokr-regular}
#quick_cs h3 {font-size:19px;font-weight:bold;color:#2d2d2d;letter-spacing:-1px;font-family:'Nanum Gothic'}
#quick_cs .line {width:18px;height:2px;margin:12px 0 10px;background-color:#da2027}
#quick_cs h5 {margin-bottom:5px;color:#2d2d2d;text-transform:uppercase;font-family:notokr-medium}
#quick_cs .c_black {color:#2d2d2d;font-family:notokr-medium}
/* } 퀵메뉴 CONT 끝 */

/* 익스 8 */
@media \0screen {
#quick_mn {top:30%}
#popular_maker {height:200px}
#popular_maker .bx-pager{left:31%;bottom:-4px}
#quick_cs h3  {letter-spacing:-0.7px}
}