@charset "UTF-8";

@font-face {
	font-family: 'Pretendard GOV';
	font-weight: 800;
	font-display: swap;
	src: local("Pretendard GOV ExtraBold"), url("fonts/PretendardGOV-ExtraBold.woff2") format("woff2"), url("fonts/pretendard/woff/PretendardGOV-ExtraBold.woff") format("woff");
}

@font-face {
	font-family: 'Pretendard GOV';
	font-weight: 700;
	font-display: swap;
	src: local("Pretendard GOV Bold"), url("fonts/PretendardGOV-Bold.woff2") format("woff2"), url("fonts/pretendard/woff/PretendardGOV-Bold.woff") format("woff");
}

@font-face {
	font-family: 'Pretendard GOV';
	font-weight: 600;
	font-display: swap;
	src: local("Pretendard GOV SemiBold"), url("fonts/PretendardGOV-SemiBold.woff2") format("woff2"), url("fonts/pretendard/woff/PretendardGOV-SemiBold.woff") format("woff");
}

@font-face {
	font-family: 'Pretendard GOV';
	font-weight: 500;
	font-display: swap;
	src: local("Pretendard GOV Medium"), url("fonts/PretendardGOV-Medium.woff2") format("woff2"), url("fonts/pretendard/woff/PretendardGOV-Medium.woff") format("woff");
}

@font-face {
	font-family: 'Pretendard GOV';
	font-weight: 400;
	font-display: swap;
	src: local("Pretendard GOV Regular"), url("fonts/PretendardGOV-Regular.woff2") format("woff2"), url("fonts/pretendard/woff/PretendardGOV-Regular.woff") format("woff");
}

