@charset "UTF-8";

* {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html,
body {
    
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Pretendard GOV', arial, sans-serif, Tahoma, verdana;
}

body,
p,
h1,
h2,
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{
	max-width:100%;
}
fieldset, button,img, input[type='submit'] {
    border: 0px none;
}

img,
input,
button,
label,
select {
    vertical-align: middle;
}

/* input[type='text'],input[type='password'],input[type='number']{text-indent:5px;} */
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;
}
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;
}
/* ==============================================================================================================
= 폼 아이템별 기본스타일 지정
============================================================================================================== */
input[type='text'],input[type='password'],input[type='tel'],input[type='number'],select{height:20px;padding:0 5px;border:1px #c3c3c3 solid;-webkit-appearance: none;-webkit-border-radius: 0;}
input[type='reset']{-webkit-appearance: none;-webkit-border-radius: 0;}
select{background:#fff; -webkit-appearance:none;}
textarea{padding:5px;border:1px #ddd solid;resize:vertical;}
input[readonly],
input[readonly="readonly"],
input[disabled],
input[disabled="disabled"] { background:#f5f5f5; color:#000;}
input[type='checkbox'],input[type='radio']{margin-right:5px;}

.radio_wrap { position:relative; display:inline-block;vertical-align:middle;padding-left:20px;}
.radio_wrap input[type="radio"] {position:absolute; top:0; left:0; width:15px;height:15px; -webkit-appearance:none;background:url("/images/n21/rvt/radio_off.png") left 50% no-repeat; background-size:auto 100%;}
.radio_wrap input[type="radio"]:checked{background:url("/images/n21/rvt/radio_on.png") left 50% no-repeat; background-size:auto 100%;}
.radio_wrap label{display:inline-block;line-height:15px;}

.check_wrap { position:relative; display:inline-block;vertical-align:middle;padding-left:20px; }
.check_wrap input[type="checkbox"] { position:absolute; top:2px; left:0; width:15px;height:15px; -webkit-appearance:none;background:url("/images/n21/rvt/check_off.png") left 50% no-repeat; background-size:auto 100%;}
.check_wrap input[type="checkbox"]:checked{background:url("/images/n21/rvt/check_on.png") left 50% no-repeat;  background-size:auto 100%;}
.check_wrap label{display:inline-block;line-height:15px;}
.check_wrap.off input[type="checkbox"]{background:#ccc;}
.check_wrap.off label{color:#666;}
.check_wrap.off label strong{color:#666;}

input.useDatepicker{width:140px;background:#fff url(/images/n21/sub/icon_inputDate.gif) no-repeat 95% center;}
.ui-datepicker .ui-datepicker-prev{background:url(/images/n21/sub/btn_calendarPrev.png) no-repeat center center;}
.ui-datepicker .ui-datepicker-next{background:url(/images/n21/sub/btn_calendarNext.png) no-repeat center center;}

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

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

============================================================================================================== */
.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: 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;}
.h20 {height: 30px;}
.h30 {height: 40px;}
.h40 {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;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.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;
    -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;
}