@charset "utf-8";

/*- input -*/
::-webkit-input-placeholder { color: #bbb; }
:-ms-input-placeholder { color: #bbb; }
::placeholder { color: #bbb; }
textarea{border: 1px solid #eee; border-radius: 5px; resize: none; font-family: 'Pretendard';}
input{font-family: 'Pretendard';}
form td span:hover {outline: 2px solid #79e6e1;}
form td span:hover::before {color: #79e6e1 !important;}
form input[type="radio"] + span:hover,
form input[type="checkbox"] + span:hover{outline: none;}
/* form input[type=radio]:checked + span:hover::before,
form input[type="checkbox"]:checked + span:hover::before{color: #fff !important;} */

span.focus { border-bottom: 1px solid #4fa3f6 !important; }
textarea.focus { border: 1px solid #4fa3f6 !important; }

/* select */
.select { position: relative; height: 48px; background: #f7f6fa; padding: 0 15px; }
.select > select { position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - 30px); height: inherit; z-index: 2; font-weight: 700; font-size: 1.9rem; }
.select:after { content: "\e942"; font-family: "xeicon"; color: #808080; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 2rem; }

/* - 체크박스, 라디오버튼 CSS 설정(xeicon import 필요) - */
.inputCheck label { position:relative; display:inline-block;margin-right:0px; padding-left:25px; height:20px; color:#999; text-align:left; line-height:20px; vertical-align:middle; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow:hidden; font-size:0px; }
.inputCheck input[type=checkbox] { display:none; }
.inputCheck input[type=checkbox] + label  { display:inline-block;line-height:20px;vertical-align:middle;font-size:1.3rem;margin-left:5px;}
.inputCheck input[type=checkbox] + label:before { position:absolute; top:0px; left:0px; width:18px;height:18px; -webkit-border-radius: 0px;-khtml-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; border: 1px solid rgba(0,0,0,0.2); content: '';  }
.inputCheck input[type=checkbox]:checked + label  { color:#111; -webkit-tap-highlight-color:transparent; }
.inputCheck input[type=checkbox]:checked + label:before {  background: #fff; font-size:1.8rem;text-align:center;line-height:18px; font-family: 'xeicon' !important; display: inline-block; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  color:#111; content: "\e928"; }

input[type=radio] { display:none; }
input[type=radio] + span  { display:inline-block;line-height:20px;vertical-align:bottom;font-size:1.3rem; margin-left:5px;  }
label > input[type=radio] + span:before { position:absolute; top:0px; left:0px; width:20px;height:20px; -webkit-border-radius: 50%;-khtml-border-radius: 50%;;-moz-border-radius: 50%;;border-radius: 50%; border: 2px solid #c2c3c5; content: ''; box-sizing: border-box; background: url(../images/radio_off.png) no-repeat center center / contain;}
label > input[type=radio]:checked + span  { color:#3e4043; font-weight: 500; -webkit-tap-highlight-color:transparent; }
label > input[type=radio]:checked + span:before {background: url(../images/radio_on.png) no-repeat center center; border: none; font-size:1.2rem; text-align:center;line-height:20px; display: inline-block; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;}

/* - 체크박스, 라디오버튼 CSS 설정 - */

/* - 페이지 로딩 처리 - */
body.loading:after {  font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
    content: "\f110";position:fixed;top:50%;left:50%;width:50px;height:50px;line-height:50px;font-size:4.4rem;padding:5px;z-index:1000;margin-left:-30px;margin-top:-30px;
    -webkit-border-radius: 50%;-khtml-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background:#fff;color:#2d3845;overflow:hidden;border-radius: 50%;text-align: center;
    animation: spin 1s 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;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0);z-index:999;will-change: transform, opacity;content:''; }

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

/* - JS페이징 처리 - */
.paging_wrap {position:relative; background:transparent; text-align:center;font-size:0px; display: flex; align-items: center; justify-content: center; margin-bottom: 200px; margin-top: 60px; }
.paging_wrap::after { clear:both;display:block;content:''; }
.paging_wrap .first-page,
.paging_wrap .prev,
.paging_wrap .next,
.paging_wrap .last-page { font-size: 0; }

.paging_wrap > a { font-weight:700; display:inline-block; line-height:34px; height:34px; width: 34px;font-size:1.8rem; text-align:center; cursor: pointer; vertical-align:middle; margin:0px 0px; margin-left:0px;padding:0px 5px; color:#b9b7bf; }
.paging_wrap > a + a { margin-left:0px; }
.paging_wrap > a.on { color: #fff; font-weight: 700; border: 1px solid #35495f; background: #35495f; }
.paging_wrap > a:after { font-family: 'FontAwesome'; font-size: 2.3rem; font-weight: 100; line-height: 30px; height: 30px; padding: 0px; color: #808080; }
.paging_wrap > a.last-page:after { content: '\f101'; }
.paging_wrap > a.first-page:after { content: '\f100'; }
.paging_wrap > a.next:after { content: '\f105'; }
.paging_wrap > a.prev:after { content: '\f104'; }
.paging_wrap > span { font-size: 2rem; color: #b9b7bf; padding: 0px 5px; }

/* @ JS페이징 처리 - */