* {
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html,
body {
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: 'Pretendard GOV', 'Pretendard', Malgun Gothic, arial, sans-serif, Tahoma, verdana;
}

body, p, h1, h2, h3, h4, h6, ul, ol, li, dl, dt, dd, 
table, th, td, form, fieldset, legend, input, textarea, button, select, pre { margin: 0; padding: 0; }
body { font-size: 16px; font-weight: 400; color: #666; word-break: keep-all; }
ul, ol, li { display: block; list-style: none; }
img { border: 0px none; }
img, input, button, label, select { vertical-align: middle; }
input[type='submit'], input[type='button'], button { cursor: pointer; }
i, em, address { font-style: normal; }
a { text-decoration: none; color: #111; }
a:hover { text-decoration: none; }
table { border-spacing: 0; table-layout: fixed; }
article, aside, hgroup, header, footer, figure, figcaption, nav, section { display: block; }
.clear { display: block; height: 0px; font-size: 0px; font-size: 0em; line-height: 0px; content: ''; overflow: hidden; clear: both; }
.inner:after { display: block; content: ''; clear: both; }
fieldset { border:0; }
button { cursor: pointer; overflow: visible; border: 0; background-color: transparent; }
caption, legend, 
.soundOnly, .soundonly, .blind { overflow: hidden; position: absolute; top: 0; left: 0; clip-path: circle(0%); margin: -1px; width: 1px; height: 1px; font-size: 1px; line-height: 0; white-space: nowrap; }
.alignLeft { text-align: left !important; }
.alignRight { text-align: right !important; }
.alignCenter { text-align: center !important; }
.floatLeft { float: left !important; }
.floatRight { float: right !important; }
span.onlyDesktop { display: inline; }
.onlyDesktop { display: block; }
.onlyTablet { display: none; }
.onlyPhone { display: none; }

@media screen and (max-width: 768px) {
	.onlyPhone {display:block;}
	.onlyDesktop { display: none; }
}
/* ==============================================================================================================

= 너비, 높이 사이즈를 공통으로 사용하기 위한 클래스 부여

============================================================================================================== */
.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w50 {width: 50px;}
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w160 {width: 160px;}
.w170 {width: 170px;}
.w180 {width: 180px;}
.w190 {width: 190px;}
.w200 {width: 200px;}
.w210 {width: 210px;}
.w220 {width: 220px;}
.w230 {width: 230px;}
.w240 {width: 240px;}
.w250 {width: 250px;}
.w260 {width: 260px;}
.w270 {width: 270px;}
.w280 {width: 280px;}
.w290 {width: 290px;}
.w300 {width: 300px;}
.w310 {width: 310px;}
.w320 {width: 320px;}
.w330 {width: 330px;}
.w340 {width: 340px;}
.w350 {width: 350px;}
.w360 {width: 360px;}
.w370 {width: 370px;}
.w380 {width: 380px;}
.w390 {width: 390px;}
.w400 {width: 400px;}
.w410 {width: 410px;}
.w420 {width: 420px;}
.w430 {width: 430px;}
.w440 {width: 440px;}
.w450 {width: 450px;}
.w460 {width: 460px;}
.w470 {width: 470px;}
.w480 {width: 480px;}
.w490 {width: 490px;}
.w500 {width: 500px;}
.w510 {width: 510px;}
.w520 {width: 520px;}
.w530 {width: 530px;}
.w540 {width: 540px;}
.w550 {width: 550px;}
.w560 {width: 560px;}
.w570 {width: 570px;}
.w580 {width: 580px;}
.w590 {width: 590px;}
.w600 {width: 600px;}
.w610 {width: 610px;}
.w620 {width: 620px;}
.w630 {width: 630px;}
.w640 {width: 640px;}
.w650 {width: 650px;}
.w660 {width: 660px;}
.w670 {width: 670px;}
.w680 {width: 680px;}
.w690 {width: 690px;}
.w700 {width: 700px;}
.w2000 {width: 2000px !important;}
.w15 {width: 15px;}
.w25 {width: 25px;}
.w35 {width: 35px;}
.w45 {width: 45px;}
.w55 {width: 55px;}
.w65 {width: 65px;}
.w75 {width: 75px;}
.w85 {width: 85px;}
.w90 {width: 90px;}
.w95 {width: 95px;}
.w5p {width: 5%;}
.w8p {width: 8%;}
.w10p {width: 10%;}
.w12p {width: 12%;}
.w15p {width: 15%;}
.w18p {width: 18%;}
.w20p {width: 20%;}
.w25p {width: 25%;}
.w30p {width: 30%;}
.w35p {width: 35%;}
.w40p {width: 40%;}
.w45p {width: 45%;}
.w48p {width: 48%;}
.w49p {width: 49%;}
.w50p {width: 50% !important;}
.w55p {width: 55%;}
.w60p {width: 60%;}
.w65p {width: 65%;}
.w70p {width: 70%;}
.w75p {width: 75%;}
.w80p {width: 80%;}
.w85p {width: 85%;}
.w90p {width: 90%;}
.w95p {width: 95%;}
.w100p {width: 99.9%;}
.h10 {height: 10px;}
.h20 {height: 20px;}
.h30 {height: 30px;}
.h40 {height: 40px;}
.h50 {height: 50px;}
.h60 {height: 60px;}
.h70 {height: 70px;}
.h80 {height: 80px;}
.h90 {height: 90px;}
.h100 {height: 100px;}
.h110 {height: 110px;}
.h120 {height: 120px;}
.h130 {height: 130px;}
.h140 {height: 140px;}
.h150 {height: 150px;}
.h160 {height: 160px;}
.h170 {height: 170px;}
.h180 {height: 180px;}
.h190 {height: 190px;}
.h200 {height: 200px;}
.h210 {height: 210px;}
.h220 {height: 220px;}
.h230 {height: 230px;}
.h240 {height: 240px;}
.h250 {height: 250px;}
.h260 {height: 260px;}
.h270 {height: 270px;}
.h280 {height: 280px;}
.h290 {height: 290px;}
.h300 {height: 300px;}
.h310 {height: 310px;}
.h320 {height: 320px;}
.h330 {height: 330px;}
.h340 {height: 340px;}
.h350 {height: 350px;}
.h360 {height: 360px;}
.h370 {height: 370px;}
.h380 {height: 380px;}
.h390 {height: 390px;}
.h400 {height: 400px;}
.h410 {height: 410px;}
.h420 {height: 420px;}
.h430 {height: 430px;}
.h440 {height: 440px;}
.h450 {height: 450px;}
.h460 {height: 460px;}
.h470 {height: 470px;}
.h480 {height: 480px;}
.h490 {height: 490px;}
.h500 {height: 500px;}
.h510 {height: 510px;}
.h520 {height: 520px;}
.h530 {height: 530px;}
.h540 {height: 540px;}
.h550 {height: 550px;}
.h560 {height: 560px;}
.h570 {height: 570px;}
.h580 {height: 580px;}
.h590 {height: 590px;}
.h600 {height: 600px;}
.h610 {height: 610px;}
.h620 {height: 620px;}
.h630 {height: 630px;}
.h640 {height: 640px;}
.h650 {height: 650px;}
.h660 {height: 660px;}
.h670 {height: 670px;}
.h680 {height: 680px;}
.h690 {height: 690px;}
.h700 {height: 700px;}

/* ==============================================================================================================

= Div Group

= 화면 분할을 위해서 사용함

= 사용방법 : cols2(개수) 클래스를 통해서 개수만큼 균등분할하거나 w20(%)p 클래스를 통해서 분할 사이즈 조정

============================================================================================================== */

.divGroup { margin: 0 -10px; }
.divGroup:after { display: block; content: ''; clear: both; }
.divGroup>div { float: left; padding: 0 10px; }
.divGroup.cols2>div {width: 50%;}
.divGroup.cols3>div {width: 33.3333%;}
.divGroup.cols4>div {width: 25%;}
.divGroup.cols5>div { width: 20%; }
.divGroup.noMargin { margin: 0; }
.divGroup.noMargin>div { padding: 0; }
.btnArea.divGroup { margin: 15px -5px; }
.btnArea.divGroup>div { padding: 5px; }

/* ==============================================================================================================
= 폼 아이템별 기본스타일 지정
============================================================================================================== */
input[type='text'],
input[type='password'],
input[type='number'],
select {
    height: 32px;
    max-width: 100%;
    padding: 0 5px;
    border: 1px #ddd solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

select.useStyle {
    padding-right: 20px;
    background: #fff url(/images/injeinc/bg_selectBox.png) no-repeat right center;
    appearance: none;
    -webkit-appearance: none;
}

textarea {
    padding: 5px;
    border: 1px #ddd solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    resize: vertical;
}

*:disabled {
    color: #777 !important;
    background: #eee !important;
}

/* input:-moz-read-only{color:#777 !important;background:#eee !important;}

input:read-only{color:#777 !important;background:#eee !important;} */
input[type='checkbox'],
input[type='radio'] {
    margin-right: 5px;
}

.inputBtn {
    display: inline-block;
    position: relative;
    margin-right: 5px;
    padding-right: 53px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}

.inputBtn>* {
    vertical-align: top;
}

.inputBtn .btn_inline {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    text-align: center;
}

/* ==============================================================================================================
= Datepicker를 사용중인 입력박스, 달력형태 스타일 지정
= 사용방법 : 입력박스에 useDatepicker / useMonthpicker 클래스를 추가하여 사용함
============================================================================================================== */
input.useDatepicker{background:#fff url("/images/n21/rvt/caleandar_icon.png") right 10px center / 18px auto no-repeat ;}
input.useMonthpicker{background:#fff url("/images/n21/rvt/caleandar_icon.png")  right 10px center / 18px auto no-repeat ;}
#ui-datepicker-div{display:none;width:180px;background:#fff;border:1px #ccc solid;z-index:102 !important;}
.ui-datepicker{position:relative;padding:5px;}
.ui-datepicker table{width:100%;font-size:12px;}
.ui-datepicker table thead th{height:24px;color:#777;line-height:24px;text-align:center;}
.ui-datepicker table tbody td{width:14.2857%;text-align:center;height:22px;}
.ui-datepicker table tbody td a{display:block;height:22px;color:#4b4b4b;line-height:22px;text-align:center;font-size:13px;}
.ui-datepicker table tbody td span{color:#aaa;}
.ui-datepicker table tbody td.date-holiday a{color:#eb3c3c;}
.ui-datepicker tr td:first-child *{color:#eb3c3c;}
.ui-datepicker tr td:last-child *{color:#4084d2;}
.ui-datepicker th{padding:0;}
.ui-datepicker td a.ui-state-active{color:#fff;background:#4b4b4b;}
.ui-datepicker td a.ui-state-highlight{color:#4b4b4b;background:#dfdfdf;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:0;}
.ui-datepicker .ui-datepicker-title{margin:0;height:30px;line-height:30px;font-size:14px;font-weight:normal;color:#242424;letter-spacing:-1px;text-align:center;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{position:absolute;left:50%;top:5px;width:20px;height:20px;line-height:26px;border-radius:2px;border:1px solid #d9d9d9;text-indent:-9999em;cursor:pointer;}
.ui-datepicker .ui-datepicker-prev{margin-left:-66px;background:url("/images/n21/rvt/btn_calendarPrev.png") no-repeat center center;}
.ui-datepicker .ui-datepicker-next{margin-left:44px;background:url("/images/n21/rvt/btn_calendarNext.png") no-repeat center center;}
#ui-monthpicker-div.ui-datepicker{display:none;width:200px;background:#fff;border:1px #ccc solid;z-index:10 !important;box-sizing:border-box;}
#ui-monthpicker-div.ui-datepicker td{height:28px;}
#ui-monthpicker-div.ui-datepicker td a{cursor:pointer;}
#ui-monthpicker-div.ui-datepicker td a.ui-state-active{background:#4b4b4b;color:#fff;}
#ui-monthpicker-div.ui-datepicker tr td:first-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker tr td:last-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-header{margin-bottom:8px;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title select::-ms-expand{display:none;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title .ui-datepicker-year{min-width:75px;padding:0 0 0 10px;}

@media all and (max-width:768px){
	input.useDatepicker{background-image:url("/images/n21/rvt/caleandar_icon_2x.png");}
	input.useMonthpicker{background-image:url("/images/n21/rvt/caleandar_icon_2x.png");}
}
@media all and (max-width:280px){
	input.useDatepicker{background-position:right 5px center;}
	input.useMonthpicker{background-position:right 5px center;}
}

/* ==============================================================================================================
= Paging 기본스타일 지정
============================================================================================================== */
.paging{margin-bottom:30px;min-height:38px;text-align:center;}
.paging > a{display:inline-block;vertical-align:middle;min-width:38px;height:38px;line-height:38px;font-size:16px;text-align:center;color:#333333;}
.paging > a.active{background-color:#7257d7;color:#fff;}
.paging > a.first_prev{background:url("/images/n21/rvt/icon_first_prev.png") no-repeat center center;text-indent:-9999px;}
.paging > a.f_prev{margin-right:10px;background:url("/images/n21/rvt/icon_f_prev.png") no-repeat center center;text-indent:-9999px;}
.paging > a.l_next{margin-left:10px;background:url("/images/n21/rvt/icon_l_next.png") no-repeat center center;text-indent:-9999px;}
.paging > a.last_next{background:url("/images/n21/rvt/icon_last_next.png") no-repeat center center;text-indent:-9999px;}

.mobile_paging{display:none;margin-bottom:30px;min-height:38px;text-align:center;}
.mobile_paging > a{display:inline-block;vertical-align:middle;min-width:38px;height:38px;line-height:38px;font-size:16px;text-align:center;color:#333333;}
.mobile_paging > a.active{background-color:#333;color:#fff;}
.mobile_paging > a.first_prev{background:url("/images/n21/rvt/m_icon_first_prev.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.f_prev{margin-right:10px;background:url("/images/n21/rvt/m_icon_f_prev.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.l_next{margin-left:10px;background:url("/images/n21/rvt/m_icon_l_next.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.last_next{background:url("/images/n21/rvt/m_icon_last_next.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging span{display:inline-block;vertical-align:middle;margin:0 10px;}
.mobile_paging span b{display:inline-block;margin-right:10px;}
.mobile_paging span i{display:inline-block;margin-left:10px;}


/* ==============================================================================================================
= Tab 기본스타일 지정
============================================================================================================== */
.tabBar:after {
    display: block;
    content: "";
    clear: both;
}

.tabPage {
    display: none;
}

.tabPage.active {
    display: block;
}

/* ==============================================================================================================
= Modal 기본스타일 지정
============================================================================================================== */
.modalWrap {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -350px;
    width: 700px;
    background: #fff;
    opacity: 0;
    z-index: -1;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.modalWrap.active {
    top: 180px;
    opacity: 1;
    z-index: 99;
}

.modalWrap.small {
    margin-left: -250px;
    width: 500px;
}

.modalWrap.wide {
    margin-left: -450px;
    width: 900px;
}

.modalWrap.window {
    position: relative;
    top: inherit;
    left: inherit;
    margin-left: 0;
    padding-top: 46px;
    width: auto;
    opacity: 1;
    z-index: 99;
}

.modalWrap.window .modalTitle {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.modalWrap .modalTitle {
    position: relative;
    padding: 0 65px 0 20px;
    height: 46px;
    background: #484c51;
}

.modalWrap .modalTitle h2 {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 46px;
}

.modalWrap .modalTitle .btn_modalClose {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    text-indent: -9999em;
    background: url(/images/injeinc/btn_modalClose.png) no-repeat center center;
}

.modalWrap .modalContent {
    padding: 20px;
}

.modalWrap .modalContent .btnArea {
    margin: 0;
}

.modalWrap .modalContent .btnArea+* {
    margin-top: 20px;
}