/* Footer */
.footer {border-top: 1px solid #DDDDDD;}
.footer .inner {display: flex; align-items: flex-end; justify-content: space-between; padding: 4.5rem 0;}
.footer-cs {display: flex; flex-direction: column; row-gap: 2rem;}
.footer-cs h4 {display: flex; align-items: center; font-size: 2.4rem; font-weight: 700; color: #666;}
.footer-cs h4 a {font-size: inherit;}
.footer-cs .cs-info {display: flex; flex-direction: column; row-gap: 0.5rem; }
.footer-cs .cs-info li {display: flex; align-items: center; column-gap: 1rem; font-size: 1.4rem; font-weight: 600;}
.footer-cs .cs-info li .cs-info--title {width: 6rem; color: #666;}
.footer .list-line {display: flex; align-items: center; column-gap: 1rem;}
.footer .list-line li {font-size: 1.4rem; line-height: 1.6em;}
.footer .list-line li:not(:last-child)::after {right: -0.5rem;}
.footer .copyright {font-size: 1.4rem; color: #666; margin-top: 1rem; }
.footer .sns-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 0.8rem; row-gap: 0.8rem; }
.footer .sns-item a {display: block; width: 4.5rem; height: 4.5rem;}
.footer .sns-item.sns-kakao a {background: url('../images/common/footer-sns-kakao.png') no-repeat 50% 50% / contain;}
.footer .sns-item.sns-blog a {background: url('../images/common/footer-sns-blog.png') no-repeat 50% 50% / contain;}
.footer .sns-item.sns-instagram a {background: url('../images/common/footer-sns-insta.png') no-repeat 50% 50% / contain;}
.footer .sns-item.sns-youtube a {background: url('../images/common/footer-sns-youtube.png') no-repeat 50% 50% / contain;}

.navigation {display: none; position: fixed; bottom: 0; left: 0; right: 0; height: auto; background-color: #fff; border-top: 1px solid #ddd; justify-content: space-around; align-items: center; z-index:10; }
.navigation-item {flex: 1; text-align: center; font-size: 12px; color: #333; cursor: pointer; }
.navigation-item a {display: flex; flex-direction: column; align-items: center; padding: 2rem 0;}
.navigation-item .item-icon {display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto 1.3rem; background-color: transparent; }
.navigation-item.home .item-icon {background: url('../images/common/navigation_home.png') no-repeat 50% 50% / contain; }
.navigation-item.ai .item-icon {background: url('../images/common/navigation_ai.png') no-repeat 50% 50% / contain; }
.navigation-item.teacher .item-icon {background: url('../images/common/navigation_heart.png') no-repeat 50% 50% / contain; }
.navigation-item.request .item-icon {background: url('../images/common/navigation_request.png') no-repeat 50% 50% / contain; }
.navigation-item.mypage .item-icon {background: url('../images/common/navigation_mypage.png') no-repeat 50% 50% / contain; }
.navigation-item.home.on .item-icon {background: url('../images/common/navigation_home_on.png') no-repeat 50% 50% / contain; }
.navigation-item.ai.on .item-icon {background: url('../images/common/navigation_ai_on.png') no-repeat 50% 50% / contain; }
.navigation-item.teacher.on .item-icon {background: url('../images/common/navigation_heart_on.png') no-repeat 50% 50% / contain; }
.navigation-item.request.on .item-icon {background: url('../images/common/navigation_request_on.png') no-repeat 50% 50% / contain; }
.navigation-item.mypage.on .item-icon {background: url('../images/common/navigation_mypage_on.png') no-repeat 50% 50% / contain; }

.quick-menu {position: fixed; right: 3rem; bottom: 15.5rem; z-index: 20;}
.quick-menu ul {display: flex; flex-direction: column; row-gap: 1.8rem;}
.quick-menu a {display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; border-radius: 100px; position: relative;}
.quick-menu .quick-item--icon {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 100px; overflow: hidden;}
.quick-menu .quick-tel .quick-item--icon {background: url('../images/common/quick-icon-tel.svg') no-repeat 50% 50% / contain; }
.quick-menu .quick-kakao .quick-item--icon {background: url('../images/common/quick-icon-kakao.svg') no-repeat 50% 50% / contain; }
.quick-menu .quick-top .quick-item--icon {background: url('../images/common/quick-icon-top.svg') no-repeat 50% 50% / contain; box-shadow: 0 0 5px rgba(0,0,0,0.35);}
.quick-menu .quick-tel .quick-item--text {display: flex; align-items: center; justify-content: center; width: 11.8rem; height: 3.8rem; position: absolute; right: calc(100% + 1rem); top: 50%; transform: translateY(-50%) translateX(2rem); background: var(--blue); color: #fff; font-size: 1.6rem; font-weight: 700; border-radius: 50px; font-size: 1.6rem; font-weight: 700; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease;;}

.quick-menu .quick-top {display: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease;}
.quick-menu .quick-top.show {display: block; opacity: 1; visibility: visible;}
.quick-menu .quick-tel.open .quick-item--text {opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

.floating-request {position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 10; }
.floating-request .butn {display: flex; align-items: center; justify-content: center; width: 25rem; font-size: 2.2rem; font-weight: 600; height: 5rem; border-radius: 50px; background: #ffe500; color: #000}


@media (max-width: 1280px) {
    .footer .inner {padding-bottom: 10.5rem;}
    .navigation {display: flex;}
    .floating-request {bottom: 13rem;}
}


@media (max-width: 1024px) {
    .footer .inner {flex-wrap: wrap; row-gap: 3rem; }
    .footer-cs {width: 100%;}

    .quick-menu {bottom: 24rem;}
    .floating-request .butn {font-size: 14px; width: 130px; height: 40px; font-weight: 700;}
}

@media (max-width: 768px) {
    .footer .inner {position: relative;}
    .footer .footer-sns {position: absolute; top: 4.5rem; right: 0; }
    .footer .sns-list {column-gap: 0.6rem; row-gap: 0.6rem;}
    .footer .sns-item a {width: 4rem; height: 4rem;}
    .footer .list-line {flex-wrap: wrap;}
}

@media (max-width: 480px) {
    .footer .footer-sns {position: static; order: 2;}
    .footer .sns-list {grid-template-columns: repeat(4, 1fr); grid-template-rows: unset;}
    .footer .footer-info {order: 3;}
}