@charset "UTF-8";

/********************************************************
■ Quick Menu : 퀵메뉴 부분
********************************************************/
/* 상단/하단 이동버튼 & 클릭시 퀵메뉴 */
.at-go { position: fixed; right:30px; bottom:30px; z-index:999; --btn-size:55px; --btn-color:#ddd; --btn-radius:99px; --btn-margin:5px; transition-duration:600ms; animation: quick-wave 1.5s ease-out infinite; }

@keyframes quick-wave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.at-go .go-btn { display:flex; flex-direction:column; align-items:flex-end; }
.at-go .go-btn li { position:relative; border-radius:var(--btn-radius); min-width:var(--btn-size); height:var(--btn-size); margin-top:var(--btn-margin); cursor:pointer; transition-duration:700ms; background:#fff; color:#fff; }
.at-go .go-btn li:nth-last-child(n+3) { width:var(--btn-size); opacity:0; transition-duration: 300ms; z-index:-1; }

/* .at-go .go-btn .kakao { background:var(--kakao-color); color:#333; }
.at-go .go-btn .kakao img { filter:invert(1); }
.at-go .go-btn .naver { background:var(--naver-color); }
.at-go .go-btn .go-inquiry { background:var(--main-color3); } */

.at-go .go-btn > li:nth-child(1) { background:var(--main-color1); transform:translateY(calc(var(--btn-size)*4 + var(--btn-margin)*4)); }
.at-go .go-btn > li:nth-child(2) { background:#333; transform:translateY(calc(var(--btn-size)*3 + var(--btn-margin)*3)); }
.at-go .go-btn > li:nth-child(3) { background:var(--main-color3); transform:translateY(calc(var(--btn-size)*2 + var(--btn-margin)*2)); }
.at-go .go-btn > li:nth-child(4) { background:var(--main-color2); transform:translateY(calc(var(--btn-size) + var(--btn-margin))); }

.at-go .go-btn.on li:nth-last-child(n+3) { opacity:1; transform:translateY(0) !important; z-index:1; }

.at-go .go-btn .go-plus { background:#222; margin-top:var(--btn-margin); display:flex; justify-content:center; align-items:center; }

.at-go .go-btn .go-top { position:relative; display:flex; justify-content:center; align-items:center; border:1px solid var(--btn-color); overflow:hidden; z-index:2; transition-duration:600ms; box-shadow:2px 2px 5px rgba(0,0,0,.2); background:rgba(255,255,255,.9); }
.at-go .go-btn .go-top:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:var(--btn-radius); width:0; height:0; background:var(--main-color3); transition-duration:600ms; z-index:-1; }

.at-go .go-btn li:nth-last-child(-n+2) span { position:relative; transition-duration:400ms; }
.at-go .go-btn li:nth-last-child(-n+2) span:before,
.at-go .go-btn li:nth-last-child(-n+2) span:after { content:""; position:absolute; border-radius:2px; }


.at-go .go-btn .go-plus span { width:50%; height:50%; }
.at-go .go-btn .go-plus span:before,
.at-go .go-btn .go-plus span:after { background:#fff; }
.at-go .go-btn .go-plus span:before { top:calc(50% - 1px); width:100%; height:2px; }
.at-go .go-btn .go-plus span:after { left:calc(50% - 1px); width:2px; height:100%; }

.at-go .go-btn .go-top span { width:2px; height:var(--arrow-height); background:#111; --arrow-height:12px; }
.at-go .go-btn .go-top span:before,
.at-go .go-btn .go-top span:after { width:2px; height:8px; background:#111; }
.at-go .go-btn .go-top span:before { right:100%; top:-3px; transform:rotate(45deg); }
.at-go .go-btn .go-top span:after { left:100%; top:-3px; transform:rotate(-45deg); }


.at-go .go-btn .go-top:hover { border-color:var(--main-color3); background:var(--main-color3); transition-delay:400ms; }
.at-go .go-btn .go-top:hover:before { width:120%; height:120%; }
.at-go .go-btn .go-top:hover span,
.at-go .go-btn .go-top:hover span:before,
.at-go .go-btn .go-top:hover span:after { background:#fff; }


.at-go .go-btn .btn { display:flex; justify-content: center; align-items:center; width:100%; height:100%; padding:0 5px; color:inherit; text-align:left; transition-duration: 700ms; }
.at-go .go-btn .btn b { opacity:0; visibility:hidden; margin-left:5px; transition:opacity 400ms 300ms, width 400ms; }
.at-go .go-btn .btn img { width:32px; }
.at-go .go-btn .go-inquiry i { font-size:1.25rem; }


.at-go .go-btn.on .go-plus span { transform: rotate(135deg); }
.at-go .go-btn.on li:nth-last-child(n+3) { width:100%; }
.at-go .go-btn.on .btn { padding:0 20px; }
.at-go .go-btn.on .btn b { opacity:1; visibility: visible; } */




@media (max-width: 1200px) {
    .at-go { right:40px; bottom:30px; }
}


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

    .at-go .go-btn .go-plus:before,
    .at-go .go-btn .go-plus:after { height:15px; }

    .at-go .go-btn .go-top span { --arrow-height:15px; }
    .at-go .go-btn .go-top span:before,
    .at-go .go-btn .go-top span:after { height:9px; }
    .at-go .go-btn .go-top span:before { left:-3px; top:-1px; }
    .at-go .go-btn .go-top span:after { right:-3px; top:-1px; }

	.at-go .go-btn .btn img { width:25px; }
}