@charset "utf-8";

html.default {overflow:hidden;}
body {margin:0;}
html,body{ font-size:16px; }

/* rem 기준
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
22px = 1.375rem
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem*/




body, button, input, textarea {
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
}
/*0618 신규추가*/

/*상단 영역 추가 0617*/
.header{position:relative; padding:10px 20px; background:#1e3d75;}
.header .logo{margin-right:10px}
.header h1{display: inline-block;font-size: 2.5rem;font-weight:700;color:#fff;text-shadow: 2px 2px 2px #0c3f6f;}
.header h1 a{vertical-align: middle}
.header h1 a img{display: none;}


/*cotents 전체영역 */
.e-wrap{position: relative;display: block;width: 100%;height: 100%;}
.e-wrap:after{content:'';position: absolute;top:0;left:0;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Sot_cnggrea.cat);opacity: 0.5;z-index: -1;display: block;width: 100%;height: 100%;border: solid 1px #000;}
/*cotents 전체영역 */

.content-area {
    padding: 15px 15px 15px 15px;
    box-sizing: border-box;
    /* min-width: 1024px;*/
    /*  height: calc(100vh - 50px);*/
    height: calc(100vh - 138px);
    overflow: auto;

}
.nbr{display: none;}

/*radio 버튼 디자인*/
.comp-radio-group input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}
.comp-radio-group input[type="radio"] + label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-size:14px;
    line-height: 1;
    cursor: pointer;
    padding-left: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.comp-radio-group input[type="radio"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 17px;
    height: 17px;
    text-align: center;
    background: #fafafa;
    border: 1px solid #cacece;
    border-radius: 100%;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.comp-radio-group input[type="radio"] + label:active:before,
.comp-radio-group input[type="radio"]:checked + label:active:before  {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.comp-radio-group input[type="radio"]:checked + label:before {
    background:#fff;
    border-color: #adb8c0;
}
.comp-radio-group input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 3px;
    width: 9px;
    height: 9px;
    background:#146ec5;
    border-radius: 100%;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

/*radio 버튼 디자인*/


.chekgroup {position: relative;}

.chekgroup input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0
}
.chekgroup input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.chekgroup input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
    content: ' ';
    display: inline-block;
    width: 21px;  /* 체크박스의 너비를 지정 */
    height: 21px;  /* 체크박스의 높이를 지정 */
    line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */
    margin: -2px 8px 0 0;
    text-align: center;
    vertical-align: middle;
    background: #fafafa;
    border: 1px solid #cacece;
    border-radius : 3px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.chekgroup input[type="checkbox"] + label:active:before,
.chekgroup input[type="checkbox"]:checked + label:active:before {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chekgroup input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
    content: '\2714';  /* 체크표시 유니코드 사용 */
    color: #1e3d75;
    /* text-shadow: 1px 1px #fff; */
    background: #f1f1f1;
    border-color: #adb8c0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}

.chekgroup input[type="checkbox"] + label {
    font-size: 0.875rem;
}

.chekgroup input[type="checkbox"] + label:before {
    width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 0.8rem;
}


/*.user-area { position: absolute; top: 30px; right: 100px; }*/



/*
table {width:100%; border-spacing:0;}
table th {border:1px solid; padding:4px;}
table td {border:1px solid; padding:4px;}
table tr.active {background-color: #C8EBFB;}

*/


.req {color:red; line-height: 1}
.error-message {display:block; color:red; font-size:0.9em;}
.notice-message {color:blue;}
.cancel-data {text-decoration:line-through;}

button {
    cursor: pointer;
    border-radius: 4px;
    margin: 0 1px;
}
button i, a i {margin-right:4px;}
td button {font-size:13px; padding-top:0px; padding-bottom:1px;}

button.icon {font-size:11px;}
button.icon i {margin-right:0;}

input[type="text"] {
    box-sizing: border-box;
    line-height: 22px;
    /* width: auto;*/
    border: 1px solid #aaa;
    height: 30px;
    color: #333;
}
input[readonly="readonly"] {
    background-color: rgba(150, 150, 150, .1);
    color: rgba(0, 0, 0, .6);
}

textarea {
    box-sizing: border-box;
    padding: 5px !important;
    width: 100%;
    border: 1px solid #aaa !important;
    /* border-radius: 5px;*/
    color: #333;
    resize:none;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    height: 24px;
    color: #333;
    padding: 0 30px 1px 10px;
    margin: 0;
    border: 1px solid #aaa !important;
    border-radius: 5px;
    background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Sfryrpg-neebj.cat') no-repeat 95% 50% #fff;
}
select::-ms-expand { display: none; }
select:disabled { opacity: 0.5; }


.tab{}
.tab-nav{font-size:0; padding-left:0; border-left:1px solid #ddd;}
.tab-nav li{display: inline-block;  height:40px; text-align:center; border-right:1px solid #ddd; border-top:1px solid #ddd;}
.tab-nav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tab-nav li a.active:before{background:#7ea21e;}
.tab-nav li a.active{border-bottom:1px solid #fff;}
.tab-nav li a{ position:relative; display:block; background: #f8f8f8; color: #555; padding:0 30px; line-height:40px; text-decoration:none; font-size:14px;}
.tab-nav li a:hover, .tab-nav li a.active{background:#fff; color:#7ea21e; }
.tab-content{padding: 10px; border:1px solid #ddd;}
.tab-nav li.action a {background:#555; color:#ddd; padding:0 20px;}
.tab-nav li.action a:hover {background:#000; color:#fff;}

.work-form {width:100%; max-width:1000px; display:inline-block;text-align:left; box-sizing: border-box; padding:20px}
.work-form h2{margin:20px 0 0}

.info-box {display:inline-block;margin-bottom:20px;}
.info-box h2 {margin:0;}
.info-box dl {position:relative; float:left; padding-left:80px;}
.info-box dl dt {position:absolute; left:0px; top:0px; width:80px; text-align:right; font-weight:bold;}
.info-box dl dd {margin-left:20px;min-width:100px;}

/*text 영역*/
.work-box {display:block;margin-bottom:20px;/*max-width:1024px;*/}
.btn-group{margin:10px 0}
.foot-btn-group button, .foot-btn-group a{padding:8px 30px; font-size:1rem}
h2 {position: relative;display: inline-block;padding-left:30px;font-size: 1.4rem;font-weight:500; color:#313131; line-height:1rem}
h2:before{content:' ';position:absolute;display:inline-block; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Soyrg_gvg.cat) no-repeat center;width:18px;height:18px;left:0;}
.con-wrap{padding:50px 30px; border: solid 2px #bacee2;border-radius:10px;width:80%;max-width:1200px; margin:10px auto;background:#fff; box-sizing: border-box}
.con-wrap h1{font-size:2rem; font-weight:500}

/*상단버튼*/
.user-area{position: relative; display: block; width:100%; background:#3f77bd; padding:12px 0; margin:0}
.r-gnb{text-align: right; padding-right:10px}
.r-gnb a,
.r-gnb span{color:#fff; padding:0 5px; font-size:0.86rem }
.r-gnb span{font-size:0.98rem; font-weight:500}
.r-gnb a{border-radius:20px; border: solid 1px #fff; font-weight:400; margin:0 3px; padding:2px 15px}
.r-gnb a:hover{background:#fff; color:#0057ab}

.circle-box {
    margin:0 auto;
    position: relative;
    width: 400px;
    text-align: center;
    overflow: hidden;
    background: #f3f3f3;
    border-radius: 3px;
    border: solid 1px #ddd;
    padding:20px 0 30px
}
.circle-box .title {
    position: relative;
    /* padding: 85px 0 30px; */
    font-size: 24px;
    line-height: 26px;
    color: #333;
    margin: 20px 0 30px;
}
.circle-box .cont {
    position: relative;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 18px;
    color: #464646;
}
.circle-box .put {
    position: relative;
    padding-top: 100px;
    background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Scubar.cat);
    background-position: center top;
    background-repeat: no-repeat;
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
}
.modal-header h3 {
    margin-top: 0;
    font-size:1.5rem;
    font-weight: 600;
}
.modal-body {
    margin: 20px 0;
    max-height: calc(90vh - 100px);
    overflow-y:auto;
}


.modal-footer button{background:#40454a; color:#fff; padding:5px 15px}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.field{position:relative; width:100%; padding:10px 20px; box-sizing: border-box}

fieldset {
    position: relative;
    display: block;
    margin-top:40px
}
fieldset legend {position: absolute;display:block;font-size:16px;font-weight:500;color:#1e3d75;left: 0;top: -27px; }
.table-list{display: table; width:100%}
.table-list dl{display: table-cell}
.default-info,.table-list{border-top:solid 2px #1e3d75; border-left:0; border-right:0; border-bottom:0; background: #fff; border-radius: 0; padding:0;  text-align: center; margin-top:20px}
fieldset  div.field {display:inline-block; vertical-align: top;}
.default-info .field{margin:0; padding:0}
.default-info label, .table-list dt{background:#edf3f9; }
.default-info label, .default-info span,.table-list dt,.table-list dd{padding:7px 0 8px; border-bottom: 1px solid #ababab; height:20px !important; }

fieldset{background:#f5f5f5;  border-top:solid 1px #ddd; border-bottom: solid 1px #ddd; padding:10px 0;}

/*button disable*/
button:disabled{color:#ddd;  background: #b8b8b8}
button:hover:disabled{ background: #b8b8b8}

/*지원신청 기본정보*/

/*달력*/


.field .req, .comp-date-picker{display: inline-block; vertical-align: top}

div.field > label {position:relative; display:block;font-weight:500; padding-left:16px; height:30px;}
div.field > label:before{content: ''; position: absolute; left:0; top:9px; width:10px; height:3px; background:#1a5db0}
/*.step4 .field label:before{top:15px}*/
.default-info .field label:before{background: none}

div.field span{padding:7px 0; display: block}
div.field input{padding:3px 5px}

.wd-half {width:49% !important; }
.wd-third {width:33.33% !important;/* margin-right:0.3%;*/}




/*table*/
.data-table{width: 100%; margin:0 0 10px; border-top:2px solid #546e8f}

/*.check .field span,*/
.table-list thead th,
.data-table thead th{border-bottom: 1px solid #ababab; padding:7px 0 8px; font-size: 0.98rem; color: #4e4e4e;}
.data-table tbody td,
.data-table tfoot td,
.table-list tbody td{padding:8px 5px 7px; border-bottom: 1px solid #e7e7e7;text-align:center;}
.data-table tbody tr:hover >td{background:#e5ecf3}
.comp-road-juso button,
.table-list tbody button,
.data-table tbody button{ border-radius: 3px; padding:5px 10px}

.table-title {margin:10px 0;}
.table-title h3 {display:inline; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Soyrg_gvg.cat) no-repeat left center; padding-left:25px; font-weight:500; font-size:1.1rem; background-size:15%}
.data-table a:hover{text-decoration: underline; color: #063361}
.comp-date-range-picker{position: relative;}
.comp-date-range-picker .field.check div{box-sizing: border-box;}
.comp-date-range-picker span.inline-block{position: relative; top:0}

/*날짜*/
.field .comp-date-picker span{padding:0; display: inline-block}

.check .field div
.check .field div,
.write-list .field div{width:70%; vertical-align: top; padding:7px 10px; box-sizing: border-box; }

.write-list .wd-half input{padding:3px}
.write-list .field .comp-date-range-picker,
.check .field .comp-date-range-picker{padding:0 10px}

.field select{height:30px; border-radius: 0 }
.btn-group a i,
.foot-btn-group i,
.comp-road-juso button i{color:#fff}
.btn-group a,
.btn-group button,
.foot-btn-group button, .foot-btn-group a{margin:0 3px}

/*신청서비스 리스트 table*/
.table-list th{background:#edf3f9}
.table-list tbody td{padding:10px 5px}

.field-list{}
.field-list div{display: block}
.field.check span{display:inline-block}
.write-list .comp-date-range-picker .comp-flat-picker,
.comp-date-range-picker .comp-flat-picker{display: inline-block; position: relative}
.date-picker {position: relative}
.comp-flat-picker i{top:8px}
.write-list .comp-date-range-picker span{}

.file a{position: relative; display:block; text-decoration: underline; padding-left:17px}
/*신청인정보 */
.comp-input-text input{width:100%}

/*신청동의 */

.agreeArea{ border: solid 1px #ddd;/* border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; */  }
.agreeArea1{border:none;  }
.agreeArea,
.agreeArea1 {margin:30px auto 10px auto;padding:30px; box-sizing: border-box; text-align: left;}


/*.agree-tit{ width:80%; }*/
.agree-step2 .agree-tit{margin:20px auto;}
/*.agree-step1 .agree-tit, */.agree-step2 .agree-tit{width:80%; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Shagnpg.purbatwh.tb.xe%2Serfbheprf%2Spff%2S..%2Svzntrf%2Sot_cnggrea.cat);padding:12px; display:block;  box-sizing:border-box;}
.agree-step1 .agree-tit{width:70%; text-align: left; margin:30px auto 10px}
/*.agree-step1 h2{margin:0}
.agree-step1 h2,*/
.lastArea-tit {width:80%; margin:0 auto; text-align: left}
.agree-step2 h3{position:relative;display:block; font-size: 1.6rem; background: #fff; font-weight:600; color:#1f318a; padding:15px;}
.complete-txt p{font-size:1rem}
.complete-txt p:nth-child(1){font-size:1.2rem; font-weight:500; margin: 30px 0 10px}

/*본인인증 title*/
h2.sign-tit{font-weight:400;padding: 20px 0 10px;width:400px;font-size: 1.7rem;box-sizing: border-box;text-align: left; padding-left:30px;}
/*.agree-step1 h2:before,
h2.sign-tit:before{background: none}*/

.item-example {
    background: #edf3f9;
    border: solid 1px #9ec3e7;
    border-radius: 4px;
    padding: 3px 6px;
    margin-top: 4px;
}
.item-example i {color:#2970b7;}
.item-example span { display: inline !important; }

/* web */
@media screen and (max-width:1300px){
    .con-wrap{width:100%}
}

@media screen and (max-width:1024px){
    /* .user-area{top:10px}*/
    .table-scroll table{width:1200px}
    .table-scroll{position: relative; display: block; overflow: auto; width:100%; }
    .r-gnb span{line-height:2rem;  padding:3px 15px }
    .comp-paging-list > div{padding:10px 20px}
}

/* tablet */
@media screen and (max-width:980px){
    .comp-date-picker span{margin-bottom: 10px}
    /*신청완료*/
    .agree-step1 .agree-tit,
    .agreeArea1,.agree-tit{width:100%;}
    .con-wrap h1{font-size:1.7rem}
    .agree-step2 h3{font-size:1.4rem}
    .complete-txt p:nth-child(1){font-size:0.98rem}
}


/* mobile */
@media screen and (max-width:780px){
    .header h1{font-size:2rem}
    .comp-paging-list > div .top-search{width:100%}
    .complete-txt p:nth-child(2){line-height: 1.35rem}
    .comp-input-attach input,.comp-input-attach button{margin-bottom:10px;}
    .comp-input-attach input{display: block; width:100% !important}
    .comp-input-attach>div{left:0!important; border-bottom:none}
    .write-list .field .comp-date-range-picker{text-align:center}
    div.field span.req{padding:0; display: inline-block}
    div.field label{line-height: 1.6rem}
    comp-date-picker span{margin-bottom: 10px}
    .write-list .field div{text-align:center}
    .comp-road-juso input.address{width:100%; margin:5px 0}
    .comp-date-range-picker span.inline-block{display: none !important}
    .table-list,.table-list dl{display: block;}
    .step4 .field label:before{top:11px}


}

@media screen and (max-width:640px){
    .header .logo{position: relative; margin:0 auto; left:auto; top:auto; display: block}
    .header h1{font-size:1.7rem}
    h2{ font-size:1.1rem; line-height: 1.3rem; padding-left:25px}
    h2:before{background-size:80%;top:4px}
    div.field div,
    div.field.wd-third,
    .field.wd-half,
    .write-list .field label{display: block; width:100%!important;}

    .con-wrap{width:100%}
    .user-area{padding:7px 0}
    .r-gnb a, .r-gnb span{font-size:0.8125rem; font-weight:400}
    .content-area{padding-top:0}
    /*.table-list table{width:800px}*/
    .table-list{position: relative; display: block; overflow: auto; width:100%; }
    .field label, .field div{font-size:0.8rem}
    .btn-group a,
    .btn-group button,
    .foot-btn-group button, .foot-btn-group a{display: block; margin:5px 0; width:100%; padding:8px 0;}
    .agreeArea{padding:20px; width:100%}
    h2.sign-tit{width:100%; margin:20px auto; font-size:1.2rem; box-sizing: border-box; padding:15px 0;text-align: center}
    .circle-box{width:100%}
    .circle-box .title{font-size:1.2rem}
    .agree-step2 .agree-tit{width:100%; margin:20px auto}


}

@media screen and (max-width:480px){
    .header h1{font-size:1.38rem;}
    .header .logo img{background-size:contain; width:78px; height:37px; }
    .con-wrap h1{font-size:1.3rem}
    .box-area h2, .work-box h2{font-size:1rem;}
    .box-area h2:before, .work-box h2:before{width:15px; height:15px; background-size:contain;  }
    fieldset{padding:0; box-sizing: border-box; width:100%}
    .agreeArea{margin:10px auto}
    .field-list label, .field-list span{font-size:0.8125rem}
    .search-form .comp-search-text{width:100% }
    .search-form button{
        display:block;
        width:100%;
        margin:10px 0 0
    }
    /* .table-list thead th,.table-list td{font-size:0.81rem}*/
    .table-scroll table{width:600px}
    .table-list table{width:500px}
    .agreeArea{padding:15px}
    .agreeArea h3{ font-size:1.22rem}
    .complete-txt p:nth-child(1){font-size:1rem; }
    .complete-txt p{line-height:1.4rem; font-size:0.9rem}
    .comp-road-juso button,
    .comp-road-juso input.zip-no,
    .comp-road-juso input.address{width:100%; margin:5px 0}
    .write-list .field span{display: block}
    .work-form{padding:20px 15px}
}