/* 메인 하단고정 상담신청창 CSS 시작 */
@import url("https://webfontworld.github.io/Pretendard%20Variable/Pretendard%20Variable.css");

:root{
  --font: "Pretendard Variable";
  --c-white:#fff;
  --c-main:#005c92;
  --btn-bg:#002629;
  --btn-txt:#f8ff35;
}

.bottom_fixed_box{ position: fixed; bottom: 0; z-index: 299; width: 100%; height: auto; padding: 17px 0; background-size: cover; background: #fff; border-radius: 14px; box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.21);
-webkit-box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 1px 1px 13px 0px rgba(0,0,0,0.21); }

.bfb_frm { display: flex; justify-content: space-between; align-items: center; width: 1600px; margin: 0 auto; }
.bfb_frm > div { display: flex; justify-content: space-between; }

.bfb_frm h2 { font-size: 2.7em; font-family: "Pretendard Variable"; }
.bfb_frm h2 span { color: #28afed; }


.bfb_frm .frm_input_com { width: 220px; height: 50px; border-bottom: 1px solid #000 !important; border: none; }

.bfb_frm .name { display: flex; align-items: center;}
.bfb_frm .number { display: flex; align-items: center;}

.bfb_frm .name label { font-size: 1.7em; font-weight: bold; font-family: "Pretendard Variable"; margin-right: 16px;  }
.bfb_frm .number label { font-size: 1.7em; font-weight: bold; font-family: "Pretendard Variable"; margin-right: 16px; }


.bfb_frm_label { display: flex; align-items: center; justify-content: center; border: 1px solid #000;  width: 220px; height: 50px; border-radius: 6px; font-size: 1.2em; }
.bfb_frm_label input { margin-left: 5px; }

.bfb_frm .name input::placeholder { opacity: 0; }
.bfb_frm .number input::placeholder { opacity: 0; }


.bfb_frm .dong { display: flex; align-items: center; margin-left: 30px;}
.bfb_frm .dong > div {  height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid #000; border-radius: 6px; margin-left: 12px; }
.bfb_frm .dong img { width: 22px; }

.bfb_frm_btn { height: 50px; width: 250px; background: #28afed; border: none; border-radius: 8px; font-size: 2em; color: #fff;font-family: "Pretendard Variable"; font-weight: bold; 
	animation-name: color-effect;
	animation-duration:1200ms;
	animation-iteration-count:infinite; }

br.bfb_br { display: none; }
.mo_moreview { display: none; }


@keyframes color-effect {
  0% {
    color: #f8ff35;
	background-color:#000;
  }
  50%{
	color: #fff;
	background-color:#28afed;
  }
  100% {
    color: #f8ff35;
	background-color:#000;
  }
}


@media(max-width:1700px){ 
    .bottom_fixed_box { border-radius: 0; }
    .bfb_frm .frm_input_com { width: 14vw; }
    .bfb_frm_label { width: 16vw; }
    .bfb_frm_btn { width: 12vw; }
    .bfb_frm  { width: 94%; }
}
@media(max-width:1280px){ 
    .bfb_frm h2 { font-size: 2.5vw; }
    .bfb_frm_label { font-size: 1.1vw; }
    .bfb_frm .name label { font-size: 1.7vw; }
    .bfb_frm .number label { font-size: 1.7vw; }
    .bfb_frm_btn { font-size: 2vw; }
}
@media(max-width:860px){ 
    .bottom_fixed_box { background: rgba(40, 175, 237, 0.8); padding-bottom: 5vw; }
    
    .bfb_frm > div { position: relative; }
    
    .bfb_frm h2 { display: none; }
    
    .bfb_frm .name { border-bottom: none; }
    .bfb_frm .number { border-bottom: none; margin-left: 1.2vw; }
    
    .bfb_frm_label { font-size: 1.4vw; width: auto; height: auto; border: none; font-size: 1.7vw; color: #fff; }
    .bfb_frm .name label { font-size: 2.3vw; display: none;  }
    .bfb_frm .number label { font-size: 2.3vw; display: none; }
    .bfb_frm_btn { font-size: 2.5vw; width: 20vw; }
    .bfb_frm .frm_input_com { width: 30vw; border-bottom: none !important; border-radius: 40px; }
    .bfb_frm .number .frm_input_com { width: 41vw; }

    .bfb_frm .dong { margin-left: 0; width: auto; position: absolute; right: -21.5vw; bottom: -3vw;}
    .bfb_frm .dong > div { display: none; height: auto; width: 6vw; border: 1px solid #000; border-radius: 6px; margin-left: 1vw; }
    .bfb_frm .dong img { width: 2vw; }
    
    .bfb_frm .name input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 2vw; padding-left: 2.3vw; }
    .bfb_frm .number input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 2vw; padding-left: 2.3vw; }
    
    .mo_moreview { display: block; color: #fff; font-size: 1.5vw; margin-top: 2px; }
}

@media(max-width:640px){ 
    .bottom_fixed_box { padding-bottom: 6vw; }
    
    .bfb_frm h2 { display: none; }
    .bfb_frm_label { font-size: 2vw; height: auto; align-items: center; }
    .bfb_frm .name label { font-size: 2.8vw; }
    .bfb_frm .number label { font-size: 2.8vw; }
    .bfb_frm_btn { font-size: 3.2vw; width: 18vw; height: 6vw; }
    .bfb_frm .frm_input_com { height: 6vw; }
    
    .bfb_frm .dong { margin-left: 0; width: auto; position: absolute; right: -21.5vw; bottom: -4vw;}
    
    .bfb_frm .name { display: flex; align-items: flex-start; flex-direction: column; }
    .bfb_frm .number { display: flex; align-items: flex-start; flex-direction: column; margin-left: 1.5vw; }
    
    .bfb_frm .name input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 2vw; padding-left: 3vw; }
    .bfb_frm .number input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 2vw; padding-left: 3vw; }
    .bfb_frm .number .frm_input_com { width: 41vw; }
    .mo_moreview { display: block; color: #fff; font-size: 2vw; margin-top: 0; margin-left: 1vw; }
}

@media(max-width:480px){ 
    .bottom_fixed_box { padding-bottom: 8vw; }
    
    .bfb_frm h2 { display: none; }
    .bfb_frm_label { font-size: 3vw; height: auto; align-items: center; }
    .bfb_frm .name label { font-size: 2.8vw; }
    .bfb_frm .number label { font-size: 2.8vw; }
    .bfb_frm_btn { font-size: 4.5vw; width: 21vw; height: 9vw; }
    .bfb_frm .frm_input_com { height: 9vw; }
    
    .bfb_frm .dong { margin-left: 0; width: auto; position: absolute; right: -23vw; bottom: -5.5vw;}
    
    .bfb_frm .name { display: flex; align-items: flex-start; flex-direction: column; }
    .bfb_frm .number { display: flex; align-items: flex-start; flex-direction: column; margin-left: 1.5vw; }
    
    .bfb_frm .name input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 3.4vw; padding-left: 3vw; }
    .bfb_frm .number input::placeholder { opacity: 1; font-family: "Pretendard Variable"; font-size: 3.4vw; padding-left: 3vw; }
    .bfb_frm .number .frm_input_com { width: 39vw; }
    .mo_moreview { display: block; color: #fff; font-size: 3vw; margin-top: 0; margin-left: 1vw; }
}