/* 기본 인풋 */
input[type=text],
input[type=file],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=date],
input[type=time]{font-family: 'Pretendard'; padding: 0 10px; height: 40px; line-height: 40px; color:#fff; width:100%;}
/*
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: 1px 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: #edf0f9;}

/* input */
.inputBox{border: 1px solid rgba(255, 255, 255, 0.4);  border-radius: 6px; overflow:hidden; height:40px;}
.textArearBox{border: 1px solid rgba(255, 255, 255, 0.4);  border-radius: 6px; overflow:hidden;}
.textArearBox > textarea{padding:10px; color:#fff; resize: none; width: 100%;}

/* select box */
.selectBox{border: 1px solid rgba(255, 255, 255, 0.4);  border-radius: 6px; position:relative; display:inline-block;}
.selectBox > select{width:100%; padding: 0 40px 0 10px; height: 40px; font-weight: 500; font-size: 14px; z-index: 1; position:relative; cursor:pointer; color:#fff;}
.selectBox > select > option{color:var(--fontColor);}
.selectBox:after{content: "\e936"; font-family: 'xeicon'; position:absolute; top:50%; right:10px; font-size:2rem; width:2rem; text-align: center; transform:translateY(-50%); color:#fff;}

/* checkbox, radio*/
.checkbox, .radio{display:inline-block;}
.checkbox > label{display:flex; align-items: center;}
.checkbox > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #dfe2ed;  border-radius: 4px; display:inline-block;}
.checkbox > label > .styledBox + span{margin-left:10px;}
.checkbox > input[type=checkbox]:checked + label > .styledBox{background-color: var(--subColor);}
.checkbox > input[type=checkbox]:checked + label > .styledBox:after{content: "\e929"; font-family:"xeicon"; position:absolute; font-size: 2rem; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.checkbox + .checkbox{margin-left:10px}

.radio > label{display:flex; align-items: center;}
.radio > label > .styledBox{position:relative; width:20px; height: 20px; border: 1px solid #dfe2ed;  border-radius: 50%; display:inline-block;}
.radio > label > .styledBox + span{margin-left:10px;}
.radio > input[type=radio]:checked + label > .styledBox{background-color: var(--subColor);}
.radio > input[type=radio]:checked + label > .styledBox:after{content: ""; position:absolute; background-color:#fff; width:50%; height:50%; border-radius: 50%; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.radio + .radio{margin-left:10px;}

/* 버튼형 라디오 */
.tabRadio{display: flex; margin-bottom: 20px;}
.tabRadio label{display: block; height: 36px; line-height: 36px; padding: 0 20px; background: #dfe2ed; color: #bbbec9; font-size: 14px; border: 1px solid #dfe2ed;  border-left: 0; text-align: center;}
.tabRadio input[type=radio] + label{margin-right: 0;}
.tabRadio input[type=radio]:checked + label{background: #fff; color: var(--subColor);}
.tabRadio input[type=radio]{display: none;}
.tabRadio label:first-of-type{border-radius: 4px 0 0 4px; border-left: 1px solid #dfe2ed;}
.tabRadio label:last-of-type{border-radius: 0 4px 4px 0;}

/* 버튼형 체크박스 */
.tabChkbox{display: flex; margin-bottom: 20px;}
.tabChkbox label{display: block; height: 36px; line-height: 36px; 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;}

/* 검색, 달력 */
.schInputWrap{position: relative; display: inline-block;}
.schInputWrap input[type=search]{padding-right:30px}
.schInputWrap button{font-size:0px; cursor: pointer;}
.schInputWrap button:after{ position:absolute; right:10px; top:50%; transform:translateY(-50%); content: "\e97a"; font-family: 'xeicon'; display:inline-block; font-size:1.5rem;}
.schInputWrap input:focus + button:after{color:var(--subColor);}

.dayWrap{line-height: 40px;}
.datepicker{position: relative; display: inline-block; }
.datepicker > i::after{position:absolute; content: "\e9a0"; font-family: "xeicon"; font-size:1.5rem; top:50%; right:10px; transform:translateY(-50%);}
.datepicker > input:focus + i:after{color:var(--subColor);}

/* file */
.fileBox input[type=file]{display: none;}
.fileBox input[type=text]{width: 300px;}
.fileBox label{border-radius: 4px; text-align: center; display: inline-block; background: #989ca9; color: #fff; padding: 0 20px; height: 40px; line-height: 40px;}
.fileBox label:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.fileBox label:disabled{background: #dfe2ed; color: #fff;}
.fileBox label:disabled:hover{box-shadow: none;}

/* 버튼 */
button:disabled{cursor:default;}
.btn{border-radius: 4px; text-align: center; display: inline-block; position: relative;}
.btn.sizeSS{padding: 0 12px; height: 26px; line-height: 26px;}
.btn.sizeS{padding: 0 12px; height: 32px; line-height: 32px;}
.btn.sizeM{padding: 0 20px; height: 40px; line-height: 40px;}
.btn.sizeL{padding: 0 28px; height: 48px; line-height: 48px;}

.btn i{vertical-align: baseline;}
.btn.sizeSS i{margin-right:6px; font-size: 14px; }
.btn.sizeS i{margin-right:6px; font-size: 12px; }
.btn.sizeM i{margin-right:8px; font-size: 14px; }
.btn.sizeL i{margin-right:8px; font-size: 16px; }

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

.btn.bgMain{background: var(--mainColor); color: #fff;}
.btn.bgMain:hover{background: var(--subColor); box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bgMain:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgMain:disabled:hover{box-shadow: none;}

.btn.bdMain{background: #fff; color: var(--subColor); border:1px solid var(--mainColor);}
.btn.bdMain:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdMain:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdMain:disabled:hover{box-shadow: none;}

.btn.bdGray{background: #fff; color: #777; border:1px solid #dfe2ed;}
.btn.bdGray.on,
.btn.bdGray:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdGray:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdGray:disabled:hover{box-shadow: none;}

.btn.bgGreen{background: #328343; color: #fff;}
.btn.bgGreen:hover{background: #38a24e; box-shadow: 0 0 10px rgba(39, 235, 114, 0.2);}
.btn.bgGreen:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgGreen:disabled:hover{box-shadow: none;}

.btn.bgGray{background: #989ca9; color: #fff;}
.btn.bgGray.on,
.btn.bgGray:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.btn.bgGray:disabled{background: #dfe2ed; color: #fff;}
.btn.bgGray:disabled:hover{box-shadow: none;}

/* toggle버튼 */
.toggleInput {position: relative; display: inline-block; width:36px; height: 12px; border-radius: 6px; background: #edf0f9;}
.toggleInput input {opacity:0; width:0; height:0;}
.toggleInput input:checked + label:before {transform: translateY(-50%) translateX(20px);}
.toggleInput label{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #edf0f9; border-radius: 6px;}
.toggleInput label:before {border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px; left:0px; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: 3px 0 10px rgba(73, 75, 83, 0.3); transition: all 0.5s;}
.toggleInput input:checked + label{background: var(--subColor);}
.toggleInput input:disabled + label::before{background: #dfe2ed;}
.toggleInput input:disabled + label{background: #f4f6fc;}

/* - 페이지 로딩 처리 - */
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); }
}
/* - @페이지 로딩 처리 - */

/* 페이징 */
.pagingWrap{font-size: 0; display:flex; justify-content: center; align-items: center;}
.pagingWrap a{width: 28px; height: 28px; line-height: 28px;  display: inline-block; font-size: 16px; margin: 0 3px; text-align: center; color: #989ca9;}
.pagingWrap .prev, .pagingWrap .next{display:inline-block; cursor: pointer; margin: 0 3px;}
.pagingWrap .prev:after,
.pagingWrap .next:after{font-family: 'xeicon'; display:inline-block; font-size:25px;}
.pagingWrap .prev:after{content: "\e93c";}
.pagingWrap .next:after{content: "\e93f";}
.pagingWrap a.on{border-radius: 50%; background: var(--subColor); color: #fff; font-weight: bold;}