@charset "UTF8";

/* content */
.container{padding-top:10rem;}
.page-content{margin-bottom:17rem;}
.page-content.margin-none{margin-bottom:0;}

/* toasts */
.layerPopup { display: none; }
.edu-toast { position: fixed; left: 50%; top: 150px; transform: translate(-50%, -24px); display: flex; align-items: center; gap: 1.5rem; padding:2rem 1.5rem; 
    border-radius: 12px; background:rgb(241, 242, 249, 0.8); color: #000; font-size: 1.8rem;; font-weight: 600; border-radius: 50px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; z-index: 3000; transition: opacity 0.3s ease, transform 0.3s ease; }
.edu-toast img{width:50px;}
.edu-toast.show { opacity: 1; transform: translate(-50%, 0);}
.edu-toast.hide { opacity: 0; transform: translate(-50%, 0); transition: opacity 0.2s ease;}

/* page-type */
.page-type01{max-width: 1320px; margin:0 auto; padding:0 2rem;}
.page-type02{max-width: 1460px; margin:0 auto; padding:0 2rem;}

/* input */
.slashbox{display: flex; align-items: center; width: 100%;}
.slashbox span{color:#787878; margin:0 0.7rem;}
.calendar-input{display: inline-block; position: relative; box-sizing: border-box;}
.calendar-input a{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
.input-type01{font-size: 1.6rem; padding:0 1.5rem; border:1px solid #ccc; border-radius: 5px !important; height:46px; box-sizing: border-box; color:#666; position: relative;}
.textarea-type01{font-size: 1.6rem; padding:1.5rem; border:1px solid #ccc; border-radius: 5px !important; height:280px; box-sizing: border-box; color:#666; resize: none; font-family: 'Pretendard';}

/* select */
select{appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.select-type01{font-size: 1.6rem; padding:0 1.5rem; border:1px solid #ccc; border-radius: 5px !important; height:46px; box-sizing: border-box; color:#666; position: relative;
background: url('/ux/common/images/ico/ico_arrow.png') no-repeat right 12px center #fff; background-size: 12px; padding-right: 30px; }
.select-type02{font-size: 1.8rem; padding:0 1.5rem; border:0; border-bottom:2px solid #000; height:53px; box-sizing: border-box; color:#222; position: relative;
background: url('/ux/common/images/ico/ico_arrow05.png') no-repeat right 12px center #fff; padding-right: 30px; }

/* checkbox */
.checkbox-ul{display: flex; gap:1.8rem; align-items: center; flex-wrap: wrap;}
.checkbox-ul.gap{gap:2rem 6rem;}
.checkbox{font-size:0;}
.checkbox input {display: none;}
.checkbox label {display: inline-flex; align-items: center; gap: 8px; cursor: pointer;}
.checkbox label span{font-size:1.6rem; color:#222;}
.checkbox label span.allagree{font-size:1.8rem; color:#000; font-weight: 500;}
.checkbox label span.allagree span.blue-c02{font-size:1.8rem; font-weight: 500;}
.checkbox label span.total{font-size:1.8rem; color:#222; font-weight: 300;}
.checkbox label span button{text-decoration: underline; font-size:1.6rem; font-family: 'Pretendard';}
.checkbox label span a{text-decoration: underline; font-size:1.6rem; font-family: 'Pretendard';}
.checkbox label::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url('/ux/common/images/btn/btn_check_none.png') no-repeat center / contain;}
.checkbox input:checked + label::before {background: url('/ux/common/images/btn/btn_check.png') no-repeat center / contain;}

.radiobox input {display: none;}
.radiobox label {display: inline-flex; align-items: center; gap: 8px; cursor: pointer;}
.radiobox label span{font-size:1.6rem; color:#222;}
.radiobox label::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url('/ux/common/images/btn/btn_check_none02.png') no-repeat center / contain;}
.radiobox input:checked + label::before {background: url('/ux/common/images/btn/btn_check02.png') no-repeat center / contain;}

.radiobox02 input {display: none;}
.radiobox02 label {display: inline-flex; align-items: center; gap: 8px; cursor: pointer;}
.radiobox02 label span{font-size:1.6rem; color:#222;}
.radiobox02 label::before { content: ''; display: inline-block; width: 24px; height: 24px; background: url('/ux/common/images/btn/btn_check_none04.png') no-repeat center / contain;}
.radiobox02 input:checked + label::before {background: url('/ux/common/images/btn/btn_check04.png') no-repeat center / contain;}
.radiobox02 input:checked + label span.choice{color:#2525ff; font-weight:600;}

/* btn */
.btn-type01{font-size: 1.8rem; padding:1.5rem 6rem; color:#fff; font-weight: 600; border-radius: 30px; display: flex; align-items: center; justify-content: center; background-color: #2525ff;}
.btn-type02{font-size: 1.8rem; padding:1.5rem 6rem; color:#2525ff; font-weight: 600; border-radius: 30px; display: flex; align-items: center; justify-content: center; border:1px solid #2525ff; background-color: #fff;}
.btn-type03{font-size:1.5rem; padding:0.6rem 1.1rem; color:#2525ff; border:1px solid #2525ff; border-radius: 20px; display: inline-block;}
.btn-type04{font-size:1.5rem; padding:0.6rem 1.1rem; color:#222 !important; border:1px solid #222 !important; border-radius: 20px; display: inline-block;}

.position-right{position: absolute; top:0; right:0;}

/* file */
.filebox{display: flex; align-items: center;}
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0;overflow: hidden; border: 0;}
.filebox label{font-size:1.5rem; padding:0.6rem 2rem; color:#222; border:1px solid #222; border-radius: 20px; display: inline-block; cursor: pointer;}
.filebox span{font-size:1.6rem; margin-left:1.5rem; color:#222;}
.file-list{margin-top:3rem; display: flex; flex-direction: column; gap:1.5rem;}
.file-list p{font-size:1.6rem; padding-left:3rem; display: flex; align-items: center; color:#444; font-weight: 300; position: relative;}
.file-list p:after{width:15px; height:18px; background:url('/ux/common/images/ico/ico_file.png')no-repeat center; background-size:100%; position: absolute; top:3px; left:0; content:'';  }
.file-list p button{margin-left:2.5rem;}

/* width */
.w100{width:100%;}
.w140{width:140px;}
.w185{width:185px;}
.w135{width:135px;}
.w240{width:240px;}
.w300{width:300px;}
.w340{width:340px;}
.w380{width:380px;}
.mw240{max-width:240px; width:100%;}

/* block */
.pc-block{display: block;}

/* flexbox */
.flexbox{display: flex; align-items: flex-end; gap:2.5rem;}

/* weight */
.weignt6{font-weight: 600 !important;}
.weignt7{font-weight: 700 !important;}

/* color */
.black-c01{color:#000 !important}
.gray-c01{color:#666 !important}
.blue-c01{color:#4ef6ff !important;}
.blue-c02{color:#2525ff !important;}
.blue-c03{color:#0a90b0 !important;}
.blue-c04{color:#1e31db !important;}
.blue-c05{color:#1c246f !important;}
.blue-c06{color:#2551ff !important;}
.blue-c07{color:#37acc9 !important;}
.red-c01{color:#b00aae !important;}
.red-c02{color:red !important;}

/* search */
.searchbox{position: relative; width: 380px;}
.searchbox input{font-size:1.8rem; padding:1.5rem 4rem 1.5rem 1.5rem; color:#666; border:0; border-bottom:2px solid #000; width: 100%; box-sizing: border-box;}
.searchbox button{position: absolute; top:50%; right:15px; transform: translateY(-50%);}

input.flatpickr-input{
    -webkit-appearance: none;
    appearance: none;
}
/* iOS 기본 비활성 스타일 제거 */
input.flatpickr-input[readonly] {
    -webkit-appearance: none !important;
    appearance: none !important;

    background-color: #fff !important;
    background-image: none !important;

    color: #666 !important;
    -webkit-text-fill-color: #666 !important;

    opacity: 1 !important;
}

/* width 안 먹는 문제 해결 */
.flatpickr-wrapper {
    width: 100% !important;
}

input.flatpickr-input {
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
}

input[readonly] {
    pointer-events: auto; /* 비활성처럼 막히는거 방지 */
}

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

/* toasts */
.edu-toast{padding:5rem 7rem; text-align: center;}

/* block */
.pc-block{display: inline;}

/* flexbox */
.flexbox{flex-wrap: wrap; gap:1rem;}

/* search */
.searchbox{width:100%; order:1; margin-bottom:6rem;}

/* checkbox */
.checkbox-ul.gap{flex-direction: column; gap:2rem; align-items: flex-start;}

/* width */
.w135{width:100%;}
.w140{width:100%;}
.w185{width:100%;}
.w240{width:100%;}
.w340{width:100%;}
.w300{width:100%;}
.mw240{max-width:none; width:100%;}

}

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

/* content */
.container{padding-top:7rem;}
.page-content{margin-bottom:10rem;}

/* toasts */
.edu-toast{font-size:1.5rem; gap:1rem; padding:1.5rem}
.edu-toast img{width:45px;}

/* input */
.calendar-input{width:115px;}
.calendar-input a img{width:18px;}
.input-type01{font-size: 1.4rem; height:44px; padding:0 0.2rem;}
.textarea-type01{font-size:1.4rem; height:200px;}

/* select */
.select-type01{font-size: 1.4rem; height:44px; }


/* checkbox */
.checkbox-ul{gap:2.5rem 2rem;}
.checkbox label span{font-size:1.4rem;}
.checkbox label span button{font-size:1.4rem;}
.checkbox label span a{font-size:1.4rem;}
.checkbox label span.allagree{font-size:1.5rem;}
.checkbox label span.total{font-size:1.5rem;}

.radiobox label span{font-size:1.4rem;}
.radiobox label span button{font-size:1.4rem;}

.radiobox02 label span{font-size:1.4rem;}
.radiobox02 label::before { width: 18px; height: 18px;}

/* btn */
.btn-type01{font-size: 1.5rem; padding:1rem 3rem;}
.btn-type02{font-size: 1.5rem; padding:1rem 3rem;}
.btn-type03{font-size: 1.3rem; padding: 0.6rem 2.2rem;}
.btn-type04{font-size:1.4rem; padding:0.6rem 2.2rem;}

.position-right{position: inherit; top:auto; right:auto;}

/* search */
.searchbox{margin-bottom:3rem;}
.searchbox input{font-size:1.6rem;}
.searchbox button{width:19px;}
.searchbox button img{width:100%; display: block;}

/* file */
.file-list{margin-top:1.5rem; gap:1rem;}
.file-list p button{margin-left:1.5rem;}


}

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

    .btn-type01{font-size: 1.4rem; padding:1rem 2rem;}
    .btn-type02{font-size: 1.4rem; padding:1rem 2rem;}

}