@charset "utf-8";

/* select */
.select-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
select {
    background: #fff;
}
.select-wrap label {
    margin: 0;
}

.select01 {
    position: relative;
    min-width: 112px;
    margin: 0 !important;
}

.select01.inlineB {
    display: inline-block;
    width: auto;
}

.select01 select {
    display: block;
    width: 100%;
    min-width: 80px;
    height: 42px !important;
    padding: 0 30px 0 8px;
    font-size: 16px;
    font-size: 1rem;
    border: 1px solid #E0E0E2;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: 0.4s;
    box-shadow: none !important;
}

select::-ms-expand {
    display: none;
}

.select01 select:focus {
    border-color: #E85E65;
}

.select01 select option {
    font-weight: 400;
    color: #222;
}

.select01 select option:disabled,
.select01 select:invalid {
    color: #c6c6c6;
}

.select01:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 42px;
    margin-top: -21px;
    background: url('../img/ico-acor-arr-down-bk.png') no-repeat right center;
    background-size: 100%;
    z-index: 2;
    pointer-events: none;
}

/* input */
.input01 {
    position: relative;
}

.input01 input {
    display: block;
    width: 100%;
    min-width: 65px;
    height: 42px !important;
    padding: 8px 12px;
    border: 1px solid #E0E0E2;
    border-radius: 8px;
    font-size: 16px;
    font-size: 1rem;
    color: #222;
    background: #fff;
    transition: 0.4s;
    outline: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.input01 input:focus {
    border-color: #E85E65 !important;
    box-shadow: none !important;
}

.input01 input::placeholder {
    color: #C7C7C8;
}

.input01 input:-ms-input-placeholder {
    color: #C7C7C8;
}

.input01 input::-ms-input-placeholder {
    color: #C7C7C8;
}

.input-login input::placeholder {
    font-weight: 400;
    color: #C7C7C8;
}

.input-login input:-ms-input-placeholder {
    font-weight: 400;
    color: #C7C7C8;
}

.input-login input::-ms-input-placeholder {
    font-weight: 400;
    color: #C7C7C8;
}

.input01 input::-moz-placeholder {
    opacity: 1;
}

.input-with-btn .input01 input {
    padding-right: 32px;
}

.input01 input:disabled {
    color: #C7C7C8 !important;
    background-color: #f6f7f8 !important;
}

.input01 textarea {
    display: block;
    width: 100%;
    height: 200px;
    padding: 8px 12px;
    border: 1px solid #E0E0E2;
    border-radius: 8px;
    font-size: 16px;
    font-size: 1rem;
    color: #222;
    background: #fff;
    transition: 0.4s;
    outline: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.input01 textarea:focus {
    border-color: #E85E65;
}

.input01 textarea::placeholder {
    color: #C7C7C8;
}

.input01 textarea:-ms-input-placeholder {
    color: #C7C7C8;
}

.input01 textarea::-ms-input-placeholder {
    color: #C7C7C8;
}

.input01 textarea::-moz-placeholder {
    opacity: 1;
}

.input-with-btn .input01 textarea {
    padding-right: 32px;
}

.input01 textarea:disabled {
    color: #999;
    background-color: #f6f7f8;
}

.input01 .unit-txt {
    color: #222;
    display: inline-block;
    font-size: 14px;
    font-size: 0.875rem;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    text-align: right;
}
.input01.input-won input {
    padding-right: 32px;
    padding-bottom: 13px;
    text-align: right;
}

.input01.input-big input {
    height: 44px;
}
.input02 input {
    display: inline-block;
    width: 100%;
    min-width: 210px;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 16px;
    font-size: 1rem;
    color: #222;
    background: transparent !important;
    transition: 0.4s;
    outline: 0 !important;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.input02 input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* checkbox */
.chkbox01 {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
}

.chkbox01 .label {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    position: relative;
}

.chkbox01 input {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    z-index: 0;
}

.chkbox01 .label .label-txt {
    display: flex;
    flex-direction: row;
    gap: 7px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.75;
    font-weight: 400;
    color: #858688;
    cursor: pointer;
}

.chkbox01 .label .label-txt:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #C7C7C8;
    border-radius: 4px;
    transition: 0.2s;
    box-sizing: border-box;
    z-index: 1;
    background:#fff url('../img/ico-chkbox-gr.png') no-repeat center;
    background-size: 20px;
}

.chkbox01 .label input[type="checkbox"]:checked + .label-txt,
.chkbox01 .label.on .label-txt {
    color: #171719;
    font-weight: 500;
}

.chkbox01 .label input[type="checkbox"]:checked + .label-txt:before,
.chkbox01 .label.on .label-txt:before {
    border-color: #E52222;
    background: url('../img/ico-chkbox-rd.png') no-repeat center;
    background-size: 20px;
}

.chkbox01 .label input[type="checkbox"]:disabled + .label-txt:before {
    background-color: #f0f0f0;
}

/* radio */
.radio01 {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
}

.radio01 .label {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    position: relative;
}

.radio01 input {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    z-index: 0;
    margin: 0;
    box-sizing: border-box;
}

.radio01 .label .label-txt {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #222;
}

.radio01 .label .label-txt:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: 0.4s;
    box-sizing: border-box;
}

.radio01 .label .label-txt:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 6px;
    display: inline-block;
    opacity: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: 0.4s;
    box-sizing: border-box;
}

