/* input */
input{color:var(--blackColor);}

/* 기본 인풋 */
input[type=text],
input[type=file],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=date],
input[type=time]{border: 2px solid #dddddd; padding:0 10px; height: 50px; font-weight: 500; font-size: 14px; border-radius: 10px;}
::placeholder {font-size:14px;}

textarea:focus,
input[type=text]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=time]:focus{border: 2px solid var(--subColor); }

textarea:disabled,
input[type=text]:disabled,
input[type=file]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
input[type=date]:disabled,
input[type=time]:disabled{background: #f1f1f1;}

textarea:read-only,
input[type=text]:read-only,
input[type=file]:read-only,
input[type=password]:read-only,
input[type=email]:read-only,
input[type=number]:read-only,
input[type=search]:read-only,
input[type=date]:read-only,
input[type=time]:read-only{background: #f1f1f1;}

/* select box */
.select_box{border: 2px solid #dddddd; position:relative; display:inline-block; border-radius: 10px;  height: 50px; line-height: 47px;}
.select_box > select{width:100%; height:100%; font-weight: 500; font-size: 14px; z-index: 1; padding:0 35px 0 10px; position:relative;cursor:pointer;}
.select_box:after{content: "\e942"; font-family: 'xeicon'; position:absolute; top:50%; right:10px; font-size:2rem; width:2rem; text-align: center; transform:translateY(-50%); color:#777777;}
.select_box:has(select:hover){border: 2px solid var(--subColor);}

/* checkbox, radio*/
.checkbox, .radioBox{display:inline-block; width: auto !important;}

.checkbox > input{display:none;}
.checkbox > label{display:flex; align-items: center; cursor: pointer;}
.checkbox > label > .styledBox{width:20px; height: 20px; border: 2px solid #bbb;  border-radius: 3px; display:inline-block; position:relative;}
.checkbox > label > .styledBox.disabled{background:#bbb; cursor:defalut;}

.checkbox > label > .styledBox:after{content: "\e929"; display: inline-block; font-family: 'xeicon'; color:#ddd; font-size:2rem; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.checkbox > label > .styledBox + span{margin-left:8px; font-weight: 500; font-size: 1.4rem; color:var(--textColor);}
.checkbox > input[type=checkbox]:checked + label > .styledBox{background-color: var(--mainColor); border:0px;}
.checkbox > input[type=checkbox]:checked + label > .styledBox:after{color:#fff;}
.checkbox + .checkbox{margin-left:10px}

.radioBox > input{display:none;}
.radioBox > label{display:flex; align-items: center; cursor: pointer;}
.radioBox > label > .styledBox{width:20px; height: 20px; border: 2px solid #bbb;  border-radius: 50%; display:inline-block; position:relative;}
.radioBox > label > .styledBox:after{content: "\e929"; display: inline-block; font-family: 'xeicon'; color:#ddd; font-size:2rem; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.radioBox > label > .styledBox + span{margin-left:8px; font-weight: 500; font-size: 1.4rem; color:var(--textColor);}
.radioBox > input[type=radio]:checked + label > .styledBox{background-color: var(--mainColor); border:0px;}
.radioBox > input[type=radio]:checked + label > .styledBox:after{color:#fff;}
.radioBox + .radioBox{margin-left:10px}

.radioBox.type2 > label > .styledBox{display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.radioBox.type2 > label > .styledBox:after{content: ""; width:9px; height:9px; border-radius: 50%; display: inline-block; background:#dddddd; position: static; transform:none;}
.radioBox.type2 > label > .styledBox + span{margin-left:8px; font-weight: 500; font-size: 1.4rem; color:var(--textColor);}
.radioBox.type2 > input[type=radio]:checked + label > .styledBox{background-color: var(--mainColor); border:0px;}
.radioBox.type2 > input[type=radio]:checked + label > .styledBox:after{background:#fff;}

/* 버튼형 라디오 */
.tabRadio{display: flex;}
.tabRadio label{border: 2px solid #dddddd; width:50%; display: inline-block; height: 50px; line-height: 50px; padding: 0 10px; background: #f1f1f1; color: #111; font-size: 16px; font-weight: 500; text-align: center; cursor: pointer;}
.tabRadio label:first-of-type{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.tabRadio label:last-of-type{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.tabRadio input[type=radio]:checked + label{background: #dfebff; border:2px solid var(--mainColor);}
.tabRadio input[type=radio]{display: none;}


.tabRadio.type2{background:#f1f1f1; border-radius: 20px; padding:5px; display:flex; max-width: 450px; margin:0 auto; width: auto;}
.tabRadio.type2 label{width:calc(100% / 4); font-weight: 500; display: inline-block; height: auto; line-height: 1; padding: 10px 10px; color: #777777; font-size: 14px; text-align: center; cursor: pointer; border:2px solid rgba(0,0,0,0); border-radius: 20px;}
.tabRadio.type2 input[type=radio]:checked + label{background: #fff; border:2px solid #111; color:#111;}
.tabRadio.type2 input[type=radio]{display: none;}

.tabRadio.type3{background:#f1f1f1; border-radius: 20px; padding:5px; display:flex; margin:0 auto; width: auto;}
.tabRadio.type3 label{width:calc(100% / 6); font-weight: 500; display: inline-block; height: auto; line-height: 1; padding: 10px 10px; color: #777777; font-size: 14px; text-align: center; cursor: pointer; border:2px solid rgba(0,0,0,0); border-radius: 20px;}
.tabRadio.type3 input[type=radio]:checked + label{background: #fff; border:2px solid #111; color:#111;}
.tabRadio.type3 input[type=radio]{display: none;}

.tabRadio.dap2 label{width:50%;}
.tabRadio.dap3 label{width:calc(100% / 3);}
.tabRadio.dap6 label{width:calc(100% / 6);}

/* 버튼형 체크박스 */
.tabChkbox{display: flex;}
.tabChkbox label{display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 14px; border: 1px solid #dfe2ed; border-left: 0; text-align: center;}
.tabChkbox input[type=checkbox] + label{margin-right: 0;}
.tabChkbox input[type=checkbox]:checked + label{background: #fff; color: var(--subColor);}
.tabChkbox input[type=checkbox]{display: none;}
.tabChkbox label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabChkbox label:last-of-type{border-radius: 0 4px 4px 0;}

/* 달력 */
.datePicker{display: inline-block; border-bottom: 1px solid #ddd; position: relative;}
.datePicker > input{font-size:14px; border: 0px; width:100%; height: 40px; padding:0 5px; z-index: 1; position: relative;}
.datePicker > input::placeholder{font-size:14px;}
.datePicker > input:focus{border:0px;}
.datePicker > .dateBtn{width:20px; position:absolute; right:0px; top:50%; transform: translateY(-50%); z-index: 0;}
.datePicker > .dateBtn::after{content: "\e9a0"; font-family: 'xeicon'; display: inline-block; color:var(--mainColor); font-size:20px;}

/* file */
.fileBox{display:flex;}
.fileBox input[type=file]{display: none;}
.fileBox input[type=text]{width:auto; flex: 1; margin-right:5px;}
.fileBox label{cursor:pointer; border-radius: 10px; padding: 0 20px; height: 50px; line-height: 50px; font-size: 1.4rem; background:#111; color:#fff; border:2px solid #111;}

.fileBox.multi > .fileWrap{width:auto; flex: 1; margin-right:5px; border: 2px solid #dddddd; background: #f1f1f1; padding:0 10px; height: 50px; font-weight: 500; font-size: 14px; border-radius: 10px; display: flex; align-items: center; overflow-x: auto;}
.fileBox.multi > .fileWrap > .filelist{display:flex; align-items: center;}
.fileBox.multi > .fileWrap > .filelist > .file{flex-shrink:0; display:inline-block; background:#fff; border:1px solid #111; border-radius: 5px; color:#111; padding:5px 10px; display: flex; align-items: center;}
.fileBox.multi > .fileWrap > .filelist > .file > .delBtn{font-size:0px; cursor: pointer; margin-left:5px;}
.fileBox.multi > .fileWrap > .filelist > .file > .delBtn:After{content: "\e921"; font-family: 'xeicon'; display:inline-block; font-size:14px;}
.fileBox.multi > .fileWrap > .filelist > .file + .file{margin-left:10px;}
.fileBox.multi > .fileWrap > .filelist > span{color:#777;}

.fileBox.multi > .fileWrap::-webkit-scrollbar{
    height:5px;
}

.fileBox.multi > .fileWrap::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius: 5px;
}

.fileBox.multi > .fileWrap::-webkit-scrollbar-track{
    background:#ddd;
}

/* textArea */
.textAreaWrap{border:2px solid #dddddd; background:#fff; border-radius: 10px; overflow: hidden;}
.textAreaWrap > textarea{border:0px; width:100%; padding:10px; font-size:16px; margin-bottom:-3px;}
.textAreaWrap > .infoArea{background:#f1f1f1; text-align: right; padding:15px 10px; font-size:12px;}
.textAreaWrap > .infoArea > span + span::before{content: '/'; padding:0 5px;}

.textAreaWrap:has(textarea:focus){border: 2px solid var(--subColor);}

/* 버튼 */
button:disabled{
    cursor:default;
    background: var(--textColor);
    color: var(--iconColor);
    border-color: var(--textColor);
}

.btn{text-align: center; display: inline-block; position: relative; font-weight: 500; cursor: pointer;}
.btn.newType{box-sizing: content-box;}
.btn.sizeSS{padding: 0 25px; height: 40px; line-height: 40px; font-size: 1.4rem; border-radius: 7px;}
.btn.sizeS{padding: 0 20px; height: 50px; line-height: 50px; font-size: 1.4rem; border-radius: 10px;}
.btn.sizeM{padding: 0 20px; height: 52px; line-height: 52px; font-size: 1.8rem; border-radius: 10px;}

button.sizeSS,
button.sizeS,
button.sizeM{line-height:0 !important;}

.btn.sizeM .icon{margin-right:8px; vertical-align: middle;}

.btn.sizePop1{width: 100%;}
.btn.sizePop2{width: 50%;}
.btn.sizePop3{width: 33.33%;}

.btn.bgMain{background: var(--mainColor); color: #fff; border:none; border:2px solid var(--mainColor);}
.btn.bgMain:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgMain:disabled:hover{box-shadow: none;}

.btn.bdGray{background: #fff; color: #111; border:2px solid #ddd;}
.btn.bdGray:disabled{background: #dfe2ed; color: #c3c6cf;}

.btn.bgGray{background: #111; color: #fff; border:2px solid #111;}
.btn.bgGray:disabled{background: #dfe2ed; color: #c3c6cf;}

/* tabBtn */
.tabBtnArea{background: #fff; color: #111; border:2px solid #ddd; border-radius: 10px; height:50px; box-sizing:border-box; display:flex; align-items:center;}
.tabBtnArea > button{padding: 0 20px; height: 50px; line-height: 50px; font-size: 1.8rem; box-sizing:border-box;}
.tabBtnArea > button + button{border-left:1px solid #ddd;}
.tabBtnArea > button:not(:last-child){border-right:1px solid #ddd;}

/* toggle버튼 */
.toggleInput {position: relative;}
.toggleInput input {display: none;}
.toggleInput input:checked + label:before {transform: translateY(-50%) translateX(20px);}
.toggleInput label{position: absolute; cursor: pointer; top: 3px; left: 4px; right: 0; bottom: 0; height: 12px; width: 24px; background: #FFF; box-shadow: 0px 0px 4px rgba(0, 86, 137, 0.4); border-radius: 99px;}
.toggleInput label:before {border-radius: 50%; position: absolute; content: ""; height: 16px; width: 16px; left:-4px; top: 50%; transform: translateY(-50%); background: var(--mainColor); transition: all 0.5s;}
.toggleInput input:checked + label{background: var(--subColor);}
.toggleInput input:disabled + label::before{background: #dfe2ed;}
.toggleInput input:disabled + label{background: #f4f6fc;}
.toggleInput span{font-weight: 500; font-size: 1.4rem; display: inline-block; margin-left:40px;}

/* - 페이지 로딩 처리 - */
body.loading:after {font-family:"xeicon"; content: "\ec34"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    position:fixed; top:50%; left:50%; width:50px; height:50px; line-height:50px; font-size:4.4rem; padding:5px; z-index:1000; transform:translate(-50%, -50%);
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background:#fff; color:#2d3845; overflow:hidden; text-align: center;
    animation: spin 1.5s linear infinite;
    will-change: transform, opacity;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
}

body.loading:before {display:block; position:fixed; background:rgba(0,0,0,0.2); top:0px; left:0px; right:0px; bottom:0px; z-index:999; content:''; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* - @페이지 로딩 처리 - */

/* 페이징 */
.paging_wrap{font-size: 0; display:flex; justify-content: center; align-items: center; margin-top:50px;}
.paging_wrap a{width: 30px; height: 30px; border-radius: 50%; line-height: 30px;  display: inline-block; font-size: 16px; margin: 0 3px; text-align: center; color: #777777; background:#f1f1f1;}

.paging_wrap .prev,
.paging_wrap .prev_all,
.paging_wrap .next,
.paging_wrap .next_all{width: 30px; height: 30px; border-radius: 50%; display:inline-block; cursor: pointer; margin: 0 3px; text-align: center; color: #777777; background:#f1f1f1;}

.paging_wrap .prev:after,
.paging_wrap .next:after{font-family: 'xeicon'; display:inline-block; font-size:25px; color: #777777;}
.paging_wrap .prev:after{content: "\e93c";}
.paging_wrap .next:after{content: "\e93f";}

.paging_wrap .prev_all:after,
.paging_wrap .next_all:after{font-family:'Material Symbols Outlined'; display:inline-block; font-size:25px; color: #777777;}
.paging_wrap .prev_all:after{content:'\eac3';}
.paging_wrap .next_all:after{content:'\eac9';}
.paging_wrap .page.on{background: var(--mainColor); color: #fff;}

/* tableStyle */
.tableWrap{width:100%;}
.tableWrap div{width:100%;}
.tableStyle{width:100%;}

.tableStyle > thead th{color:var(--blackColor); font-size:16px; padding:10px; background:#eee; border-top:2px solid var(--mainColor);}
.tableStyle > tbody tr{border-bottom:1px solid #ddd;}
.tableStyle > tbody td{color:var(--blackColor); font-size:15px; padding:10px 20px; text-align: center;}


/* tabMenu */
.tabMenuWrap{background:#F7F7F7;}
.tabMenuWrap > .tebMenu{display:flex; justify-content: space-between;}
.tabMenuWrap > .tebMenu > li{text-align: center; width:calc(100% / 5); }
.tabMenuWrap > .tebMenu > li > a{color:var(--textColor); display:block; padding:14px 0; font-size:14px;}
.tabMenuWrap > .tebMenu > li.on{background:#fff;}
.tabMenuWrap > .tebMenu > li.on > a{color:var(--mainColor); font-weight: 600;}