@charset "UTF-8";



/********************************************************

■ Quick Menu : 퀵메뉴 부분

********************************************************/
.left-quick { position:fixed; bottom:10px; left:10px; z-index:99999; width:200px; transition-duration: 300ms; }

.left-quick .quick { margin-top:5px; }
.left-quick .quick a { display:flex; align-items:center; justify-content:center; padding:10px; }
.left-quick .quick a .icon { width:40px; height:40px; background:none no-repeat center/contain; margin-right:5px; }
.left-quick .quick a .desc { font-weight:600; }

.left-quick .quick.blog { background:#fff; }
.left-quick .quick.blog a { border:4px solid #22b963; }
.left-quick .quick.blog a .icon { background-image:url('../img/left-quick-blog.png'); }
.left-quick .quick.blog a .desc span { color:#22b963; }

.left-quick .quick.kakao { background:#fde700; }
.left-quick .quick.kakao a .icon { background-image:url('../img/left-quick-kakao.png'); }


.left-quick .quick.call { color:#fff; background:rgba(0, 0, 0, 0.7); text-align:center; padding:20px 10px; }

.left-quick .quick.call .icon { position:relative; margin:0 auto; border-radius:100%; width:40px; height:40px; background:url('../img/left-quick-call.png') no-repeat center/25px; }

.left-quick .quick.call .head { border-bottom:1px solid #fff; padding:5px 0 10px; margin-bottom:10px; }

.left-quick .quick.call .desc { letter-spacing:-1.5px; animation:twinkle 1.8s infinite; }


@media (max-width: 767px) { 
	body.scrolled .left-quick { left:5px; }
	body.scroll-bt-up .left-quick { left:-50px; }

	.left-quick { bottom:80px; width:50px; left:-50px; }	

	.left-quick .quick { border-radius:5px; width:50px; height:50px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
	.left-quick .quick a { padding:5px; width:100%; height:100%; }
	.left-quick .quick a .icon { width:30px; height:30px; margin:0; }
	.left-quick .quick .head, .left-quick .quick .desc, .left-quick .quick .time { display:none; }

	.left-quick .quick.call { border:none; padding:0; background:none; overflow:hidden; }
	.left-quick .quick.call .icon { border-radius:0; width:100%; height:100%; background-size:25px; background-color:rgba(0,0,0,.6) !important; }
}



.right-quick { position:fixed; top:250px; right:30px; z-index:99999; width:80px; border-radius:5px; background:#f6f6f6; box-shadow:0 2px 5px rgba(0,0,0,.2); padding:5px 10px; }

.right-quick a { display:block; text-align:center; font-size:.75rem; font-weight:800; margin:15px 0; }

.right-quick a .icon { margin:0 auto; width:30px; height:30px; background:none no-repeat center/cover; margin-bottom:2.5px; }



.right-quick a .icon.quick-menu1 { background-image:url('../img/right-quick01.png'); }

.right-quick a .icon.quick-menu2 { background-image:url('../img/right-quick02.png'); }

.right-quick a .icon.quick-menu3 { background-image:url('../img/right-quick03.png'); }

.right-quick a .icon.quick-menu4 { background-image:url('../img/right-quick04.png'); }



.right-quick a:hover .icon.quick-menu1 { background-image:url('../img/right-quick01_on.png'); }

.right-quick a:hover .icon.quick-menu2 { background-image:url('../img/right-quick02_on.png'); }

.right-quick a:hover .icon.quick-menu3 { background-image:url('../img/right-quick03_on.png'); }

.right-quick a:hover .icon.quick-menu4 { background-image:url('../img/right-quick04_on.png'); }



.right-quick a .icon.quick-top { margin-top:25px; border-radius:100%; width:30px; height:30px; background:#555 url('../img/right-quick-top.png') no-repeat center/25px; }





@media (max-width: 1567px) {

	.right-quick { display:none; }

}





@media (max-width: 767px) {

	.left-quick { width:auto; display:none; }

	.left-quick > div { display:inline-block; vertical-align:bottom; }

	.left-quick .quick { border:0; border-radius:5px; width:50px; height:50px; }

	.left-quick .quick .head, .left-quick .quick .desc, .left-quick .quick .time { display:none; }



	.left-quick .quick.call { padding:0; background:none; overflow:hidden; }

	.left-quick .quick.call .icon { border-radius:0; width:100%; height:100%; background-size:30px; }

	.left-quick .quick.call .icon a { position:absolute; left:0; top:0; right:0; bottom:0; }



	.left-quick .quick.kakao a { height:100%; padding:0; }

	.left-quick .quick.kakao .icon { width:35px; height:35px; background-size:contain; margin:0 auto; }

}