@charset "utf-8";

/** 
Title: 고용보험 Mobile 개인서비스 UI stylesheet define
Author: jintae kim(vuenos)
Date: 2021-01-14
**/


/* heading */
.titleb {margin-top: 40px; margin-bottom: 20px; font-size: 32px; font-weight: 700;}
.page .content-section:first-child .titleb,
.titleb.first {margin-top: 0;}

.titlec {margin-top: 40px; margin-bottom: 20px; font-size: 30px; color: #2f55a7; font-weight: 700;}
.titleb.bline,
.titlec.bline {border-bottom: 1px solid #ccc; margin-bottom: 5px; padding-bottom: 20px;}

.titleb.open-type,
.titlec.open-type {position: relative; margin-bottom: 0; padding-top: 16px; padding-bottom: 16px;}
.titleb.open-type .btn,
.titlec.open-type .btn {position: absolute; right: 0; top: 0; font-size: 26px; font-weight: 400;}
.titleb.open-type .btn.fold,
.titlec.open-type .btn.fold {font-size: 0; border: 0; background: url('/ei/images/eim/ico-fold.png') no-repeat center 50%;}
.titleb.open-type .btn.unfold,
.titlec.open-type .btn.unfold {font-size: 0; border: 0; background: url('/ei/images/eim/ico-unfold.png') no-repeat center 50%;}

/* form */
textarea {width: 100%; border: 1px solid #ddd; padding: 10px; box-sizing: border-box; resize: none; font-size: 26px; font-family:"Nanum Gothic", Dotum, sans-serif;}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"] {width: 100%; padding: 14px 10px;}

input[type="text"].w220,
input[type="password"].w220,
input[type="date"].w220,
input[type="email"].w220 {width: 220px;}

input.datepicker {width: calc(100% - 54px); margin-right: 8px;}
input.zip-inp {width: calc(100% - 54px); margin-right: 8px;}
a.cal2 img, .ui-datepicker-trigger {vertical-align: middle; width:60px;} /* 2021.02.29 허규리 달력 사이즈 수정 */
select {width: 100%; height: 70px; padding: 0 60px 0 20px; font-size: 26px; border: 1px solid #ddd; background: url('/ei/images/eim/bg-select.png') no-repeat right 20px top 50% #fff; color: #555; box-sizing: border-box; -webkit-appearance: none; appearance: none;}

.tel-input {display: flex; justify-content: space-between; height: 70px; line-height: 70px;}
input.tel-inp,
.tel-input input[type="text"] {flex-basis: 27%;}

.radio-group {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0;}
input[type="radio"] {position: absolute; width: 0; height: 0; font-size: 0; margin: 0 0; padding: 0 0; border: 0;}
.radio-group label {display: inline-block; width: 50%; height: 66px; margin-top: 0; line-height: 66px; text-align: center; border: 1px solid #cccccc; background-color:#fafafa; color:#555;} /* 2021.02.28 허규리 수정 */
.radio-group .btn {display: inline-block; width: 50%; height: 66px; margin-top: 0; line-height: 66px; text-align: center; border: 1px solid #cccccc;}
.radio-group .data {display: inline-block; width: calc(50% - 15px); height: 66px; margin-top: 30px; line-height: 66px; text-align: left; font-weight: 400;}
.radio-group input[type="radio"]:checked + label {border-color: #2f55a7; color: #2f55a7; background-color:#fff;} /* 2021.02.28 허규리 수정 */
.radio-group input[type="radio"]:disabled + label,
.radio-group input[disabled="disabled"] + label {color: #999; font-weight: 400;}
.radio-group input[type="radio"]:checked:disabled + label,
.radio-group input[disabled="disabled"]:checked + label {color: #2f55a7;}

label.check-type {position: relative; display: inline-block; padding-left: 55px;}
label.check-type:before {content: ""; position: absolute; top: 4px; left: 0; display: inline-block; width: 40px; height: 40px; background: url('/ei/images/eim/radio-unchk.png') no-repeat center top;}
input[type="radio"]:checked + label.check-type:before {background: url('/ei/images/eim/radio-chk.png') no-repeat center top;}

.idno-input {display: flex; justify-content: space-between; height: 70px; line-height: 70px;}
.idno-input input[type="text"],
.idno-input input[type="password"] {flex-basis: 47%;}

input[type="checkbox"] {vertical-align: middle; width: 40px; height: 40px; border: 1px solid #ccc;}

.both-inputs {display: flex; line-height: 70px; justify-content: space-between;}
.both-inputs .from {padding: 0 10px;}


/* table */
table {width: 100%; empty-cells: show;}
.table {border-top: 1px solid #ccc;}
table.view tr th,
table.ultable tr th {vertical-align: middle; padding: 10px 8px 10px 0; color: #555; line-height: 1.7; font-weight: 400; text-align: left; letter-spacing: -0.079em;}
table.view tr td,
table.ultable tr td {padding: 10px 0 10px 0; color: #333; line-height: 1.7; font-weight: 700;}
table.view tr:first-child th,
table.ultable tr:first-child th,
table.view tr:first-child td,
table.ultable tr:first-child td {padding-top: 20px;}
.data-span {display: block; min-height: 70px;}

/* buttons */
.btn {display: inline-block;  height: 66px; padding: 0 20px; line-height: 66px; text-align: center; border: 1px solid #cccccc;}
.btnB {display: inline-block;  height: 66px; padding: 0 20px; line-height: 66px; text-align: center; border: 1px solid #cccccc; background-color: #f8fbff ;}
.btn-s {display: inline-block;  height: 56px; padding: 0 20px; line-height: 54px; text-align: center; border: 1px solid #cccccc;}
.btn.full-size,
.btnB.full-size {width: 100%; background: #2f98ce; color: #fff;}
.button-area {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px;}
.button-area a,
.button-area button,
.button-area input[type="submit"] {display: block; width: calc(50% - 15px); height: 78px; margin-bottom: 30px; line-height: 76px; text-align: center; border: 1px solid #777777; font-size: 32px; font-weight: 700;}
.next-step,
.full-size.next-step {color: #0065c7 !important; border-color: #0065c7 !important; background: url('/ei/images/eim/slide-right.png') no-repeat right 20px top 50%; background-color: #f8fbff ;}
.prev-step,
.full-size.prev-step {color: #0065c7 !important; border-color: #0065c7 !important; background: url('/ei/images/eim/slide-left.png') no-repeat left 20px top 50%; background-color: #f8fbff ;}

.button-area.col-3 a,
.button-area.col-3 button,
.button-area.col-3 input[type="submit"] {width: calc(33% - 15px);}
.button-area.col-3 .btn.full-size,
.button-area.col-3 .btnB.full-size {width: 100%;}

.button-area a.submit,
.button-area button.submit,
.button-area input[type="submit"].submit {border-color: #2f98ce; background: #2f98ce; color: #fff;}

.button-area a.submit_org,
.button-area button.submit_org,
.button-area input[type="submit"].submit_org {border-color: #F0672A; background: #F0672A; color: #fff;}

.btn-zip,
.btn-search {display: inline-block; vertical-align: middle; width: 40px; height: 40px; border: 0; margin: 0 0; padding: 0 0; font-size: 0; background: url('/ei/images/eim/icon-zoom.png') no-repeat center 50%; background-size: 40px;}
.btn-reset {display: inline-block; vertical-align: middle; width: 40px; height: 40px; border: 0; margin: 0 0; padding: 0 0; font-size: 0; background: url('/ei/images/eim/ico-reload.png') no-repeat center 50%; background-size: 40px;}

.both-buttons {display: flex; justify-content: space-between;}
.both-buttons .file-add {width: 66px; margin-top: 0; font-size: 0; background: url('/ei/images/eim/ico-add.png') no-repeat center 50%;}
.both-buttons .file-del {width: 66px; margin-top: 0; font-size: 0; background: url('/ei/images/eim/ico-del.png') no-repeat center 50%;}



/* contents */
.description {font-weight: 400; color: #0065c7;}
.notifyInfo dl dt {margin-top: 55px; padding-left: 45px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px; background: url('/ei/images/eim/icon-info1.png') no-repeat left 50%;}
.notifyInfo dl dd {margin-top: 16px; color: #2673cb; line-height: 1.7;}
.formTxtArea {position: relative; text-align: center; margin-top: 60px; padding: 20px 0 20px 96px; font-weight: 700; font-size: 32px; color: #2f55a7;}
.formTxtArea:before {position: absolute; top: 24px; left: 0; content: ''; vertical-align: middle; display: inline-block; width: 72px; height: 72px; margin-right: 8px; background: url(/ei/images/eim/ico-b-check.png) no-repeat center top; background-size: 100%; font-size: 20px; color: #2f55a7; font-weight: 700;}
.titleb + .notifyInfo dl dt {margin-top: 30px;}

.noticebox-type1 h4 {margin-top: 55px; padding-left: 45px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px; background: url('/ei/images/eim/icon-info1.png') no-repeat left top;}
.noticebox-type1 .subtitle {margin-top: 55px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px;}
.noticebox-type1 ul {margin-top: 16px; color: #2673cb; line-height: 1.7;}
.noticebox-type1 p {line-height: 1.7;}
.titleb + .noticebox-type1 h4 {margin-top: 0;}

.noticebox-type2 h4 {margin-top: 55px; padding-left: 45px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px; background: url('/ei/images/eim/ico-notice.png') no-repeat left 50%;}
.noticebox-type2 ul {margin-top: 16px; color: #555; line-height: 1.7;}
.noticebox-type2 ul li {margin-bottom: 16px;}
.noticebox-type2 p {line-height: 1.7;}
.titleb + .noticebox-type2 h4 {margin-top: 0;}

.alertbox-type1 {color: #555; line-height: 1.7;}
.alertbox-type1 h4 {margin-top: 55px; margin-bottom: 20px; padding-left: 45px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px; background: url('/ei/images/eim/ico-alert1.png') no-repeat left 50%; background-size: 35px;}

.chiefInfo {color: #555; line-height: 1.7;}
.chiefInfo .title {margin-top: 55px; margin-bottom: 20px; padding-left: 45px; font-weight: 700; line-height: 35px; color: #2f55a7; font-size: 30px; background: url('/ei/images/eim/ico-s-check1.png') no-repeat left 50%;}
.chiefInfo .info {padding-left: 25px;}
.infobox-type1  {margin-top: 40px;}
.infobox-type1 .title {color: #2f55a7; font-size: 28px;}
.infobox-type1 dl dt {margin-top: 30px; margin-bottom: 10px; padding-left: 45px; font-weight: 700; line-height: 35px; background: url('/ei/images/eim/ico-s-check1.png') no-repeat left 50%;}
.infobox-type1 dl dd {word-break: break-all;}
.infobox-type1 dl dt:first-child {margin-top: 20px;}

.infobox-type2 {margin-top: 40px; margin-bottom: 10px; padding-left: 45px; line-height: 1.7; color: #2673cb; background: url('/ei/images/eim/ico-s-check2.png') no-repeat left 6px;}

.attach-file {border-top: 1px solid #ccc; padding-top: 20px;}
.attach-file .filename {margin-top: 20px;}
.attach-file .filename input[type="text"] {width: calc(100% - 272px); margin-right: 8px;}
.attach-file .filename .delete {display: inline-block; vertical-align: top; border-radius: 100%; width: 70px; height: 70px; border: 1px solid #ddd; font-size: 0; background: url('/ei/images/eim/ico-delete.png') no-repeat center 50%;}
.attach-file .fileWrap {display: inline-block}
.attach-file .fileWrap .label-attach,
.btn-attach  {display: inline-block; width: 168px; height: 70px; border-radius: 35px; line-height: 70px; text-align: center; color: #fff !important; background: #2f55a7;}
.attach-file .fileWrap input[type="file"] {position: absolute; visibility: hidden; width: 0; height: 0; font-size: 0; border: 0; margin: 0 0; padding: 0 0;}

.fileadd-form .fileWrap .label-attach {display: inline-block; width: 168px; height: 70px; border-radius: 35px; line-height: 70px; text-align: center; color: #fff; background: #2f55a7;}
.fileadd-form .fileWrap input[type="file"] {position: absolute; display: none; width: 0; height: 0; font-size: 0; border: 0; margin: 0 0; padding: 0 0;}
.fileadd-form input[type="text"].filename-input {width: calc(100% - 84px);}
.fileadd-form .fileWrap .delete {display: inline-block; vertical-align: top; border-radius: 100%; width: 70px; height: 70px; border: 1px solid #ddd; font-size: 0; background: url('/ei/images/eim/ico-delete.png') no-repeat center 50%;}

.sign {font-weight: 700;}
.sign .signman {display: inline-block; width: 320px; text-align: center;}
.bigUnderLine {margin-top: 40px; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 4px solid #333; font-size: 36px; font-size: 32px;}
.r-count {display: inline-block; min-width: 40px; text-align: center; border-bottom: 2px solid #2f55a7;}
.r-count::before {content: ""; display: inline-block;}

small {font-size: 24px; color: #0065c7;}
.btn small,
.btnB small {color: #000;}
.star {display: inline-block; vertical-align: middle; color:#ef7600!important; font-size: 40px; line-height: 1;}

.center-info .title {margin-top: 40px; margin-bottom: 20px; padding-left: 46px; height: 40px; font-size: 28px; color: #2f55a7; font-weight: 700; background: url('/ei/images/eim/ico-pointer.png') no-repeat left top;}
.center-info .sub {font-weight: 400; color: #555;}

.pointIcon2 {display: inline-block; padding-bottom: 20px;}

.step-flow {position: relative; overflow: hidden; text-align: right;}
.step-flow li b {display: none; color: #333;}
.step-flow li {display: inline-block;}
.step-flow li.on b {position: absolute; left: 0; display: inline-block; font-size: 34px; top: 0;}
.step-flow li i {font-size: 0;}
.step-flow li:before {content: ""; display: inline-block; width: 40px; height: 40px; border-radius: 100%; background: #515151; line-height: 38px; color: #fff; text-align: center; font-weight: 700; font-size: 26px;}
.step-flow li.on:before {background: #0065c7;}
.step-flow li:nth-child(1):before {content: "1";}
.step-flow li:nth-child(2):before {content: "2";}
.step-flow li:nth-child(3):before {content: "3";}
.step-flow li:nth-child(4):before {content: "4";}


/* 첨부파일 목록 */
.fileadd-form .file-title {margin-top: 40px; border-bottom: 1px solid #ccc; margin-bottom: 20px; padding-bottom: 20px; font-size: 32px; font-weight: 700;}

/* jquery ui 재정의 */
.appy-info-layer.ui-accordion .ui-accordion-header {padding: 0 0; border: 0; border-bottom: 1px solid #ccc; font-size: 30px; font-weight: 700; text-align: left; line-height: 64px; background: url('/ei/images/eim/ico-fold.png') no-repeat right 50%; color: #333;}
.appy-info-layer.ui-accordion .ui-state-default a {color: #333;}
.appy-info-layer.ui-accordion .ui-accordion-header.ui-state-active a {color: #0065c7;}
.appy-info-layer.ui-accordion .ui-accordion-header.ui-state-focus {border: 0; border-bottom: 1px solid #ccc; color: #333;}
.appy-info-layer.ui-accordion .ui-accordion-header.ui-state-active {border: 1px solid #0065c7; border-radius: 12px; color: #0065c7; text-align: center; background: url('/ei/images/eim/ico-unfold.png') no-repeat right 16px top 50%;}
.appy-info-layer.ui-accordion .ui-accordion-content {border: 0; border-bottom: 1px solid #ccc; padding: 24px 0; font-size: 26px; line-height: 1.5; color: #555;}
.appy-info-layer.ui-accordion .ui-accordion-header .ui-accordion-header-icon {display: none;}

/* 현재상태 참조 */
.apply-state { text-align: center;}
.apply-state .state-title {height: 72px; margin: 40px 32px  56px 32px; padding-bottom: 0 !important; border-bottom: 1px solid #aaa;}
.apply-state .state-title > span {display: inline-block; height: 72px; margin: 0 20px; line-height: 72px; font-size: 32px !important; font-weight: 700; color: #999; box-sizing: border-box;}
.apply-state .state-title > span.active {border-bottom: 4px solid #0065c7; color: #0065c7;}