.radio01 .label input[type="radio"]:checked + .label-txt:before {
    border: 1px solid #E52222;
    background: #E52222;
}

.radio01 .label input[type="radio"]:checked + .label-txt:after {
    opacity: 1;
    background: #fff;
}

.radio01 .label input[type="radio"]:disabled + .label-txt:before {
    border: 1px solid #ddd;
    background: #ddd;
}
.radio01 .label input[type="radio"]:disabled + .label-txt:after {
    opacity: 1;
    background: #fff;
}

.radio02 {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    background-color: #f7f7f8;
    border-radius: 8px;
    overflow: hidden;
}

.radio02 .label {
    display: inline-flex;
    flex-direction: row;
    cursor: pointer;
    position: relative;
    width: 164px;
    margin: 0;
}

.radio02 input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    z-index: 0;
    margin: 0;
    box-sizing: border-box;
}

.radio02 .label .label-txt {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    color: #858688;
    background-color: #f7f7f8;
    border: 1px solid #f7f7f8;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}

.radio02 .label input[type="radio"]:checked + .label-txt {
    border: 1px solid #E52222;
    color: #E52222;
    background: #fff;
}

.radio02 .label input[type="radio"]:disabled + .label-txt {
    border: 1px solid #ddd;
    background: #ddd;
}

/* tab */
.tabType01 {
    margin-top: 40px;
}
.tabType01 .tab {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tabType01 .tab > li {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 140px;
    transition: 0.4s;
}

.tabType01 .tab > li > a,
.tabType01 .tab > li > button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    width: 100%;
    height: 58px;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 400;
    background: #fff;
    color: #858688;
    border-top: 1px solid #E0E0E2;
    border-left: 1px solid #E0E0E2;
    border-right: 1px solid #E0E0E2;
    border-bottom: 1px solid #E52222;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    box-sizing: border-box;
}

.tabType01 .tab > li.active > a,
.tabType01 .tab > li > button.active {
    font-weight: 700;
    color: #E52222;
    border-top: 1px solid #E52222;
    border-left: 1px solid #E52222;
    border-right: 1px solid #E52222;
    border-bottom: 1px solid transparent;
}

/* table */
.table-wrap01 {
    position: relative;
    margin-top: 13px;
}
.table-wrap01:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #C7C7C8;
}
.table-wrap02 {
    position: relative;
}
.table-wrap02:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.table01 {
    /* border-top: 1px solid #222; */
    color: #2e3040;
}
.table01::before {
    display: none;
}

.table01 th {
    padding: 8px 16px;
    font-size: 14px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    height: 38px;
    background-color: #F7F7F8 !important;
    color: #171719 !important;
    border-left: 1px solid #E8E9EA;
    border-bottom: 1px solid #E8E9EA;
    text-align: left;
    word-break: keep-all;
}

.table01 th:first-child {
    border-left: none;
}

.table01 td {
    padding: 8px 16px;
    border-bottom: 1px solid #E8E9EA;
    border-left: 1px solid #E8E9EA;
    height: 38px;
    background-color: #fff !important;
    color: #47484B !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    font-size: 0.875rem !important;
    text-align: left;
}
.txt-center th,
.txt-center td {
    text-align: center;
}

.table01 tbody tr td:first-child {
    border-left: none;
}

.table-dense td, 
.table-dense th {
    padding: 6px 6px;
}

.table-chkbox tr {
    cursor: pointer;
}

.table-chkbox tr:hover td {
    background-color: #f6f7f8;
}
.table02::before {
    display: none;
}
.table02 th {
    font-size: 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: left;
    word-break: keep-all;
    vertical-align: top;
    color: #171719 !important;
    background: #fff !important;
}
.table02 td {
    padding: 0;
    color: #171719;
    text-align: left;
}

.table-wrap03 {
    margin-top: 12px;
    border: 1px solid #E8E9EA;
    border-radius: 16px;
    padding: 20px;
}
.table03 th,
.table03 td {
    font-size: 16px !important;
    font-size: 1rem !important;
    line-height: 1.5;
    padding: 9px 8px;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid #F4F4F5 !important;
    background: #fff !important;
}
.table03 th {
    font-weight: 500 !important;
    word-break: keep-all;
    color: #171719 !important;
}
.table03 td {
    font-weight: 400 !important;
    color: #47484B !important;
}
.table03 tr:last-child th,
.table03 tr:last-child td {
    border-bottom: 0;
}

