@charset "utf-8";

#quickBnr{position:fixed;right:20px;bottom:80px;z-index:101;width:200px;border-radius:26px;background-color:var(--dark-light);font-size:13.5px;line-height:1.6;color:#fff;font-family:'SBAggroL';opacity:0;visibility:hidden}
#quickBnr.active {opacity:1;visibility:visible;transform:translateY(0)}
#quickBnr .close{opacity:0;position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background-color:var(--dark-light);
box-shadow:-1px -1px 1px rgba(255,255,255,.35), 1px 1px 1px rgba(0,0,0,.55),inset -1px -1px 1px rgba(255,255,255,0),inset 1px 1px 1px rgba(0,0,0,0)}
#quickBnr .close:hover{font-size:13.5px;box-shadow:-3px -3px 6px rgba(255,255,255,0),4px 4px 6px rgba(0,0,0,0),inset -1px -1px 1px rgba(255,255,255,.35),inset 1px 1px 1px rgba(0,0,0,.55)}
#quickBnr .close svg{width:17px;height:17px;margin-top:3px;stroke-width:3px;color:rgba(255,255,255,1)}
#quickBnr p{display:none}
#quickBnr .tel{margin:6px 0 8px}
#quickBnr .tel a{color:#fff}
#quickBnr .call{vertical-align:middle;display:inline-block;width:17px;height:17px;margin-right:8px;animation:call 1.2s infinite linear}
@keyframes call{from{transform:rotate(0)}10%{transform:rotate(20deg)}20%{transform:rotate(0)}30%{transform:rotate(20deg)}40%{transform:rotate(0)}100%{transform:rotate0)}}
#quickBnr .link{margin-top:6px;background-color:var(--dark-light);}
#quickBnr .link a{display:inline-block;height:30px;padding:0 8px 0 12px;border-radius:20px;font-size:12px;line-height:33px;color:#fff;background-color:var(--primary);font-family:'SBAggroM'}
#quickBnr .link a.kakao{color:#222;background-color:#f7de00}
#quickBnr .link a span{display:inline-block;vertical-align:-4px;position:relative;width:16px;height:16px;margin-left:8px;border-radius:50%;color:#222;line-height:15px;background-color:#fff;transition:all .3s}
#quickBnr .link a svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;transition:all .2s}
#quickBnr .link a:hover span{margin-left:12px}
#quickBnr .link a.tour{color:var(--primary); background:#fff}
#quickBnr .link a.tour span{color:#fff;background:var(--primary)}
#quickBnr .link a.tour svg{stroke-width:2.5px}
#quickBnr .face{position:absolute;right:-5px;bottom:-15px}
#quickBnr .face .img{overflow:hidden;position:relative;z-index:1;width:65px;height:65px;padding:11px 0 0 0;border-radius:50%;text-align:center;background-color:#fff;box-shadow:4px 4px 16px rgba(0,0,0,.2);transition:all .3s}
#quickBnr .face .img img{width:43px}
#quickBnr .face.open .img{background-color:var(--primary)}
#quickBnr .face:before{opacity:0;display:block;content:"";position:absolute;left:10px;top:20px;z-index:0;width:30px;height:28px;background-color:#fff;transition:all .3s}
#quickBnr .face.open:before{opacity:1;left:0;top:7px;background-color:var(--primary)}
#quickBnr .face.open:hover .img, #quickBnr .face.open:hover:before{background-color:var(--primary-hover)}

@media(max-width:760px){
#quickBnr{right:15px;bottom:160px}
}