.text-box h1{color:#333;font-size:4rem;font-weight:700;}
.text-box h2{color:#333;font-size:3.25rem;font-weight:700;}
.text-box h4{color:#333;font-size:1.875rem;font-weight:700;}
.text-box p{color:#727272;font-size:1.125rem;margin-bottom:0;}

.text-box.white h2{color:#fff;}
.text-box.white h4{color:#fff;}
.text-box.white p{color:#fff;}

.submit-btn{position: relative;overflow: hidden; color: #fff;border: none;display: flex !important;align-items: center;justify-content: space-between;padding: 0.8rem 1rem;height: 50px;width: 100%;max-width: 160px;transition: 0.6s !important;}
.submit-btn input{position: absolute;top:0;bottom:0;right:0;left:0;opacity: 0;}
.submit-btn span{font-size:1rem;font-weight:500;}

.form-field{height:65px;display:flex;background:#fff;border-radius: 6px;border:1px solid transparent;transition: 0.3s;overflow: hidden;}
.form-field .form-label {width:20%;padding: 0 1.5rem;font-size: 1.125rem;color:#333;font-weight: 600;display: inline-flex;align-items: center;margin-bottom: 0;border-right: 1px solid rgb(205 203 203 / 25%);}
.form-field .form-input{padding:0 2rem 0 1.5rem;height:100%;border:none;background:#fff;color:#333;font-size:1rem;width: calc(80% + 1.5rem);}
.form-field .form-input::placeholder{color:#9CA3AF;opacity: 0.7;}
.form-field .form-input:focus{outline: none;  /* 포커스시 나타나는 점선 테두리 제거 */-webkit-appearance: none; /* 웹킷 브라우저의 기본 스타일 제거 */box-shadow: none; /* 기본 포커스 효과의 그림자 제거 */}
.form-field.active{border-color:var(--primary);}
.form-field.form-textarea{height:180px;}
.form-field.form-textarea .form-label{align-items: flex-start;padding:1.2rem 2rem;border-right: 1px solid rgba(255, 255, 255, 0.03);}
.form-field.form-textarea .form-input{padding:1.2rem 2rem 1.2rem 1rem;}

.check-field{margin-top:16px;background:#fff; width:100%;padding:10px 10px 10px 15px;height:60px;display:inline-flex;justify-content:space-between;align-items:center;border-radius: 6px;}
.custom-checkbox {position: relative;user-select: none;line-height: 1;}
.custom-checkbox label{font-size:1.05rem;color:#666;display: inline-flex;align-items:center;cursor: pointer;text-align:left;line-height:1.2;}
.custom-checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {margin-right:8px;position: relative;display: inline-block;height: 24px;width: 24px;background-color: white;border-radius: 50%;border: 1px solid #ccc;}
.checkmark .material-icons {position: absolute;color: #000;font-size: 18px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.custom-checkbox input:checked ~ .checkmark {background-color: var(--primary);border-color: transparent;}
.custom-checkbox input:checked ~ .checkmark .material-icons {display: block;color: white;}

ul.list-type li{position: relative;margin-bottom:2px;}
ul.list-type li:last-child{margin-bottom:0;}
ul.list-type li::after {content: '';width: 4px;height: 4px;background: #666;position: absolute;top: 11px;left: 0;border-radius: 100px;}
ul.list-type li p{padding-left:11px;}

.bg-image{background-position: center;background-repeat: no-repeat;background-size: cover;}
.border-radius{border-radius: 20px;overflow: hidden;}

.form-box .d-grid {grid-template-columns: repeat(2, 1fr);gap: 16px;}
.content-box{background:#f1f4fb;padding:2rem;border-radius:20px;width:100%;}
body small{display: block;margin-top:4px;}

.desktop{display: block;}
.mobile{display:none;}


/***************** sec01 *****************/
#section1 {background:#f3f5f7;position: relative;width:100%;height:100%;overflow: hidden;}
.sec01-pt-wrap .text-box h4{font-weight:400;line-height: 1.4;}

.sec01-pt-wrap{align-items: center;}
.sec01-pt{width:50%;}
.sec01-pt h3{font-weight:400;line-height: 1.4;word-break: keep-all;}
.sec01-pt h3 span{font-weight:700;color:var(--primary);}
.sec01-pt .image{padding-left:80px;}


/***************** sec02 *****************/
#section2{background:var(--primary);position: relative;}

.sec02-pt-wrap{grid-template-columns: repeat(2, 1fr);gap:1rem;margin-bottom: 1rem;}
.sec02-pt {align-items: flex-start;}
.sec02-pt .image{width:55px;height:55px;margin-right:20px;box-shadow: 5px 5px 10px 1px rgba(161, 161, 161, 0.15);border-radius: 100px;}
.sec02-pt .image img {display: block;object-fit: cover;height: auto;min-width: 55px;}

#section2 .sec02-pt-wrap p{display:block;margin-top:8px;margin-bottom: 0;}
#section2 .sec02-pt-wrap h6{margin-bottom: 0;}

#section2 h4.warning{line-height:1.5;}


/***************** subpage *****************/
.debtor{margin-top:50px;}
.debtor .debtor-pt{text-align:left;}

.debtor-sec01 .text-box{background:#F1F3F8;}

.debtor-sec02 .form-box{background: #ecf5fe;}
.debtor-sec02 .submit-btn{margin-top:1.4rem;}

.tb-group{flex: 1;overflow-y: auto;max-height: calc(65vh - 90px);}
.privacy-box {padding:1rem;text-align:left;background: #F1F3F8;flex: 1;overflow-y: auto;max-height: calc(65vh - 90px);}


#debtor-form-result table th,#debtor-form-result table td{padding:0.8rem;text-align: left;}
#debtor-form-result table th{background:#F1F3F8;border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-right: none;}
#debtor-form-result table td{padding: 0.8rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}


.debtor-info{background: #f1f3f5;}
.debtor-info .slideBox-wrap{background:#fff;}
.debtor-info .slideBox-wrap:hover h5{color:var(--primary);}
.debtor-info .slideBox-wrap .slideToggle{cursor: pointer;display:flex;align-items:center;justify-content:space-between;}
.debtor-info .slideBox-wrap .slideToggle.active{}
.debtor-info .slideBox-wrap .slideToggle.active h5{color:var(--primary);}
.debtor-info .slideBox-wrap .slideToggle h5{font-weight: 600;margin-bottom:0;}
.debtor-info .slideBox-wrap .slideToggle i{font-size: 1rem;}

.debtor-info .slideBox-wrap .slideBox{display:none;margin-top: 1rem;border-top:1px solid transparent;}
.debtor-info .slideBox-wrap .slideBox.active{border-top:1px solid #ddd;cursor: default !important;pointer-events: none !important;}
.debtor-info .slideBox-wrap .slideBox h6{font-size:1.125rem;margin-bottom:8px;}
.debtor-info .slideToggle .material-icons {font-size:2rem;transition: transform 0.3s ease;}
.debtor-info .slideToggle.active .material-icons {transform: rotate(180deg);}


/***************** responsive *****************/



@media screen and (max-width: 1200px) {
    /* 일반 */
    .text-box h1 { font-size: 3.5rem; }
    .text-box h2 { font-size: 3rem; }
}

@media screen and (max-width: 1024px) {
    /* 일반 */
    .text-box h1 { font-size: 3rem; }
    .text-box h2 { font-size: 2.5rem; }
    .text-box h4 { font-size: 1.75rem; }
    .text-box p { font-size: 1rem; }

    .debtor-form .form-box .d-grid{grid-template-columns: repeat(1, 1fr);gap:12px;}
    .check-field{margin-top:12px;}
}

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

    /* 섹션 01 */
    .sec01-pt-wrap{flex-flow: column;}
    .sec01-pt{width:100%;}
    .sec01-pt .image{padding-left: 0;margin-top: -80px;}
    .sec01-pt.pt-lf {order: 1;}
}

@media screen and (max-width: 768px) {
    .desktop{display:none;}
    .mobile{display: block;}

    /* 일반 */
    .text-box h1 { font-size: 2.5rem; margin-bottom: 1rem !important;}
    .text-box h2 { font-size: 2.25rem; }
    .text-box h4 { font-size: 1.5rem; }

    body small{font-size:0.75rem;}
    body .btn{font-size: 0.9rem;}

    .content-box{padding:1.2rem;}
    .form-field .form-label{font-size:1rem;padding: 0 1rem;min-width: 115px;}
    .custom-checkbox label{font-size:1rem;}

    .debtor-info .slideBox-wrap .slideBox h6{font-size:1rem;}

    /* 섹션 02 */
    .sec02-pt-wrap{grid-template-columns: repeat(1, 1fr);}

    #debtor-form-result table th,#debtor-form-result table td{font-size:1rem;}
}

@media (max-width: 480px) {
    /* 일반 */
    .text-box h1 { font-size: 2rem; }
    .text-box h2 { font-size: 1.5rem; }
    .text-box h4 { font-size: 1.25rem; }
    .text-box p { font-size: 0.9rem; }

    ul.list-type li::after{top:7px;}
    /* 섹션 01 */
    .sec01-pt .image{margin-top:0;}
}

@media (max-width: 430px) {
    /* 일반 */
    .text-box h1 { font-size: 1.8rem; }
    .text-box h2 { font-size: 1.4rem; }
    .text-box h4 { font-size: 1.1rem; }
    body h5 { font-size: 1.1rem; }
    .text-box p { font-size: 0.85rem; }

    .submit-btn span{font-size:0.813rem;}
    .form-field .form-label{font-size:0.813rem;min-width: 105px;}
    .form-field .form-input{font-size:0.938rem;padding: 0 1.5rem 0 1rem;}
    .custom-checkbox label{font-size:0.813rem;padding-right:8px;}

    #debtor-form-result table th,#debtor-form-result table td{font-size:0.813rem;}

    .debtor-info .slideBox-wrap .slideBox{margin-top:0.8rem;padding-top: 0.4rem;}
    .debtor-info .slideBox-wrap .slideBox h6{font-size:0.9rem;}

}