@charset "utf-8";

/********************
** 메인배너
********************/
.mainBanner{background:url('/img/mainBanner.jpg'); background-size:cover; background-position:center; }
.mainBottom{bottom:0;}

/********************
** why
********************/
.why{background:url('/img/whyBg.jpg'); background-size:cover;}
.whyBox{overflow:hidden; display:grid; grid-template-columns: repeat(3 ,1fr);}
.whyBox img{object-fit: cover;}

/********************
** service
********************/
.serviceBox img{object-fit: cover;}

/********************
** BENEFIT
********************/
.benefit{background: linear-gradient(to bottom, #26272B, #222E59);}
.benefitService{overflow:hidden; display:grid; grid-template-columns: repeat(3 ,1fr);}
.benefitService2{background: linear-gradient(to bottom, #2A3F7E, #3156C4);}
.benefitService2_left{border-right:1px solid #3156C4;}


/********************
** table
********************/
.filter_btn {    cursor: pointer;    transition: background-color 0.3s, color 0.3s;    flex: 1;    background:none;  }
.filter_btn.active {    background-color: #fff;    color: #2E479F;    box-shadow: 0 0px 8px #9EC5F2;}
/* 테이블 공통 스타일 */
.content_block {    width: 100%;   display: none;}
.content_block.active {    display: table;}
.data_table th, td{vertical-align: middle; text-align: center;}
/* --- 각 테이블별 너비 설정 --- */
/** 메트리스 **/
#table_mattress td:nth-child(1) { width: 22%; }
#table_mattress td:nth-child(2) { width: 26%; }
#table_mattress td:nth-child(3) { width: 26%; }
#table_mattress td:nth-child(4) { width: 26%; }
#table_mattress td, th{border:1px solid #9EC5F2;}
#table_mattress td:nth-child(1), th:nth-child(1){border-left:none;}
#table_mattress td:last-child, th:last-child{border-right:none;}

/** 소파 **/
#table_sopa td:nth-child(1) { width: 22%; }
#table_sopa td:nth-child(2) { width: 26%; }
#table_sopa td:nth-child(3) { width: 26%; }
#table_sopa td:nth-child(4) { width: 26%; }
#table_sopa td, th{border:1px solid #9EC5F2;}
#table_sopa td:nth-child(1), th:nth-child(1){border-left:none;}
#table_sopa td:last-child, th:last-child{border-right:none;}

/** 카페트 **/
#table_carpet th:nth-child(1), #table_carpet td:nth-child(1) { width: 20%; }
#table_carpet th:nth-child(2), #table_carpet td:nth-child(2) { width: 40%; }
#table_carpet th:nth-child(3), #table_carpet td:nth-child(3) { width: 40%; }
#table_carpet td, th{border:1px solid #9EC5F2;}
#table_carpet td:nth-child(1), th:nth-child(1){border-left:none;}
#table_carpet td:last-child, th:last-child{border-right:none;}

/** 에어컨 **/
#table_air td:nth-child(1) { width: 20%; }
#table_air td:nth-child(2) { width: 20%; }
#table_air td:nth-child(3) { width: 30%; }
#table_air td:nth-child(4) { width: 30%; }
#table_air td, th{border:1px solid #9EC5F2;}
#table_air td:nth-child(1), th:nth-child(1){border-left:none;}
#table_air td:last-child, th:last-child{border-right:none;}
/** 에어컨 **/
#table_cleaning td:nth-child(1) { width: 20%; }
#table_cleaning td:nth-child(2) { width: 20%; }
#table_cleaning td:nth-child(3) { width: 30%; }
#table_cleaning td:nth-child(4) { width: 30%; }
#table_cleaning td, th{border:1px solid #9EC5F2;}
#table_cleaning td:nth-child(1), th:nth-child(1){border-left:none;}
#table_cleaning td:last-child, th:last-child{border-right:none;}


/********************
** faq
********************/
.faq_answer {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.4s ease-in-out;opacity: 0;}
.faq_question{border-radius:8px 8px 8px 8px;}

.faq_item.active .faq_question{ border-radius: 8px 8px 0 0;}
.faq_item.active .faq_answer {max-height: 500px;padding: 0 32px 32px 32px;opacity: 1;background:#fff;border-radius: 0 0 8px 8px;}
.faq_item.active .icon_plus::before {transform: rotate(90deg); }
.icon_plus {position: relative;width: 16px;height: 16px;}
.icon_plus::before, .icon_plus::after {content: '';position: absolute;background-color: #333;transition: transform 0.3s ease-in-out;}

.icon_plus::after {width: 16px;height: 2px;left: 2px;top: 9px;}
.icon_plus::before {width: 2px;height: 16px;left: 9px;top: 2px;}


/********************
** qa
********************/
.form_label {display: block;}
.input_base, .textarea_base {border: 1px solid #91949F;transition: border-color 0.3s;}        
.input_base:focus, .textarea_base:focus {outline: none;border-color: #2E479F;}
.textarea_base {min-height: 150px;resize: vertical;}

/* 상담 유형 라디오 버튼 그룹 */
.type_btn_group { display: grid; grid-template-columns: repeat(3,1fr);}
.type_radio_hidden {display: none;}
.type_btn { cursor: pointer;transition: background-color 0.3s, color 0.3s, font-weight 0.3s;}
.type_radio_hidden:checked + .type_btn {background-color: #343a40;color: #fff;font-weight: 700;}

/* 파일 업로드 커스텀 */
.file_upload_wrapper {border:1px solid #91949F;}
    .file_upload_wrapper .file_input_hidden {display: none;}
.file_upload_wrapper .file_btn {cursor: pointer;white-space: nowrap;}

/* 주소 검색 */
.address_group { display: flex; gap: 8px; }
.address_group input { flex-grow: 1; }
.address_group button {flex-shrink: 0;border: none;cursor: pointer;}

/* 날짜 선택 커스텀 */
.date_wrapper { position: relative; }
.date_wrapper .date_icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);pointer-events: none;}        
input[type="date"]::-webkit-calendar-picker-indicator {display: none;}

/* 커스텀 체크박스 (이미지 기반) */
.policy_check {display: flex;align-items: center;gap: 12px;cursor: pointer;}
.policy_check input[type="checkbox"] {display: none;}
.custom_checkbox {width: 20px;height: 20px;background-image: url('/img/chkOff.svg');background-size: contain;background-repeat: no-repeat;background-position: center;transition: background-image 0.2s ease-in-out;}
.policy_check input[type="checkbox"]:checked + .custom_checkbox {background-image: url('/img/chkOn.svg');}

/* 숨김 처리용 클래스 */
.hidden { display: none; }


/***********************
** login
***********************/
.login{background:url('/img/mainBanner.jpg'); background-size:cover; background-position:center;}

/***********************
** contactList
***********************/
.contactLists th,
.contactLists td{border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactLists{border-collapse: collapse;}
.contactLists th:last-child,
.contactLists td:last-child{border-right: 0;}
.contactLists td{vertical-align: middle; text-align: left;}
.borderleftno {text-align: center !important;}

/***********************
** contactView
***********************/
.contactView th,
.contactView td {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactView{border-collapse: collapse;}
.contactView th:last-child,
.contactView td:last-child{border-right: 0;}
.undLineTxt {text-decoration: underline;}
.contactListBtn {border:1px solid #D9DADE;}