.mt10{margin-top:10px}

/* .notify{background-color: #f5f5f5; padding:20px; text-align: center;} */
.notify{padding:30px; text-align: center; background-color: #f8fbfd; border-top: 1px solid #6A9DCD;
    border-bottom:3px solid #6A9DCD; margin-bottom: 60px; }
.notify .chip{ background-color: #036EB8; color:#fff; font-size: 0.938rem; padding: 4px 12px;}
.notify p{ text-align: center; color:#263849; font-size: 1.5rem; font-weight: 700; margin:12px 0}
.notify span{ color:#AEAEAE; font-size: 0.875rem;}


.gridbox{ display: grid; grid-template-columns: 1fr 1fr; gap:30px; margin-bottom: 30px;}
.gridbox > .text-field{margin-bottom: 0;}

.section-title{display: flex; justify-content: space-between; border-bottom: 1px solid #E8E8E8; padding-bottom: 22px; margin: 40px 0 30px ;}
.section-title > h2{font-size: 1.5rem; font-weight: 700;}
.section-title > ol li{ display: inline-block; width: 24px; height: 24px; padding: 5px 8px; font-size: 0.875rem; margin-left: 4px;}
.section-title > ol li.active{background-color: #263849; color:#fff; font-weight: 700;}

.fieldset-title{display: flex; align-items: center; justify-content: space-between; margin-bottom:30px;}
.fieldset-title .title{margin-bottom: 0;}
.text-field{ margin-bottom: 20px;}
.text-field label{ display:block; color:#666; font-size: 0.938rem; font-weight: 500; margin-bottom: 10px;}
.text-field input,
.text-field textarea{  display:block; width: 100%; font-size: 0.938rem; border: 1px solid #e8e8e8; padding: 10px 12px; cursor: auto;}
.text-field input::placeholder,
.text-field textarea::placeholder{ color: #B2B6BA;}
.label-wrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.label-wrap label{ margin-bottom: 0;}
.label-wrap .label-info{color:#AEAEAE; font-size: 0.813rem;}
.helptext{font-size: 0.75rem; color:#ff0000;}

.outlinebox{ border: 1px solid #E8E8E8; padding:30px; margin-top:50px}
.outlinebox .outline-title{ font-size: 1.125rem; font-weight: 700; margin-bottom: 20px;}
.outlinebox ol{ list-style:decimal; margin-left: 1rem; font-size: 0.875rem; color:#666666;}
.outlinebox ol li{margin-bottom: 6px; line-height: 1.5;}

.actionbox{ display: flex; flex-direction: column; padding:20px 0;}
.actionbox .custom-checkbox{ margin-left:  auto; padding-bottom: 10px;}
.actionbox .button-style{ margin-left:  auto; margin-top: 20px;}

.apply-form-title{margin-top: 20px;}

.apply-form > fieldset{ margin-bottom: 40px;}

.radiogroup label{ margin-right: 40px;}

.innerbox > p{font-size: 0.875rem; font-weight: 400; color:#111; margin-bottom: 10px;}
.innerbox .innerbox-fieldset{ background-color: #F5F5F5; padding: 20px;}
.innerbox textarea{ background-color: #fff;}
.innerbox .text-field-header{ display: flex; align-items: center; gap:10px;;}
.innerbox .btn-label{ font-size: 0.813rem; color:#666666; background-color: #fff;padding:1px 8px; border: 1px solid #D2D2D2; border-radius: 50px; margin-bottom: 10px;}
.innerbox .btn-label:hover{ box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); font-weight: 600;}
.innerbox .btn-label.btn-checked{background-color: #333; color:#fff;border-color: #333;}
.innerbox .btn-label img{padding-right:4px}
.innerbox .togglebox {padding:10px 14px; background-color: #eee;margin-bottom: 10px; font-size: 0.938rem;}
.innerbox .togglebox > p{ color:#333; margin-bottom: 10px;}
.innerbox .togglebox > button{ display: block; margin-left: auto; font-size: 0.875rem; font-weight: 300; color:#fff; background-color: #036EB8; padding:4px 32px;}
.innerbox .togglebox > button:hover{background-color: #025997;}

.button-group{ display: flex; justify-content: flex-end; gap:20px}

.addbox{ display: flex; align-items: center; justify-content: space-between; padding: 10px; color: #333; font-size: 0.938rem; font-weight: 500; background-color: #fafafa;}

.confirm-title small{font-size: 0.875rem; color:#666; line-height: 1.75;}
.confirmbox{width: 420px; margin: 60px auto 80px; }
.confirmbox .button-style {width: 100%; margin-top: 20px;}

.table-confirm *{ text-align: center;}
.table-confirm button{padding:6px 24px; font-size: 0.875rem;}

.spinner {  width: 40px;  height: 40px;  border: 4px solid #e8e8e8; border-top: 4px solid #036EB8; border-radius: 50%; animation: spin 1s linear infinite;}

.popup-wrap{ width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0, 0, 0, 0.6); display:none; }
.popup-box{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.popup-body{ width:100%; max-width:400px; background-color:#FFF; border-radius:10px; box-shadow:1px 1px 6x 1px rgb(0 0 0 / 15%); padding:40px; }
.popup-text{ font-size:1.125rem; font-weight:500; color:#333; text-align:center; line-height: 1.25;}
.popup-btn{ display: flex; align-items: center; justify-content: center;margin-top: 30px;}
.popup-btn .button-style{ font-size: 0.938rem; padding: 12px 42px;}

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


/* 소형 모바일 */
@media (max-width: 479px) { 
    .gridbox{ grid-template-columns: 1fr; margin-bottom: 0;}
    .outlinebox{ margin-top: 0;}
    .actionbox{padding-bottom: 0;}

    .fieldset-title{ flex-direction: column; align-items: flex-start;}
    .fieldset-title .title{ margin-bottom: 10px;}

    .actionbox .button-style{ width: 100%;}
    .button-group > button { width: 50%;}
    
    .radiogroup label{margin-right: 20px;}

    .innerbox .innerbox-fieldset{ padding:10px}
    .innerbox > p{margin-top: 20px;}

    .confirm-title {flex-direction: column; margin-top: 0;}
    .confirm-title h2{margin-bottom: 10px;}
    .confirm-title small{ line-height: 1.25;}
    .confirmbox{ width: 100%;}

    .table-confirm button{padding:6px 12px;}

    .popup-body{width: 90%;}
    
    .mmt30{margin-top: 30px;}
}

/* 모바일 */
@media (min-width: 480px) and (max-width: 767px) { 
    .gridbox{ grid-template-columns: 1fr; margin-bottom: 0;}
    .outlinebox{ margin-top: 0;}
    .actionbox{padding-bottom: 0;}

    .actionbox .button-style{ width: 100%;}
    .button-group > button { width: 50%;}
    
    .innerbox .innerbox-fieldset{ padding:10px}
    .innerbox > p{margin-top: 20px;}

    .confirm-title {flex-direction: column; margin-top: 0;}
    .confirm-title h2{margin-bottom: 10px;}
    
     .mmt30{margin-top: 30px;}
    }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { 
    .mmt30{margin-top: 30px;}
}

/* PC (1024~1200) */
@media (min-width: 1024px) and (max-width: 1200px) { 
  
   
}

/* 대형 화면 (1200 이상)*/
@media (min-width: 1201px) {

 }