@charset "utf-8";

/* =====================================================
   하단 상담신청 바 (.cbar) · inc/bar.php
   PC 1920 기준 1rem = 10px (바 134rem 가운데 정렬), 모바일 375 기준 (전체 폭)
   플로팅 비포/애프터 버튼 (.floatCase) · inc/bar.php 끝 (bfaf 게시판으로 이동)
   ===================================================== */
.cbar {position: fixed; left: 50%; bottom: 0; z-index: 997; width: 134rem; margin-left: -67rem; transition: transform 0.3s;}
.cbar.close {transform: translateY(100%);}
.cbar .tab {position: absolute; left: 50%; bottom: 100%; display: flex; align-items: center; justify-content: center; gap: 1.4rem; width: 21.4rem; height: 4.8rem; margin: 0 0 -0.1rem -10.7rem; padding: 0; border: 0; border-radius: 2rem 2rem 0 0; background: #222664; font-family: inherit; font-size: 1.8rem; font-weight: 500; color: #fff; cursor: pointer;}
.cbar .tab img {width: 2rem; transition: transform 0.3s;}
.cbar.close .tab img {transform: rotate(180deg);}
.cbar .bar {height: 13rem; border-radius: 3rem 3rem 0 0; background: #222664;}
.cbar .inner {display: flex; align-items: flex-start; padding: 3.2rem 0 0 6rem;}
.cbar .logo {flex: none; width: 20.5rem; margin-top: 2rem;}
.cbar .logo img {display: block; width: 100%;}
.cbar .moTit {display: none;}
.cbar .fields {margin-left: 5.7rem;}
.cbar .row {display: flex; gap: 1rem;}
.cbar input[type=text], .cbar input[type=tel], .cbar select {width: 17rem; height: 3.6rem; padding: 0 1.4rem; border: 0; border-radius: 0.5rem; background: #fff; font-family: inherit; font-size: 1.4rem; color: #2e2e2e; outline: none;}
.cbar ::placeholder {color: #bbb; opacity: 1;}
.cbar select {width: 20rem; padding-right: 3.4rem; -webkit-appearance: none; appearance: none; background: #fff url(../img/bar/ic_select.svg) right 1.6rem center / 1.4rem no-repeat; color: #bbb; cursor: pointer;}
.cbar select.on {color: #2e2e2e;}
.cbar .foot {display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem;}
.cbar .agree {display: flex; align-items: center; gap: 0.6rem; font-size: 1.6rem; line-height: 1.6rem; color: #fff; cursor: pointer;}
.cbar .agree input {flex: none; width: 1.6rem; height: 1.6rem; margin: 0; border-radius: 0.2rem; -webkit-appearance: none; appearance: none; background: #fff; cursor: pointer;}
.cbar .agree input:checked {background: url(../img/bar/ic_check.svg) center / 100% no-repeat;}
.cbar .agree a {color: #fff;}
.cbar .btnSubmit {padding: 0; border: 0; border-radius: 0.5rem; background: #fff; font-family: inherit; font-weight: 700; color: #222664; cursor: pointer;}
.cbar .btnSubmit.pc {flex: none; width: 10rem; height: 6.6rem; margin-left: 1rem; font-size: 1.8rem;}
.cbar .btnSubmit.mo {display: none;}
.cbar .call {flex: none; margin: 1rem 0 0 6rem; color: #fff;}
.cbar .call p {font-size: 1.6rem; line-height: 1.6rem;}
.cbar .call .num {display: block; margin-top: 0.6rem; font-size: 3.2rem; font-weight: 700; line-height: 3.2rem; color: #fff;}

/* 플로팅 비포/애프터 (우측 상단 · 통통 튀는 모션) */
.floatCase {position: fixed; right: 8rem; top: 16.5rem; z-index: 998; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 15rem; height: 15rem; border-radius: 50%; background: #2e2e2e; box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.25); text-align: center; animation: floatBounce 1.6s ease-in-out infinite;}
.floatCase:hover {animation-play-state: paused;}
.floatCase .tt {font-size: 2.2rem; font-weight: 800; line-height: 3rem; color: #fff;}
.floatCase .lk {margin-top: 0.3rem; font-size: 1.6rem; font-weight: 700; line-height: 2rem; color: #fff598;}
@keyframes floatBounce {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-1.2rem);}
}
@media (prefers-reduced-motion: reduce){
    .floatCase {animation: none;}
}

@media all and (max-width: 1360px) and (min-width: 881px){
    .cbar {left: 0; width: 100%; margin-left: 0;}
    .cbar .bar {border-radius: 0;}
}

@media all and (max-width: 880px){
    .cbar {left: 0; width: 100%; margin-left: 0;}
    .cbar .tab {gap: 1rem; width: 18rem; height: 4rem; margin-left: -9rem; border-radius: 1.6rem 1.6rem 0 0; font-size: 1.5rem;}
    .cbar .tab img {width: 1.4rem;}
    .cbar .bar {height: auto; padding: 2.2rem 2.2rem 1.8rem; border-radius: 1rem 1rem 0 0;}
    .cbar .inner {display: block; padding: 0;}
    .cbar .logo, .cbar .call, .cbar .btnSubmit.pc {display: none;}
    .cbar .fields {margin-left: 0;}
    .cbar .row {flex-direction: column; gap: 1rem;}
    .cbar input[type=text], .cbar input[type=tel], .cbar select {width: 100%; height: 3.4rem; padding: 0 1.2rem; font-size: 1.4rem;}
    .cbar select {background-position: right 1.2rem center;}
    .cbar .foot {margin-top: 0.8rem;}
    .cbar .agree {gap: 0.6rem; font-size: 1.2rem; line-height: 1.2rem;}
    .cbar .agree input {width: 1.6rem; height: 1.6rem;}
    .cbar .btnSubmit.mo {display: block; flex: none; height: 3rem; padding: 0 1.6rem; border-radius: 1.5rem; font-size: 1.2rem;}

    .floatCase {right: 2rem; top: 13.6rem; width: 10.8rem; height: 10.8rem;}
    .floatCase .tt {font-size: 1.6rem; line-height: 2.2rem;}
    .floatCase .lk {margin-top: 0.1rem; font-size: 1.2rem; line-height: 1.6rem;}
}