.quick-circle{position:fixed;right:40px;bottom:40px;width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;z-index:999;padding:10px;box-sizing:border-box;transition: all .5s;cursor: pointer;}
.quick-circle::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(45deg, #ff4da6, #2f6bff);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3s linear infinite}
.quick-circle.active .quick-menu{opacity:1;transform: scale(1);pointer-events:auto}
.quick-circle .quick-btn > span {font-family: Pretendard;font-weight:700;font-size:20px;line-height:145%;letter-spacing:-0.5px;text-align:center;position: relative;color: #003876;}


.quick-menu{position:absolute;bottom:130%;right: 0;transform:translateX(-50%) scale(0.8);opacity:0;pointer-events:none;transition:all 0.3s ease;display:flex;flex-direction:column;gap:8px}
.quick-menu a{background:#fff;padding:16px 12px;border-radius:6px;font-size:12px;white-space:nowrap;position:relative;min-width: 200px;width: 100%;box-sizing: border-box;}
.quick-menu a::before{content:"";position:absolute;inset:-3px;border-radius:6px;background:linear-gradient(90deg, #00c3ff, #ff4ecd, #00c3ff);background-size:200% 100%;z-index:-1;animation:none}
.quick-menu a::after{content:"";position:absolute;inset:3px;background:#fff;border-radius:6px;z-index:-1}
.quick-menu a:hover::before {animation: borderMove 2s linear infinite;}

.quick-menu a:nth-child(1) span:before {content:"";display: inline-block;background: url(/_res/yonsei_rc/creyon/img/common/ico-quick01.png)no-repeat center center;width: 24px;height: 24px;}
.quick-menu a:nth-child(2) span:before {content:"";display: inline-block;background: url(/_res/yonsei_rc/creyon/img/common/ico-quick02.png)no-repeat center center;width: 24px;height: 24px;}
.quick-menu a:nth-child(3) span:before {content:"";display: inline-block;background: url(/_res/yonsei_rc/creyon/img/common/ico-quick03.png)no-repeat center center;width: 24px;height: 24px;}
.quick-menu a:nth-child(4) span:before {content:"";display: inline-block;background: url(/_res/yonsei_rc/creyon/img/common/ico-quick04.png)no-repeat center center;width: 24px;height: 24px;}
.quick-menu a span{font-family:Paperlogy;font-weight:600;font-size:18px;line-height:145%;letter-spacing:0;text-align:center;color: #111111;position: relative;display: flex;align-items: center;gap: 8px;}

.quick-circle.active .quick-btn > span {display: none;}
.quick-circle.active{background: #2C3645}
.quick-circle.active:before {background: #D2D7DC99}
.quick-circle.active .quick-btn:before {content:"";background: url(/_res/yonsei_rc/creyon/img/common/ico-close-quick.png)no-repeat center center;width: 24px;height: 24px;top: 50%;left: 50%;transform: translate(-50%, -50%);position: absolute;}

.quick-menu a{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;padding:16px 12px;border-radius:8px;overflow:hidden;z-index:0}
.quick-menu a::before{content:"";position:absolute;inset:-50%;padding:52%;border-radius:inherit;background:#D2D7DC;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transform:scale(3);z-index:-2}
.quick-menu a::after{content:"";position:absolute;inset:2px;background:#fff;border-radius:6px;z-index:-1}
.quick-menu a:hover::after {inset:3px;}
.quick-menu a:hover::before{background:conic-gradient( from 0deg, #FF55AB, #005DC4, #FF55AB );animation:spinBorder 3s linear infinite}


@keyframes spinBorder {
	from {
		transform: scale(3) rotate(0deg);
	}
	to {
		transform: scale(3) rotate(360deg);
	}
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@media (max-width:768px) {
	.quick-circle {bottom: 20px;right: 20px;width: 60px;height: 60px}
	.quick-circle .quick-btn > span {font-size: 13px;}
	
	.quick-menu a span {font-size: 14px;}
	.quick-menu a {min-width: 120px}
	.quick-circle.active .quick-btn:before {width: 18px;height: 18px;}
}