#popcontactmodal {
--pop-stepper-no : 5;
--pop-page-content-addition-height : 1px;
--navbar-stepper-height: 44px;
--pop-footer-height:0px;

--calendar-cell-width: 50px;
--calendar-cell-height: 50px;
--input-line-color: #d8dadb;
/* --inout-bg-color: transparent; */
--input-bg-color: rgb(255 255 255 / 40%);
--input-font-size: 16px;
--input-title-color: #6a6a6a;
--page-step-header-height: 36px;
--page-step-header-realheight: 40px;
--f7-grid-gap: 0px;
--f7-grid-row-gap: 0px;
--f7-popup-border-radius: 0px;
--f7-popup-tablet-border-radius: 10px;
/* default 방문이사견적 색상*/
--contact-theme-color:#316acb;
--contact-contents-color:#2d62bb;
}
#popcontactmodal .top-steps-wrap div[class^='step-'].top-step-ing,
#popcontactmodal .top-steps-wrap div[class^='step-'].top-step-done{
  background-color: var(--contact-theme-color);
}
#popcontactmodal .step-avail-open:not(.step-opened) .pop-page-step-header:before{background-color: var(--contact-contents-color); color: #fff;}
#popcontactmodal .top-step-done + div[class^='line-']:after{border-color: var(--contact-theme-color);}
.pop-page-step.step-opened.step-last-call .pop-page-step-header.contact_header{
  background-color: var(--contact-theme-color);
}
.pop-header-right{
  display:none; align-items: baseline;
  color: #fff; padding-right: 10px;
}
.pop-header-right:hover{color: #fff;}
.pop-header-right i.fas{
  color: #fff; padding-right: 5px; font-size: 14px;
}
#popcontactmodal .pop-page-step-header {
  display: flex; justify-content: space-between;
}
#popcontactmodal .pop-page-step.step-last-call .pop-header-right {
  display: inherit;
}
.pop-page-step.step-opened.step-last-call .contact_header .pop-page-step-header-inner{background: transparent;}
.contact_body{padding: 50px; box-sizing: border-box;}
.contact_body .contact_step01{display: flex; align-items: center; justify-content: space-between; margin-bottom:50px;}
.contact_step01 label{width: 24%;}
.contact_step01 label p{background-repeat: no-repeat; background-position: top+10px center; padding-top: 110px; text-align: center; background-size: 50%; font-size: 15px; color: #626262; cursor: pointer; padding-bottom: 10px; border: 2px solid #bdd0ef;}
.contact_step01 label input[type="radio"]:checked + p{background-color: var(--contact-contents-color); color: #fff; border-color: var(--contact-contents-color);}
.contact_step01 label.home_move input[type="radio"]:checked + p{background-image: url('../../../image/main/step01_pakage_hover.png');}
.contact_step01 label.studio_move input[type="radio"]:checked + p{background-image: url('../../../image/main/step01_small_hover.png');}
.contact_step01 label.office_move input[type="radio"]:checked + p{background-image: url('../../../image/main/step01_office_hover.png');}
.contact_step01 label.truck_move input[type="radio"]:checked + p{background-image: url('https://www.modoo24.net/image/main/step01_truck_hover.png');}
.home_move p{background-image: url('../../../image/main/step01_pakage.png');}
.studio_move p{background-image: url('../../../image/main/step01_small.png');}
.office_move p{background-image: url('../../../image/main/step01_office.png');}
.truck_move p{background-image: url('../../../image/main/step01_truck.png');}
.contact_nextBtn{display: flex; justify-content: center;}
.contact_nextBtn span.btn.btn-secondary{border: 2px solid var(--contact-theme-color); color: var(--contact-theme-color); padding: 10px 50px; cursor: pointer; border-radius: 30px; background-color: #fff;}
.contact_nextBtn span.btn.btn-secondary:hover{box-shadow: none; background-color: var(--contact-theme-color); color: #fff;}
.contact_step01 label p{line-height: 1.5;}
.contact_step01 label p span{display: block; font-size: 17px;}


/* 이사 관련 설문 추가 시작 20221005  */
.contact_step00{display: flex; align-items: center; justify-content: space-between; margin-bottom:20px;}
.contact_step00 label{width: 32%; cursor: pointer;}
.contact_step00 label p{text-align: center; line-height: 2rem; color: #626262; border:2px solid #bdd0ef;}
.contact_step00 .price_radio:checked + p{background-color: var(--contact-contents-color); color: #fff; border-color: var(--contact-contents-color);}
/* 이사 관련 설문 추가 끝 20221005 */


#popcontactmodal .datepicker-inline{width: 100%;}
.contact_step02{padding: 10px 14px;}
#popcontactmodal th, #popcontactmodal td{
  width: var(--calendar-cell-width) !important;
  height: var(--calendar-cell-height) !important;
  min-width: var(--calendar-cell-width);
  min-height: var(--calendar-cell-height);
  font-size: 15px;
}
#popcontactmodal .table-condensed{margin: 0 auto;}
#popcontactmodal .datepicker table tr td.today{background-color: #bdd0ef; border-radius: 50%;}
#popcontactmodal .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active{background-color: #bdd0ef;}
#popcontactmodal td.son-active{position: relative;}
#popcontactmodal td.son-active{background-color: transparent;}
#popcontactmodal td.son-active:hover{background-color: #eee;}
#popcontactmodal td.son-active:before{
  content: "dot"; display: inline-block;
  width: 5px; height: 5px; overflow: hidden;
  position: absolute;
  top: 5px; left: calc(50% - 3px);
  border-radius: 50%; background-color: #0f203d;
}
#popcontactmodal .datepicker table tr td.active{background-color: var(--contact-theme-color); border-radius: 50%;}
#popcontactmodal .datepicker table tr td.active.son-active:before{background-color: #fff;}
.datepicker table tr td.day:hover{border-radius: 50%;}
#popcontactmodal .movedate-txt-son-wrap{width: 42%; margin: 30px auto 0;}
#popcontactmodal .movedate-txt-son-wrap .txt-son-info span:before{background-color: #0f203d;}


.contact_step03 > div{font-size: 14px; margin-bottom: 5px;}
.contact_step03 > div .fas{color: var(--contact-theme-color); margin-right: 8px;}
#popcontactmodal .contact_step03 .togglebutton.texttoggle label input[type=checkbox]:checked+.toggle{background-color: var(--contact-theme-color);}
.contact_step03_address{border: 1px solid var(--input-line-color); border-radius: 30px; display: block; width: 98%; color: #666; padding: 3px 18px; box-sizing: border-box; font-size: 0.95em; margin: 0 auto 8px;}
.contact_step03 .togglebutton{text-align: right;}
.contact_step03 .togglebutton label{font-size: 0.8em; color: var(--input-title-color);}
.contact_step03_destination{margin-top: 50px;}

.pop-content-memo-wrap textarea{resize: none;}
#popcontactmodal .form-check .form-check-input:checked~.form-check-sign .check{background: var(--contact-theme-color);}
#popcontactmodal .nface-order-auth-ip-wrap{margin-bottom: 20px;}

.contact_step05_recommend{display: flex; justify-content: center; margin: 30px 0;}
.contact_step05_recommend label div{width: 260px; padding: 25px; border: 3px solid var(--contact-contents-color); color: #999; cursor: pointer;}
.contact_step05_recommend label:first-of-type div{background: url('../../../image/main/step07_icon1.png') no-repeat 180px 30px;}
.contact_step05_recommend label:last-of-type div{background: url('../../../image/main/step07_icon2.png') no-repeat 180px 30px; margin-left: 10px;}
.contact_step05_recommend label div ul li:first-of-type{font-size: 14px; line-height: 1.2; margin-bottom: 30px;}
.contact_step05_recommend label div ul li strong{color: var(--contact-contents-color);}
.contact_step05_recommend label div ul li:last-of-type p{font-size: 22px; color: #666;}
.contact_step05_recommend label div ul li:last-of-type p span{display: block; margin-bottom: 10px; font-size: 14px;}
.contact_step05_recommend label div:hover{background-color: var(--contact-contents-color);}
.contact_step05_recommend label div:hover,
.contact_step05_recommend label div:hover ul li p,
.contact_step05_recommend label div:hover ul li p strong{color: #fff;}
.contact_step05_recommend label:first-of-type div:hover{background-image: url('../../../image/main/step07_icon1_o.png');}
.contact_step05_recommend label:last-of-type div:hover{background-image: url('../../../image/main/step07_icon2_o.png');}
#popcontactmodal .swal2-title{font-size: 24px;}

.contact-complete{position: relative;}
.contact_popup{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #666; padding: 30px; border-radius: 10px; font-size: 25px; background: url('../../../image/main/contact_fin.png') no-repeat top+30px center;}
.contact_popupCon{text-align: center; padding-top: 120px;}
.contact_popup ul{margin-bottom: 20px;}
.contact_popup ul li:first-of-type{font-size: 0.75em;}
.contact_popup ul li strong{color: var(--contact-contents-color)}
.popup_close{width: 80px; border-radius: 10px; border: 1px solid var(--contact-contents-color); font-size: 14px; height: 30px; line-height: 29px; cursor: pointer; margin: 0 auto; text-align: center;}
.popup_close:hover{background-color: var(--contact-contents-color); color: #fff;}

.swal-contact-confirm #swal2-title{font-size: 25px; padding-top: 40px;}
.swal-contact-confirm .swal2-styled.swal2-confirm{background-color: #316acb;}

.contact_companylist_inner{text-align: center; margin-top: 30px;}
.contact_companylist_tit > div:first-of-type{font-size: 1.5em; font-weight: 500;}
.contact_companylist_tit > div strong{color: var(--contact-contents-color);}
.contact_companylist{width: 80%; margin: 20px auto 80px; font-size: 0.95em;}
.contact_companylist ul li{border-bottom: 1px dashed var(--contact-theme-color); padding: 10px 15px; box-sizing: border-box;}
.contact_companylist ul li > div{display: flex; align-items: center; justify-content: space-between; flex-grow: 1;}
.contact_companylist ul li div .form-check .form-check-label span{top: -5px;}
.contact_company_name, .contact_company_detail{cursor: pointer;}
.contact_company_name{width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;}
.contact_company_detail{color: var(--contact-contents-color);}
.contact_company_detail::after{content: '▶'; display: inline-block; color: var(--contact-contents-color); font-size: 0.75em; vertical-align: middle;}
.contact_review{width: 82px; text-align: left;}
.contact_grade{width: 66px;}
#contact_companylist .contact_company_select_btn{text-align: center; border: 1px solid var(--contact-theme-color); width: 200px; margin: 0 auto 50px; border-radius: 10px; cursor: pointer;}
#contact_companylist .contact_company_select_btn:hover{background-color: var(--contact-theme-color);}
#contact_companylist .contact_company_select_btn .btn.btn-secondary{padding: 5px 0; font-size: 0.85em; color: var(--contact-contents-color); transition: none;}
#contact_companylist .contact_company_select_btn .btn.btn-secondary:hover{box-shadow: none; background-color: var(--contact-theme-color);}
#contact_companylist .contact_company_select_btn:hover .btn.btn-secondary{color: #fff; background-color: var(--contact-theme-color);}

.contact_non_company{font-size: 18px; font-weight: 500;}
.contact_companylist_searching > div{text-align: center; font-size: 0.95em;}
.lds-ellipsis {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--contact-contents-color);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.75s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.75s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.75s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.75s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


.contact_select_popup{background: none; width: 95%; margin-bottom: 0;}
.contact_select_popupCon{padding-top: 0;}
.contact_selectBox{display: flex; text-align: left; margin: 30px 0; border: 1px solid var(--contact-contents-color);}
.contact_selectBox div{padding: 30px 20px; box-sizing: border-box;}
.contact_selectBox div h2{font-size: 1em; font-weight: 600; margin-bottom: 30px;}
.contact_popup .contact_selectBox div ul li{display: flex; font-size: 16px; justify-content: space-between;}
.contact_selectBox div ul li:not(:last-of-type){margin-bottom: 10px;}
.contact_myInfo{width: 55%; border-right: 1px dashed var(--contact-contents-color);}
.contact_myInfo h2{background: url('../../../image/main/contact_select_icon02.png') no-repeat left center; background-size: 37px; padding-left: 45px;}
.contact_mySelect_company h2{background: url('../../../image/main/contact_select_icon01.png') no-repeat left center; background-size: 40px; padding-left: 50px;}
.contact_myInfo ul li > span{width: 22%; font-weight: 600; color: #333;}
.contact_myInfo ul li p{width: 75%;}
.contact_mySelect_company{width: 43%;}
.contact_select_popup .contact_selectBox div ul{margin-bottom: 0;}
.contact_mySelect_company ul li p{width: 75%; word-break: break-all;}
.contact_mySelect_company ul li span{width: 20%;}

.top-steps-wrap{align-items: center;}
/* .pop-navbar-stepper{background-color: var(--contact-theme-color); color: #fff;}
.pop-navbar-stepper .fas{color: #fff !important;} */
.top-steps-wrap div[class^='line-']{margin-top: 15px;}

.contact_popup60{font-size: 20px;}
.contact_popup60 ul li:first-of-type{margin-bottom: 10px;}

.contact_close_list{text-align: center; font-size: 18px; margin: 50px auto 80px; color: #ff4100; font-weight: 500;}
#staffmodal iframe{border: 1px solid #202020;}

.contact_mySelect_company ul li span{cursor: pointer;}




@media screen and (max-width: 810px){


  .contact_body{padding: 20px;}
  .contact_body .contact_step01{margin: 15px auto 25px;}
  .contact_step01 label p{padding-top: 60px; font-size: 12px; height: 150px;}
  .contact_step01 label p span{font-size: 13px; font-weight: 600;}
  .contact_nextBtn span.btn.btn-secondary{padding: 5px 25px;}
  #popcontactmodal .movedate-txt-son-wrap{width: 90%;}

  .contact_step05_recommend{flex-wrap: wrap;}
  .contact_step05_recommend label{width: 80%;}
  .contact_step05_recommend label div{margin: 0 auto;}
  .contact_step05_recommend label:last-of-type div{margin: 0 auto;}

  .contact_companylist{width: 90%; margin: 25px auto;}
  .contact_companylist ul li{padding: 10px 0;}
  #contact_companylist .contact_company_select_btn .btn.btn-secondary{margin-bottom: 5px;}

  .contact_popup{width: 90%; padding: 0; background-size: 50px;}
  .contact_popupCon{padding-top: 80px;}

  .contact_select_popupCon{padding-top: 0;}
  .contact_selectBox{flex-wrap: wrap;}
  .contact_selectBox div h2{font-size: 17px; margin-bottom: 20px;}
  .contact_myInfo{border-right: none; border-bottom: 1px solid var(--contact-contents-color); width: 100%;}
  .contact_myInfo h2{background-size: 25px; padding-left: 30px;}
  .contact_popup .contact_selectBox div ul li{font-size: 12px;}
  .contact_mySelect_company{width: 100%;}
  .contact_mySelect_company h2{background-size: 28px; padding-left: 35px;}

  .contact_companylist ul li div div:nth-of-type(3),
  .contact_review{display: none;}
  .contact_company_name{width: 120px;}
}