@charset "UTF-8";
/* hanbom.com _ project _ name _ yymmdd */

/* for Developer */


.detail-body *{line-height: 1.6; font-family: 'SUIT', sans-serif !important; }
.detail-down-btn{margin-top: 60px; text-align: left;}
@media all and (min-width:821px) {
    .detail-body :is(p:not(.auto-fs), strong:not(.auto-fs), span:not(.auto-fs)){ font-size: 18px !important; }
    .detail-body :is(p.auto-fs *, strong.auto-fs *, span.auto-fs *){ font-size: inherit !important; }
}
@media all and (max-width:820px) {
    .detail-body :is(p:not(.auto-fs), strong:not(.auto-fs), span:not(.auto-fs)){ font-size: 16px !important; }
    .detail-body :is(p.auto-fs *, strong.auto-fs *, span.auto-fs *){ font-size: inherit !important; }

    .detail-down-btn{margin-top: 40px}
}

/* 20231110 */
.introduce.business-field.view .title-wrap h1 + .text{padding-top: 10px; line-height: 1.4;}
.introduce.business-field.view .title-wrap .tag-wrap,
.introduce.business-field.view .primary-keyword.cate-wrap .tag-wrap{ gap: 8px;
    display: flex; align-items: center; flex-wrap : wrap;
}
.introduce.business-field.view .title-wrap .tag-wrap{padding-top: 15px; font-size: inherit;}
.introduce.business-field.view .title-wrap .tag-wrap .tag{padding: 12px 16px; font-size: 14px; line-height: 1;
    color: var(--black);background-color: var(--white-2); border-radius: 50px; -webkit-border-radius: 50px;
}

.introduce.business-field.view .primary-keyword.cate-wrap .tag-wrap{height: auto; margin: 18px auto 0;}
.introduce.business-field.view .primary-keyword.cate-wrap .tag-wrap .tag{margin: 0;}
@media all and (max-width:820px) {
    .introduce.business-field.view .title-wrap .text{font-size: 16px;}
    .introduce.business-field.view .title-wrap .tag-wrap .tag{font-size: 12px;}
.sub-title-wrap .text{font-size: 16px;}
.btn_wrap .btn_box{flex-direction: column;}
}
@media all and (max-width:579px) {
.sub-title-wrap .text{ max-width: 450px;}
}


.my-page.my-case .tabs.medium li{flex: 1;}
.customer.reserve .field .insert.text-wrap{word-break: keep-all;}

.story.detail.not-contents .content-primary{padding-bottom: 0;}


/* 20240115 */
@media all and (max-width: 820px) {
    .introduce.member section.tab-content .swiper.sub-tabs{overflow-x: hidden;}
}



/* float-banner */

/* 20240304 스크롤 이벤트 주석처리
.scroll-down .float-banner{bottom: -96px;}
*/

.float-banner{position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 96px; z-index: 13;
    display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
    background-color: #1C1C1C;
    -webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;
}

