@charset "UTF-8";

/********************************************************
■ Quick Menu : 퀵메뉴 부분
********************************************************/
/* 상단/하단 이동버튼 */
.at-go { position: fixed; right: 25px; bottom: 25px; z-index:999; transition-duration:300ms; }
.at-go .go-btn { display: none; width: 40px; z-index:900; }
.at-go .go-btn span { position:relative; border:1px solid #ddd; border-radius:50%; background:#fff; display:block; height:40px; margin-top:5px; }
.at-go .go-btn span:before, .at-go .go-btn span:after { content:""; position:absolute; width:2px; height:10px; border-radius:5px; background:#aaa; }
.at-go .go-btn .go-top:before { right:55%; top:36%; transform:rotate(45deg); }
.at-go .go-btn .go-top:after { left:55%; top:36%; transform:rotate(-45deg); }
.at-go .go-btn .go-bottom { display: none; }

.scroll-bt-up .at-go { opacity:0; visibility:hidden; }

@media (max-width: 768px) {
	.at-go .go-btn { bottom: 0px; right: 5px; }
}



.quick-menu { position:fixed; right:0; top:0; bottom:0; background:var(--main-bc1); z-index:999; padding:100px 20px 20px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; transition-duration:500ms; }
.quick-menu:before,
.quick-menu:after { content:""; }
.quick-menu:after { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:-1; }

.quick-menu ul { width:100%; color:#fff; text-align:center; font-weight:300; font-size:.625rem; }
.quick-menu a { display:block; color:inherit; }
.quick-menu .txt { display:inline-block; margin-top:3px; }

.quick-menu .quick a { margin:10px 0; }
.quick-menu .catalogue .tit { margin-bottom: 10px; }
.quick-menu .catalogue a { border:0px solid #fff; border-radius:99px; padding:5px; margin:5px 0; display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; }

.left-quick { position:fixed; bottom:30px; left:10px; z-index:99999; width:75px;height:75px; border-radius:80px; transition-duration: 300ms; }

.left-quick .quick { margin-top:5px; }
.left-quick .quick a { display:flex; align-items:center; justify-content:center; padding:10px; width:75px;height:75px; border-radius:80px;}
.left-quick .quick a .icon { width:40px; height:40px; background:none no-repeat center/contain; margin-right:1px; }
.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;border-radius:80px; }
.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 (min-width: 1200px) {
    :root { --quick-width:90px; }
    .is-index .quick-menu { right:calc(-1 * var(--quick-width)); width:var(--quick-width); }
    body.on .is-index .quick-menu { right:0; }
    
    .quick-menu .quick .icon { margin:0 auto; background:none no-repeat center/25px; width:45px; height:45px; border:2px solid #fff; border-radius:99px; }

    .quick-menu .catalogue { font-size:.75rem; }
    .quick-menu .catalogue .icon { width:11px; height:11px; vertical-align:middle; background:none no-repeat center/13px; margin:-2px 0 0 2px; }
    .quick-menu .catalogue .txt { margin-top:0; }
}

@media (max-width: 1200px) {
    :root { --quick-height:70px; }
    .quick-menu { left:0; top:auto; padding:10px; flex-direction:row; justify-content:center; }
	.is-index .quick-menu { bottom:calc(-1 * var(--quick-height)); height:var(--quick-height); }
    body.on .is-index .quick-menu { bottom:0; }

    .quick-menu ul { display:flex; width:auto; }
    .quick-menu ul .icon { margin:0 auto; width:36px; height:36px; background:none no-repeat center/20px; border-radius:99px; }

    .quick-menu .quick a { margin:0 10px; }

    .quick-menu .catalogue .tit { display:none; }
    .quick-menu .catalogue a { display:block; border-radius:0px; padding:0; margin:0 10px; border:none; }
    .quick-menu .catalogue .icon { background-size:16px; }
    .quick-menu .catalogue .txt:before { content:"카다로그 "; }

}


@media (max-width: 767px) {
    .quick-menu ul { font-size:.75rem; }
    .quick-menu a { width:25vw; margin:0 !important; }
    .quick-menu ul .icon { background-size:20px; }
    .quick-menu .quick a { position:relative; }
    .quick-menu .quick a:after { content:""; position:absolute; right:0; top:calc(50% - 20px); width:1px; height:40px; background:rgba(255, 255, 255, .2); }
    .quick-menu .quick .icon.call { background-color:#111; }
    .quick-menu .quick .icon.kakao { background-color:#fee500; background-size:30px; }
    .quick-menu .quick .icon.order { background-color:var(--main-bc1); }

    .quick-menu .catalogue .icon { background-color:#e8447e; }
}