@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 { border:1px solid #ddd; color:#fff; background:rgba(0, 0, 0, 0.7); text-align:center; padding:20px 10px; }
.left-quick .quick.call .icon { 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:-2px; animation:twinkle 1.5s 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:50%; transform:translateY(-50%); right:0; width:80px; z-index:9; transition-duration: 300ms; }
.right-quick .right-menu li { position:relative; transition-duration: 300ms; }
.right-quick .right-menu li:hover { box-shadow:0 0 10px rgba(0,0,0,.5); z-index:10; }

.right-quick .right-menu li a { display:flex; flex-direction: column; justify-content:center; padding:10px; background:#0033a1; color:#fff; font-size:.75rem; }
.right-quick .right-menu li:first-child a { background:#fae300; color:#333; }
.right-quick .right-menu li a .image { width:35px; margin:5px auto; }
.right-quick .right-menu li a .image .img { padding-bottom:100%; background:none no-repeat center/contain; }
.right-quick .right-menu li a .head { text-align:center; line-height:1.2; }


@media (max-width: 767px) { 
	body.scroll-bt-up .right-quick { bottom:-70px; }

	.right-quick { left:0; top:auto; transform:translateY(0); bottom:0; width:100%; }
	.right-quick .right-menu { display:flex; }
	.right-quick .right-menu li { flex:1; }

	.right-quick .right-menu li a { font-size:.875rem; }
	.right-quick .right-menu li a .image { width:25px; }
}


/********************************************************
■ Go Top & Bottom : 상단/하단 이동버튼
********************************************************/
.at-go .go-btn { display: none; position: fixed; width: 40px; bottom: 15px; right: 15px; z-index:9; transition-duration: 300ms; }
.at-go .go-btn span { display: block; color: #fff; background: rgba(0, 0, 0, 0.5); margin: 5px 0px; text-align: center; border-radius: 50%; width: 42px; height: 42px; line-height: 42px !important; font-size: 19px; }
.at-go .go-btn .go-bottom { display: none; }

@media (max-width: 768px) { 
	.at-go .go-btn { bottom: 75px; right: 5px; } 
	body.scroll-bt-up .at-go .go-btn { bottom:10px; }
}