/* footer & header styles */
.reserv{ position: fixed; bottom: 50px; right: 50px; width: 110px; height: 110px; background-color: #e40038; z-index: 999; color: #fff; text-align: center; }
.reserv > a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 12px; box-sizing: border-box; gap: 5px; }
.reserv > a .logo{ width: 100%; }
.reserv > a p{ font-size: 14px; line-height: 1.2; }
.reserv > a p br{ display: none; }

.reserve--mo { display: none; }


@media screen and (max-width: 1280px){
    .reserv{ right: 30px; bottom: 30px; }
}

@media screen and (max-width: 820px){
    .reserv{ width: 100px; height: 100px; right: 5%; bottom: 60px; }
    .reserv > a p br{ display: block; }

    .reserve--pc { display: none; }
    .reserve--mo { display: inline-block; } /* 버튼 스타일에 맞게 조정 */
}

@media screen and (max-width: 500px){
    .reserv{ width: 80px; height: 80px; bottom: 30px; }
}


.gohome{ position: fixed; top: 50px; right: 50px; mix-blend-mode: difference; z-index: 99; }
.gohome > a{ display: flex; flex-direction: column; gap: 7px; justify-content: center; align-items: center; color: #fff; }
.gohome > a i{ font-size: 30px; }
.gohome > a span{ font-size: 14px; }

@media screen and (max-width: 820px){
    .gohome{ top: 20px; right: 5%; }
    .gohome > a{ gap: 3px; }
    .gohome > a i{ font-size: 24px; }
    .gohome > a span{ font-size: 12px; }
}




.footer{ width: 100%; position: relative; background-color: #fff; }
.footer .wrap{ padding: 130px 0;  }
.footer .wrap .flx{ display: flex; justify-content: space-between; gap: 30px; }
.footer .wrap .flx .rbx{ display: flex; gap: 90px; }
.footer .wrap .flx .rbx .bx > strong{ font-size: 30px; font-weight: 800; }
.footer .wrap .flx .rbx .bx > ul{ margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer .wrap .flx .rbx .bx > ul li{ font-size: 17px; line-height: 1.7; color: #1d1d1d;  }
.footer .wrap .flx .rbx .bx > ul li > a{ display: block; width: 100%; height: 100%; }
.footer .wrap > em{ font-size: 14px; letter-spacing: 0.08em; line-height: 1.2; display: block; text-align: right; margin-top: 75px; transition-duration: 0.2s; }


@media screen and (min-width: 821px){
    .footer .wrap .flx .rbx .bx > ul li:hover > a{ color: #b02b32; }
}

@media screen and (max-width: 1280px){
    .footer .wrap .flx .lbx{ width: 140px; flex-shrink: 0; }
    .footer .wrap .flx .rbx{ gap: 4%; }
    .footer .wrap .flx .rbx .bx > strong{ font-size: 26px; }
    .footer .wrap .flx .rbx .bx > ul li{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    .footer .wrap{ padding: 70px 0; }
    .footer .wrap .flx{ flex-direction: column; }
    .footer .wrap .flx .rbx{ flex-direction: column; gap: 20px; }
    .footer .wrap .flx .rbx .bx > strong{ font-size: 18px; }
    .footer .wrap .flx .rbx .bx > ul{ margin-top: 10px; gap: 5px; }
    .footer .wrap > em{ text-align: left; font-size: 12px; margin-top: 40px; }
}