@charset "utf-8";

#quickList{position:fixed;right:20px;top:50%;z-index:1000;transform:translateY(-50%)}
#quickList ul{border-radius:10px 10px 0 0;font-size:14px;color:#aaa;cursor:pointer;box-shadow:0 2px 17px 0 rgba(0, 0, 0, 0.1);background:#fff;font-family:'notokr-medium'}
#quickList ul li{border-bottom:1px solid #ddd}
#quickList ul li:last-child{border-bottom:0}
#quickList ul li a{position:relative;display: flex;width:70px;height:70px;border-radius:5px;color:#fff;line-height:70px;text-align:center;background:#fff;align-items: center;justify-content: center;}
#quickList ul li a svg{width: 21px;color:#111}
#quickList ul li a span{opacity:0;position:absolute;right:calc(100% + 19px);top:50%;transform:scale(0);transform-origin:center left;height:40px;padding:0px 12px;margin-top:-20px;border-radius:5px;font-size:14px;line-height:40px;white-space:nowrap;background:var(--primary);transition:.15s ease}
#quickList ul li a span:before{display:block;content:"";position:absolute;right:-5px;top:50%;transform:translatey(-50%) rotate(45deg);width:12px;height:12px;border-radius:3px;background-color:var(--primary)}
#quickList ul li a:hover{background:#eee}
#quickList ul li a:hover span{transform:scale(1);opacity:1}
#quickList button{width:100%;padding:20px 0;border:none;border-radius:0 0 10px 10px;font-size:12px;line-height:1.2;color:#fff;background:var(--primary);transition:all .2s;font-family:'notokr-bold'}
#quickList button i{font-size:14px}
#quickList button:hover{opacity:1}

/* 모바일 호버 X */
@media (hover: hover) {
#quickList ul li a:hover{background:#eee}
#quickList ul li a:hover span{transform:scale(1);opacity:1}
#quickList button:hover{opacity:1}
}
/* 반응형 [s] */
@media (max-width:1230px){}
@media (max-width:1024px){
#quickList{top:auto;bottom:30px;transform:none}
#quickList ul li a span{display:none}
}
@media (max-width:768px){
#quickList{display:flex;align-items:center;right:auto;left:50%;bottom:5px;transform:translateX(-50%);width:calc(100% - 20px)}
#quickList ul{display:flex;width:100%;border-radius:10px 0 0 10px}
#quickList ul li{width: calc(100%/2);border-bottom:0;border-right:1px solid #f5f5f5}
#quickList ul li:last-child{border-right:0}
#quickList ul li+li{margin-top:0}
#quickList ul li a{width:100%;height:60px;line-height:60px}
#quickList ul li a img{width:30px !important}
#quickList button{width:60px;height:60px;margin:0;padding:0;border-radius:0 10px 10px 0}
}
@media (max-width:480px){}
@media (max-width:380px){}
/* 반응형 [e] */