.float-banner :is(.pc-contact , .mo-contact){
    width: 100%; height: 100%;
    display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.float-banner .mo-contact { display: none;}

.float-banner.active{display: none;}
.float-banner .form-wrap fieldset{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.float-banner .contact-number{ width: 360px; height: 100%; background-color: var(--blue);
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.float-banner .contact-number span{position: relative; top: -3px; font-weight: 500; color: var(--white-80);}
.float-banner .contact-number a{padding-left: 10px; font-size: 28px; font-weight: 500; color: var(--white);
    display: -webkit-box;display: -ms-flexbox;display: flex;
}
.float-banner .form-wrap{ width: calc(100% - 360px); padding: 20px 50px 28px;
    display: flex; justify-content: space-between;
}
.float-banner .form-wrap .field{width: auto; padding-bottom: 0;
    display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-align: center;-ms-flex-align: center;align-items: center;
}
.float-banner .form-wrap .field .label{margin-right: 16px; padding-bottom: 0; color: var(--white)}
.float-banner .form-wrap .field + .field{margin-left: 40px; padding-top: 0;}
.float-banner .form-wrap .field .insert{margin-top: 0; width: auto;}
.float-banner .form-wrap .field .insert .select{width: 135px; background-color: var(--white-10); border: none; color: var(--white); caret-color: var(--black);}
.float-banner .form-wrap .field .insert .select option{color: var(--black)}
.float-banner .form-wrap .field .insert .input-text{width: 300px; background-color: var(--white-10); border: none; color: var(--white); caret-color: var(--white);}
.float-banner .form-wrap .field .check-wrap{ display: flex; align-items: center; }
.float-banner .form-wrap .field .check-wrap span{margin-left: 12px; color: var(--white-80);}
/*.float-banner .form-wrap .btn-area{margin-left: 90px;}
.float-banner .form-wrap .btn-area .btn{width: 140px; border-radius: 5px;}*/
.float-banner .form-wrap .btn-area .btn{ position: relative; width: 110px; border-radius: 5px; padding: 0 16px;}

/*.float-banner > .btn-area{width: 270px; padding-top: 26px; padding-right: 60px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;
	-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;
}

.float-banner .btn.today-close{padding-bottom: 3px; color: var(--white); border-bottom: 1px solid var(--white-80); line-height: 1;}
.float-banner .btn.benner-close{color: var(--white); margin-left: 16px;}
.float-banner .btn.benner-close span{display: none;}

*/

@media all and (min-width:1501px) and (max-width:1919px) {
    .float-banner .contact-number{width: 18.750vw;}
    .float-banner .form-wrap{width: calc(100% - 18.760vw); padding-left: 2.604vw; padding-right: 2.604vw;}
    /*.float-banner .form-wrap .field .insert .input-text{width: 20.938vw;}*/
    .float-banner .form-wrap .field .insert .input-text{width: 15.625vw;}
    .float-banner .form-wrap .field + .field{margin-left: 2.083vw; padding-top: 0;}



    /*.float-banner > .btn-area{ padding-right: 3.125vw;}*/

}
@media all and (min-width:1501px) and (max-width:1600px) {
    /*.float-banner .form-wrap .field .insert .input-text{width: 18vw;}*/
    .float-banner .form-wrap .field .insert .input-text{width: 14vw;}
}
@media all and (min-width:1241px) and (max-width:1500px) {
    .float-banner .contact-number{ width: 240px;
        -webkit-box-orient: vertical;-webkit-box-direction: normal;
        -ms-flex-direction: column;flex-direction: column;
    }
    .float-banner .contact-number span{top: 0;}

    .float-banner .form-wrap{width: calc(100% - 17.143vw); padding: 20px 24px 20px;
        align-items: center;
    }
    .float-banner .form-wrap .field + .field{margin-left: 16px; padding-top: 0;}
    /*.float-banner .form-wrap .field .insert .input-text{width: 18.571vw;}*/
    .float-banner .form-wrap .field .insert .input-text{width: 14.125vw;}
    .float-banner .form-wrap .field .check-wrap span{font-size: 15px;}
}

@media all and (max-width:1240px) {

    .float-banner{background-color: var(--blue);}
    .float-banner .pc-contact{ display: none; }
    .float-banner .mo-contact { display: flex;}
    .float-banner .mo-contact :is(ul, li){
        display: flex; align-items: center; justify-content: center;
    }
    .float-banner .mo-contact ul{ width: 100%; height: 100%;}
    .float-banner .mo-contact ul li{flex: 1; position: relative}
    .float-banner .mo-contact ul li + li::before{content: ""; width: 1px; height: 30px; background-color: var(--white); }
    .float-banner .mo-contact ul li a{color: var(--white); font-size: 16px; font-weight: 400;
        display: flex; align-items: center; justify-content: center;
    }
    .float-banner .mo-contact ul li a .ico + span{margin-left: 8px;}

    /*.float-banner{-ms-flex-wrap: wrap;flex-wrap: wrap; height: auto;}
    .float-banner .contact-number{width: 58.4%; height: 96px;}
    .float-banner .form-wrap{width: 41.6%; height: 96px; padding: 24px;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    }
    .float-banner #cs_data_form{width: 100%;}
    .float-banner .form-wrap fieldset{width: 100%;}
    .float-banner .form-wrap .field{display: none;}
    .float-banner .form-wrap .btn-area{width: 100%; margin-left: 0;}
    .float-banner .form-wrap .btn-area .btn{width: 100%; padding: 0 12px;}
    .float-banner > .btn-area{width: 100%; padding: 0px 24px; height: 48px; background-color: var(--black);
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
        -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
    }
    .float-banner .btn.today-close{border-bottom: none;}
    .float-banner .btn.benner-close span{display: block;}
    .float-banner .btn.benner-close .ico{margin-left: 8px;}*/
}

@media all and (min-width:821px) and (max-width:1240px) {
    .float-banner .mo-contact ul li + li::before{position: absolute; left: 0;}
}

@media all and (max-width:820px) {

    /* 240304 스크롤 이벤트 주석
    .scroll-down .float-banner{bottom: -70px;}*/
    .float-banner{height: 70px;}
    .float-banner .mo-contact ul li{flex: none;}
    .float-banner .mo-contact ul li a{font-size: 13px; }
    .float-banner .mo-contact ul li a .ico + span{margin-left: 4px;}
    .float-banner .mo-contact ul li + li::before{height: 10px; margin: 0 5.067vw;}


    /*.scroll-down .float-banner{bottom: -72px;}
    .float-banner .contact-number,
    .float-banner .form-wrap{height: 72px;}
    .float-banner #cs_data_form{width: auto;}
    .float-banner .contact-number{
        -webkit-box-orient: vertical;-webkit-box-direction: normal;
        -ms-flex-direction: column;flex-direction: column;
    }
    .float-banner .contact-number *{line-height: 1;}
    .float-banner .contact-number span{font-size: 14px;}
    .float-banner .contact-number a{padding-top: 2px; padding-left: 0;}

    .float-banner .form-wrap{padding-top: 0; padding-bottom: 0;
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
    }

    .float-banner .btn.today-close,
    .float-banner .btn.benner-close span{font-size: 15px;}
    .float-banner .btn.benner-close .ico{width: 15px; height: 15px; background-size: cover;}*/
}


.introduce.business-field.list .content-primary{overflow: hidden;}

/* 상담신청버튼 로딩바 */
.float-banner .form-wrap .btn-area #save_date{    display: inline-flex;
    align-items: center;
    justify-content: center;}
.btn-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    position: absolute;
    display: none; /* 기본적으로 숨김 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-text {
    display: inline-block;
}