@charset "utf-8";

#quickList{position:fixed;right:15px;top:50%;z-index:1001;transform:translateY(-50%);padding:9px 8px;border-radius:10px;transition:all .3s;background:#333;font-family:'notokr-medium';z-index:9999}
#quickList li+li{margin-top:10px}
#quickList li a{position:relative;display:block;height: 50px;width: 50px;border-radius:5px;color:#fff;line-height: 50px;text-align:center}
#quickList li a img{width:20px}
#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:#444;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:#444}
#quickList li a:hover{background:#444}
#quickList li a:hover span{transform:scale(1);opacity:1}
#quickList li.kakao a{background:#ecd403;font-family:'notokr-bold'}
#quickList li.kakao span,#quickList li.kakao a span:before{color:#3a1c1c;background:#ecd403}
#quickList li i{font-size:20px}
#quickList li.blog a{background:#03c75a}
#quickList li.blog span,#quickList li.blog a span:before{color:#fff;background:#03c75a}
#quickList li.blog i{position:relative;top:3px}

/* 반응형 [s] */
@media (max-width:1024px){
#quickList{top:auto;bottom:30px;transform:none}
#quickList ul li a span{display:none}
}
@media (max-width:768px){
#quickList li a{height:40px;width:40px;line-height:40px}
}
/* 반응형 [e] */