@charset "utf-8";

#quickList{position:fixed;z-index:15;top:50%;right:0;transform:translateY(-50%)}
#quickList a{position:relative;display:flex;align-items:center;justify-content:center;width:90px;height:90px;background:#000}
#quickList a svg{color:#fff}
#quickList a .hover{position:absolute;top:0;right:0;display:flex;align-items:center;gap:15px;padding-left:20px;width:0;height:100%;opacity:0;font-size:17px;font-weight:700;color:#fff;background:var(--primary);transition:all .3s}
#quickList a:hover .hover{width:180px;opacity:1}

/* 반응형 [s] */
/* Tablet */
@media (max-width:1024px){
#quickList{top:initial;bottom:0;width:100%;transform:none}
#quickList ul{display:grid;grid-template-columns:repeat(4,1fr)}
#quickList a{flex-direction:column;width:100%;height:auto;padding:15px 0}
#quickList a .hover{position:static;display:block;width:100%;margin-top:5px;padding:0;font-size:12px;font-weight:500;color:#fff;text-align:center;opacity:1;background:none}
#quickList a svg{width:18px}
#quickList a .hover svg{display:none}
#quickList a:hover .hover{width:100%}
}
/* 반응형 [e] */