/* board */
.board-wrap01 {
    position: relative;
    margin-top: 20px;
    border-top: 1px solid #C7C7C8;
}
.board01 {
    /* border-top: 1px solid #222; */
    color: #2e3040;
}
.board01 tr {
    cursor: pointer;
}
.board01 tr:hover td {
    background-color: #FFF8F8 !important;
}
.board01 tr:hover .board-link {
    color: #E52222;
    font-weight: 500;
}

.board01 th {
    padding: 14px 14px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    height: 52px;
    background-color: #F7F7F8;
    color: #171719;
    border-bottom: 1px solid #E8E9EA;
    text-align: cetner;
    word-break: keep-all;
}

.board01 th:first-child {
    border-left: none;
}

.board01 td {
    padding: 14px 14px;
    border-bottom: 1px solid #E8E9EA;
    /* border-left: 1px solid #E8E9EA; */
    height: 52px;
    background-color: #fff;
    color: #47484B;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
}

/* pager */
.pager {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.pager a {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #47484B;
    font-size: 16px;
    font-size: 1rem;
    border-radius: 8px;
    text-align: center;
    z-index: 1;
    border: 1px solid #fff;
    font-weight: 500;
    background-color: #fff;
    transition: 0.2s;
}

.pager .pager-btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-indent: -30px;
    font-size: 1px;
}
.pager .pager-btn:hover {
    text-decoration: none;
}

.pager a.active,
.pager a.active:hover {
    border-color: #E0E0E2;
    color: #E52222;
    z-index: 2;
}

.pager a:hover {
    text-decoration: underline;
    color: #E52222;
}

.pager .btn-prev {
    background: url('../img/ico-arr-prev-bk.png') no-repeat center;
    background-size: 20px;
}
.pager .btn-prev:hover {
    background: url('../img/ico-arr-prev-rd.png') no-repeat center;
    background-size: 20px;
}

.pager .btn-next {
    background: url('../img/ico-arr-next-bk.png') no-repeat center;
    background-size: 20px;
}
.pager .btn-next:hover {
    background: url('../img/ico-arr-next-rd.png') no-repeat center;
    background-size: 20px;
}

.pager .btn-first {
    background: url('../img/ico-arr-go-first-bk.png') no-repeat center;
    background-size: 20px;
}
.pager .btn-first:hover {
    background: url('../img/ico-arr-go-first-rd.png') no-repeat center;
    background-size: 20px;
}

.pager .btn-last {
    background: url('../img/ico-arr-go-last-bk.png') no-repeat center;
    background-size: 20px;
}
.pager .btn-last:hover {
    background: url('../img/ico-arr-go-last-rd.png') no-repeat center;
    background-size: 20px;
}


.apply-step-list > li {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}
.apply-step-list > li > a {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
}
.apply-step-list > li.on {
    border-color: #da6460;
    background-color: #da6460;
}
.apply-step-list > li .step-num,
.apply-step-list > li .step-title {
    display: block;
    text-align: center;
    color: #73767c;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400;
    
}
.apply-step-list > li.on .step-num,
.apply-step-list > li.on .step-title {
    color: #fff;
    font-weight: 400;
}
.apply-step-list > li.on .step-num {
    font-weight: 500;
}

.input-info-list {
    padding: 20px;
    background-color: #f6f7f8;
}
.input-info-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
}
.input-info-list .label-wrap {
    width: 280px;
}
.input-info-list .label-wrap .left-label {
    color: #73767c;
    font-size: 14px;
    font-size: 0.875rem;
}
.input-info-list .input-wrap {
    width: calc(100% - 280px);
}

.lined-list {
    border-top: 1px solid #222;
}
.lined-list > li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    min-height: 40px;
}

.tit-red-bullet {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    font-size: 14px;
    font-size: 0.875rem;
    color: #222;
    font-weight: 400;
}
.tit-red-bullet:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    background-color: #da6460;
}

.attch-file-list > li {
    margin-top: 10px;
}
.attch-file-list > li:first-child {
    margin-top: 0;
}
.attch-file-list > li a {
    text-decoration: underline;
    color: #222;
}

.password-container {
    position: relative;
    height: 56px;
    width: 396px;
}

.key-cover,
.key-dots {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.key-cover {
    z-index: 2;
}

.key {
    font-family: 'password';
    position: relative;
    display: block;
    width: 596px;
    left: -200px;
    top: 0;
    height: 56px;
    font-size: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1;
    letter-spacing: -0.5px;
    background-color: transparent;
    z-index: 111;
    opacity: 0;
}

.key-dots {
    overflow: hidden;
    z-index: 1;
}

.dots, 
.qr-key-dots {
    display: flex;
    flex-direction: row;
    gap: 12px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 56px;
    width: 100%;
}

.dot,
.qr-key-dots .dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 1.7;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #E0E0E2;
    transform: scale(1);
    transition: 0.2s ease transform;
    overflow: hidden;
}

.key-dots .dot.active,
.qr-key-dots .dot.active {
    color: #171719;
    border-color: #E85E65;
}

.key-dots .dot.active::before,
.qr-key-dots .dot.active:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #171719;
    border-radius: 50%;
}