@charset "utf-8";

/* button */
.btn-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    font-size: 18px;
    border-radius: 10px;
    padding: 0 30px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
}

.btn-large:focus {
    outline-offset: 2px;
    outline: 2px dashed var(--black);
}

.btn-medium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    padding: 0 20px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 15px;
    border-radius: 5px;
    padding: 0 10px;
    white-space: nowrap;
    min-width: 65px;
    text-align: center;
}

.btn-xsmall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 13px;
    border-radius: 3px;
    padding: 0 5px;
    white-space: nowrap;
    text-align: center;
}

.btn-large:disabled,
.btn-medium:disabled,
.btn-small:disabled {
    background-color: var(--graye) !important;
    border: 1px solid transparent !important;
    color: var(--grayc) !important;
}

.form-input .btn-large,
.form-input .btn-medium,
.form-input .btn-small,
.form-input .btn-xsmall {
    min-width: auto;
}

.btn-blue {
    background-color: var(--blue);
    color: var(--white);
    border: 1px solid transparent;
}

.btn-gray {
    background-color: var(--grayd);
    color: var(--black3);
    border: 1px solid transparent;
}

.btn-green,
.btn-hover-green:hover,
.btn-hover-green:focus {
    background-color: var(--green);
    color: var(--white);
    border: 1px solid transparent;
}

.btn-red {
    background-color: var(--sred);
    color: var(--white);
    border: 1px solid transparent;
}

.btn-outline-red {
    background-color: var(--white);
    color: var(--sred);
    border: 1px solid var(--sred);
}

.btn-transparent {
    color: var(--black3);
    border: 1px solid transparent;
    padding: 0;
}

.btn-dblue {
    background-color: var(--dblue);
    color: var(--white);
    border: 1px solid transparent;
}

.btn-dblue:focus {
    outline: 2px dashed var(--black);
}

.btn-gray-dblue {
    background-color: var(--grayd);
    color: var(--dblue);
    border: 1px solid transparent;
}

.btn-outline-blue {
    background-color: var(--white);
    color: var(--blue);
    border: 1px solid var(--lblue);
}

.btn-outline-black {
    background-color: var(--white);
    color: var(--black3);
    border: 1px solid var(--grayc);
}

.btn-kakao {
    background-color: #fae100;
    color: #371d1e;
    border: 1px solid transparent;
}

.btn-kakao:before {
    content: '';
    background: url(../../images/front/ico/ico-kakao.png) center center / contain no-repeat;
    margin-right: 4px;
}

.btn-small.btn-kakao {
    height: 24px;
    font-size: 14px;
    padding: 0 10px 0 6px;
}

.btn-small.btn-kakao:before {
    width: 18px;
    height: 17px;
}

.btn-medium.btn-kakao {
    height: 40px;
    font-size: 16px;
    padding: 0 20px;
}

.btn-medium.btn-kakao:before {
    width: 21px;
    height: 19px;
}

.btn-fingerprint {
    position: relative;
    width: 100%;
    padding: 0 55px;
}

.btn-fingerprint:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 32px;
    background: url(../../images/front/ico/ico-fingerprint.png) center center / contain no-repeat;
}

.btn-popup-close {
    background-color: var(--black6);
    color: var(--grayc);
    border: 1px solid #555;
    font-size: 14px;
    height: 24px;
    padding: 0 8px;
    border-radius: 3px;
}

.btn-popup-close:before {
    content: '';
    width: 8.5px;
    height: 8.5px;
    background: url(../../images/front/btn/btn-popup-close.png) center center / contain no-repeat;
    margin-right: 4px;
}

.btn-row-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid var(--grayd);
    background-color: var(--bg7);
    margin-top: 10px;
}

.btn-remove-table,
.btn-move-up-table,
.btn-move-down-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid var(--grayd);
    background-color: var(--bg7);
}

.btn-plus-table {
    background: url(../../images/front/btn/btn-plus-table.png) center center / 10px 10px no-repeat var(--bg7);
}

.btn-minus-table {
    background: url(../../images/front/btn/btn-minus-table.png) center center / 10px 2px no-repeat var(--bg7);
}

.btn-calc {
    display: flex;
    align-items: center;
    flex: 0 0 62px;
    width: 62px;
}

.btn-calc button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--grayd);
    border-radius: 5px;
}

.btn-calc button:not(:last-child) {
    margin-right: 2px;
}

@media screen and (max-width: 1279px) {
    .btn-calc {
        display: flex;
        align-items: center;
        flex: 1 1 100%;
        width: auto;
    }

    .btn-calc button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 100%;
        width: auto;
        height: 30px;
        border: 1px solid var(--grayd);
        border-radius: 5px;
    }

    .btn-calc button:first-child:not(:only-child) {
        border-radius: 5px 0 0 5px;
    }

    .btn-calc button:last-child:not(:only-child) {
        border-radius: 0 5px 5px 0;
    }

    .btn-calc button:not(:last-child) {
        margin-right: 0;
        border-right: 0;
    }
}

/* button inner icon size */
[class*="btn-before"][class*="btn-large"],
[class*="btn-after"][class*="btn-large"],
[class*="btn-before"][class*="btn-medium"],
[class*="btn-after"][class*="btn-medium"],
[class*="btn-before"][class*="btn-small"],
[class*="btn-after"][class*="btn-small"] {
    font-weight: 400;
}

[class*="btn-before"][class*="btn-large"]:before {
    content: '';
    margin-left: -2px;
    margin-right: 8px;
}

[class*="btn-after"][class*="btn-large"]:after {
    content: '';
    margin-left: 8px;
    margin-right: -2px;
}

[class*="btn-before"][class*="btn-medium"]:before {
    content: '';
    margin-left: -2px;
    margin-right: 5px;
}

[class*="btn-after"][class*="btn-medium"]:after {
    content: '';
    margin-left: 5px;
    margin-right: -2px;
}

[class*="btn-before"][class*="btn-small"]:before {
    content: '';
    margin-left: -2px;
    margin-right: 5px;
}

[class*="btn-after"][class*="btn-small"]:after {
    content: '';
    margin-left: 5px;
    margin-right: -2px;
}

[class*="btn-before"][class*="btn-transparent"]:before {
    content: '';
    margin-right: 5px;
    margin-left: 0;
}

[class*="btn-after"][class*="btn-transparent"]:after {
    content: '';
    margin-left: 5px;
    margin-right: 0;
}

/* button inner icon color */
.btn-blue[class*="btn-before"]:before,
.btn-blue[class*="btn-after"]:after {
    background-color: var(--white);
}

.btn-gray[class*="btn-before"]:before,
.btn-gray[class*="btn-after"]:after {
    background-color: var(--black3);
}

.btn-green[class*="btn-before"]:before,
.btn-green[class*="btn-after"]:after {
    background-color: var(--white);
}

.btn-red[class*="btn-before"]:before,
.btn-red[class*="btn-after"]:after {
    background-color: var(--white);
}

.btn-outline-blue[class*="btn-before"]:before,
.btn-outline-blue[class*="btn-after"]:after {
    background-color: var(--blue);
}

.btn-outline-black[class*="btn-before"]:before,
.btn-outline-black[class*="btn-after"]:after {
    background-color: var(--black3);
}

.btn-transparent[class*="btn-before"]:before,
.btn-transparent[class*="btn-after"]:after {
    background-color: var(--black3);
}

.btn-dblue[class*="btn-before"]:before,
.btn-dblue[class*="btn-after"]:after {
    background-color: var(--white)
}

.btn-gray-dblue[class*="btn-before"]:before,
.btn-gray-dblue[class*="btn-after"]:after {
    background-color: var(--dblue);
}

.btn-transparent[class*="btn-after"]:after {
    background-color: var(--black3);
}

/* button inner icon image */
[class^="btn-"][class*="before-link-arrow"]:before,
[class^="btn-"][class*="after-link-arrow"]:after {
    width: 14px;
    height: 6px;
    -webkit-mask: url(../../images/front/arrow/arrow-icon-banner.png);
    mask: url(../../images/front/arrow/arrow-icon-banner.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="before-download"]:before,
[class^="btn-"][class*="after-download"]:after {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../../images/front/ico/ico-download.svg);
    mask: url(../../images/front/ico/ico-download.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="before-blank"]:before,
[class^="btn-"][class*="after-blank"]:after {
    width: 16px;
    height: 16px;
    background: url(../../images/front/ico/ico-blank.png) center center / contain no-repeat;
}

[class^="btn-"][class*="before-refresh"]:before,
[class^="btn-"][class*="after-refresh"]:after {
    width: 11px;
    height: 13px;
    -webkit-mask: url(../../images/front/ico/ico-refresh.svg);
    mask: url(../../images/front/ico/ico-refresh.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="before-prev"]:before {
    width: 6px;
    height: 10px;
    -webkit-mask: url(../../images/front/arrow/arrow-prev.png);
    mask: url(../../images/front/arrow/arrow-prev.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="after-next"]:after {
    width: 6px;
    height: 10px;
    -webkit-mask: url(../../images/front/arrow/arrow-next.png);
    mask: url(../../images/front/arrow/arrow-next.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="-before-search"]:before,
[class^="btn-"][class*="-after-search"]:after {
    width: 15px;
    height: 15px;
    -webkit-mask: url(../../images/front/ico/ico-search.png);
    mask: url(../../images/front/ico/ico-search.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="-before-digital"]:before,
[class^="btn-"][class*="-after-digital"]:after {
    width: 22px;
    height: 20px;
    -webkit-mask: url(../../images/front/ico/ico-fingerprint.png);
    mask: url(../../images/front/ico/ico-fingerprint.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

[class^="btn-"][class*="-before-toggle"]:before,
[class^="btn-"][class*="-after-toggle"]:after {
    width: 10px;
    height: 6px;
    -webkit-mask: url(../../images/front/arrow/arrow-filter-toggle.png);
    mask: url(../../images/front/arrow/arrow-filter-toggle.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.block.toggleParent.active [class^="btn-"][class*="-before-toggle"]:before,
.block.toggleParent.active [class^="btn-"][class*="-after-toggle"]:after {
    transform: rotate(180deg);
}

.sort-filter ~ div .btn-medium.btn-outline-black {
    flex: 0 0 40px;
    width: 50px;
    padding: 0;
    min-width: 0;
    border-radius: 0 5px 5px 0;
    border-left: 0;
    font-weight: 400;
}

.sort-filter {
    border-radius: 5px 0 0 5px;
}

.sort-filter ~ div .btn-medium.btn-outline-black {
    margin: 0
}

/* btn-wrap */
.btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.btn-wrap .left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}

.btn-wrap .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}

.btn-wrap .center {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}

.btn-wrap > .left *,
.btn-wrap > .right *,
.btn-wrap > .center * {
    margin-left: 10px;
    margin-top: 10px;
}

.btn-wrap.btn-wrap-medium .left {
    margin-left: -5px;
    margin-top: -5px;
}

.btn-wrap.btn-wrap-medium .right {
    margin-left: -5px;
    margin-top: -5px;
}

.btn-wrap.btn-wrap-medium .center {
    margin-left: -5px;
    margin-top: -5px;
}

.btn-wrap.btn-wrap-medium > .left *,
.btn-wrap.btn-wrap-medium > .right *,
.btn-wrap.btn-wrap-medium > .center * {
    margin-left: 5px;
    margin-top: 5px;
}

@media screen and (max-width: 1279px) {
    .btn-wrap {
        margin-top: 20px;
    }

    .btn-wrap > .mo-flex-wrap > *:not(:last-child) {
        margin-bottom: 10px;
    }
}


/* icon */
.icon {
    display: inline-flex;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    background-color: var(--black6);
}

.icon-circle-close {
    width: 17px;
    flex: 0 0 17px;
    height: 17px;
    background: url(../../images/front/ico/ico-circle-close.png) center center / 17px 17px no-repeat;
}

.icon-remove {
    width: 12px;
    flex: 0 0 12px;
    height: 17px;
    -webkit-mask-image: url(../../images/front/ico/ico-remove.png);
    mask-image: url(../../images/front/ico/ico-remove.png);
    -webkit-mask-size: 12px 17px;
    mask-size: 12px 17px;
}

.icon-up {
    width: 10px;
    flex: 0 0 10px;
    height: 6px;
    -webkit-mask-image: url(../../images/front/arrow/arrow-row-up.png);
    mask-image: url(../../images/front/arrow/arrow-row-up.png);
    -webkit-mask-size: 10px 6px;
    mask-size: 10px 6px;
}

.icon-down {
    width: 10px;
    flex: 0 0 10px;
    height: 6px;
    -webkit-mask-image: url(../../images/front/arrow/arrow-row-down.png);
    mask-image: url(../../images/front/arrow/arrow-row-down.png);
    -webkit-mask-size: 10px 6px;
    mask-size: 10px 6px;
}

.icon-notice {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-notice.svg);
    mask-image: url(../../images/front/ico/ico-notice.svg);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-speaker {
    width: 19px;
    flex: 0 0 19px;
    height: 14px;
    -webkit-mask-image: url(../../images/front/ico/ico-speaker.png);
    mask-image: url(../../images/front/ico/ico-speaker.png);
    -webkit-mask-size: 19px 14px;
    mask-size: 19px 14px;
}

.icon-speaker-large {
    width: 20px;
    flex: 0 0 20px;
    height: 17px;
    -webkit-mask-image: url(../../images/front/ico/ico-speaker-large.png);
    mask-image: url(../../images/front/ico/ico-speaker-large.png);
    -webkit-mask-size: 20px 17px;
    mask-size: 20px 17px;
}

.icon-datepicker {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-datepicker.svg);
    mask-image: url(../../images/front/ico/ico-datepicker.svg);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-doc {
    width: 14px;
    flex: 0 0 14px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-doc.svg);
    mask-image: url(../../images/front/ico/ico-doc.svg);
    -webkit-mask-size: 14px 16px;
    mask-size: 14px 16px;
}

.icon-career {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-career.svg);
    mask-image: url(../../images/front/ico/ico-career.svg);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-cert {
    width: 14px;
    flex: 0 0 14px;
    height: 20px;
    -webkit-mask-image: url(../../images/front/ico/ico-cert.svg);
    mask-image: url(../../images/front/ico/ico-cert.svg);
    -webkit-mask-size: 14px 20px;
    mask-size: 14px 20px;
}

.icon-location {
    width: 13px;
    flex: 0 0 13px;
    height: 17px;
    -webkit-mask-image: url(../../images/front/ico/ico-location.svg);
    mask-image: url(../../images/front/ico/ico-location.svg);
    -webkit-mask-size: 13px 17px;
    mask-size: 13px 17px;
}

.icon-lockon {
    width: 14px;
    flex: 0 0 14px;
    height: 18px;
    -webkit-mask-image: url(../../images/front/ico/ico-lockon.svg);
    mask-image: url(../../images/front/ico/ico-lockon.svg);
    -webkit-mask-size: 14px 18px;
    mask-size: 14px 18px;
}

.icon-lockoff {
    width: 14px;
    flex: 0 0 14px;
    height: 18px;
    -webkit-mask-image: url(../../images/front/ico/ico-lockoff.svg);
    mask-image: url(../../images/front/ico/ico-lockoff.svg);
    -webkit-mask-size: 14px 18px;
    mask-size: 14px 18px;
}

.icon-man {
    width: 12px;
    flex: 0 0 12px;
    height: 13px;
    -webkit-mask-image: url(../../images/front/ico/ico-man.svg);
    mask-image: url(../../images/front/ico/ico-man.svg);
    -webkit-mask-size: 12px 13px;
    mask-size: 12px 13px;
}

.icon-men {
    width: 17px;
    flex: 0 0 17px;
    height: 11px;
    -webkit-mask-image: url(../../images/front/ico/ico-men.svg);
    mask-image: url(../../images/front/ico/ico-men.svg);
    -webkit-mask-size: 17px 11px;
    mask-size: 17px 11px;
}

.icon-attachment {
    width: 14px;
    flex: 0 0 14px;
    height: 21px;
    -webkit-mask-image: url(../../images/front/ico/ico-attachment.png);
    mask-image: url(../../images/front/ico/ico-attachment.png);
    -webkit-mask-size: 14px 21px;
    mask-size: 14px 21px;
}

.icon-new {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-new.svg);
    mask-image: url(../../images/front/ico/ico-new.svg);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-plus {
    width: 12px;
    flex: 0 0 12px;
    height: 12px;
    -webkit-mask-image: url(../../images/front/ico/ico-plus.png);
    mask-image: url(../../images/front/ico/ico-plus.png);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
}

.icon-sort-album {
    width: 14px;
    flex: 0 0 14px;
    height: 14px;
    -webkit-mask-image: url(../../images/front/ico/ico-sort-album.svg);
    mask-image: url(../../images/front/ico/ico-sort-album.svg);
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
}

.icon-sort-list {
    width: 12px;
    flex: 0 0 12px;
    height: 12px;
    -webkit-mask-image: url(../../images/front/ico/ico-sort-list.svg);
    mask-image: url(../../images/front/ico/ico-sort-list.svg);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
}

.icon-incorrect {
    width: 20px;
    flex: 0 0 20px;
    height: 20px;
    background: url(../../images/front/ico/ico-incorrect.png) center center / contain no-repeat;
}

.icon-correct {
    width: 20px;
    flex: 0 0 20px;
    height: 20px;
    background: url(../../images/front/ico/ico-correct.png) center center / contain no-repeat;
}

.icon-message {
    width: 20px;
    flex: 0 0 20px;
    height: 12px;
    -webkit-mask-image: url(../../images/front/ico/ico-message.svg);
    mask-image: url(../../images/front/ico/ico-message.svg);
    -webkit-mask-size: 20px 12px;
    mask-size: 20px 12px;
}

.icon-info-password {
    width: 48px;
    flex: 0 0 48px;
    height: 41px;
    background: url(../../images/front/ico/ico-info-password.png) center center / contain no-repeat;
}

.icon-info-warning {
    width: 47px;
    flex: 0 0 47px;
    height: 48px;
    background: url(../../images/front/ico/ico-info-warning.png) center center / contain no-repeat;
}

.icon-share-facebook {
    width: 9px;
    flex: 0 0 9px;
    height: 18px;
    -webkit-mask-image: url(../../images/front/ico/ico-share-facebook.png);
    mask-image: url(../../images/front/ico/ico-share-facebook.png);
    -webkit-mask-size: 9px 18px;
    mask-size: 9px 18px;
}

.icon-share-twitter {
    width: 17px;
    flex: 0 0 17px;
    height: 14px;
    -webkit-mask-image: url(../../images/front/ico/ico-share-twitter.png);
    mask-image: url(../../images/front/ico/ico-share-twitter.png);
    -webkit-mask-size: 17px 14px;
    mask-size: 17px 14px;
}

.icon-share-naverblog {
    width: 13px;
    flex: 0 0 13px;
    height: 18px;
    -webkit-mask-image: url(../../images/front/ico/ico-share-naverblog.png);
    mask-image: url(../../images/front/ico/ico-share-naverblog.png);
    -webkit-mask-size: 13px 18px;
    mask-size: 13px 18px;
}

.icon-share-naverpost {
    width: 12px;
    flex: 0 0 12px;
    height: 15px;
    -webkit-mask-image: url(../../images/front/ico/ico-share-naverpost.png);
    mask-image: url(../../images/front/ico/ico-share-naverpost.png);
    -webkit-mask-size: 12px 15px;
    mask-size: 12px 15px;
}

.icon-share-kakaostory {
    width: 9px;
    flex: 0 0 9px;
    height: 17px;
    -webkit-mask-image: url(../../images/front/ico/ico-share-kakaostory.png);
    mask-image: url(../../images/front/ico/ico-share-kakaostory.png);
    -webkit-mask-size: 9px 17px;
    mask-size: 9px 17px;
}

.icon-share-youtube {
    width: 18px;
    flex: 0 0 18px;
    height: 14px;
    background: url(../../images/front/ico/ico-share-youtube.png) center center / contain no-repeat;
}

.icon-share-instagram {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    background: url(../../images/front/ico/ico-share-instagram.png) center center / contain no-repeat;
}

.icon-tel {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask-image: url(../../images/front/ico/ico-tel.png);
    mask-image: url(../../images/front/ico/ico-tel.png);
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.icon-kakao-channel {
    width: 79px;
    flex: 0 0 79px;
    height: 61px;
    background: url(../../images/front/ico/ico-kakao-channel.png) center center / contain no-repeat;
}

.icon-kakao-step01 {
    width: 60px;
    flex: 0 0 60px;
    height: 60px;
    background: url(../../images/front/ico/ico-kakao-step01.png) center center / contain no-repeat;
}

.icon-kakao-step02 {
    width: 60px;
    flex: 0 0 60px;
    height: 60px;
    background: url(../../images/front/ico/ico-kakao-step02.png) center center / contain no-repeat;
}

.icon-kakao-step03 {
    width: 60px;
    flex: 0 0 60px;
    height: 60px;
    background: url(../../images/front/ico/ico-kakao-step03.png) center center / contain no-repeat;
}

.icon-step-end {
    width: 105px;
    flex: 0 0 105px;
    height: 102px;
    background: url(../../images/front/ico/ico-step-end.png) center center / contain no-repeat;
}

.icon-sign-step01 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step01.png) right center / contain no-repeat;
}

.icon-sign-step02 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step02.png) right center / contain no-repeat;
}

.icon-sign-step03 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step03.png) center center / contain no-repeat;
}

.icon-sign-step04 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step04.png) center center / contain no-repeat;
}

.icon-sign-step05 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step05.png) center center / contain no-repeat;
}

.icon-sign-step06 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step06.png) center center / contain no-repeat;
}

.icon-sign-step07 {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-sign-step07.png) center center / contain no-repeat;
}

.icon-sign-step08 {
    width: 60px;
    flex: 0 0 60px;
    height: 44px;
    background: url(../../images/front/ico/ico-sign-step08.png) center center / contain no-repeat;
}

.icon-sign-step09 {
    width: 60px;
    flex: 0 0 60px;
    height: 38px;
    background: url(../../images/front/ico/ico-sign-step09.png) center center / contain no-repeat;
}

.icon-sign-end {
    width: 80px;
    flex: 0 0 80px;
    height: 80px;
    background: url(../../images/front/ico/ico-sign-end.png) center center / contain no-repeat;
}

.icon-repair {
    width: 47px;
    flex: 0 0 47px;
    height: 44px;
    background: url(../../images/front/ico/ico-repair.png) center center / contain no-repeat;
}

.icon-question {
    width: 18px;
    flex: 0 0 18px;
    height: 18px;
    -webkit-mask-image: url(../../images/front/ico/ico-question.png);
    mask-image: url(../../images/front/ico/ico-question.png);
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

.icon-row-add {
    width: 10px;
    flex: 0 0 10px;
    height: 10px;
    -webkit-mask-image: url(../../images/front/ico/ico-row-add.png);
    mask-image: url(../../images/front/ico/ico-row-add.png);
    -webkit-mask-size: 10px 10px;
    mask-size: 10px 10px;
}

.icon-dot {
    width: 24px;
    flex: 0 0 24px;
    height: 4px;
    background: url(../../images/front/ico/ico-dot.png) center center / contain no-repeat;
}

.icon-star {
    width: 18px;
    flex: 0 0 18px;
    height: 17px;
    background: url(../../images/front/ico/ico-rating-on.png) center center / contain no-repeat;
}

.icon-video-play {
    width: 60px;
    flex: 0 0 60px;
    height: 60px;
    background: url(../../images/front/ico/ico-video-play.png) center center / contain no-repeat;
}

.icon-info-invite {
    width: 40px;
    flex: 0 0 40px;
    height: 40px;
    background: url(../../images/front/ico/ico-info-invite.png) center center / contain no-repeat;
}

.icon-info-leave {
    width: 104px;
    flex: 0 0 104px;
    height: 82px;
    background: url(../../images/front/ico/ico-info-leave.png) center center / contain no-repeat;
}

.icon-info-video {
    width: 64px;
    flex: 0 0 64px;
    height: 44px;
    background: url(../../images/front/ico/ico-info-video.png) center center / contain no-repeat;
}

.icon-delivery-step01 {
    width: 59px;
    flex: 0 0 59px;
    height: 40px;
    background: url(../../images/front/ico/ico-delivery-step01.png) center center / contain no-repeat;
}

.icon-delivery-step02 {
    width: 37px;
    flex: 0 0 37px;
    height: 49px;
    background: url(../../images/front/ico/ico-delivery-step02.png) center center / contain no-repeat;
}

.icon-delivery-step03 {
    width: 50px;
    flex: 0 0 50px;
    height: 51px;
    background: url(../../images/front/ico/ico-delivery-step03.png) center center / contain no-repeat;
}

.icon-info-pop-warning {
    width: 38px;
    flex: 0 0 38px;
    height: 31px;
    background: url(../../images/front/ico/ico-info-pop-warning.png) center center / contain no-repeat;
}

.icon-info-pay {
    width: 60px;
    flex: 0 0 60px;
    height: 50px;
    background: url(../../images/front/ico/ico-info-pay.png) center center / contain no-repeat;
}

.icon-info-alarm {
    width: 56px;
    flex: 0 0 56px;
    height: 40px;
    background: url(../../images/front/ico/ico-info-alarm.png) center center / contain no-repeat;
}

.icon-cert-step01 {
    width: 58px;
    flex: 0 0 58px;
    height: 48px;
    background: url(../../images/front/ico/ico-cert-step01.png) center center / contain no-repeat;
}

.icon-cert-step02 {
    width: 48px;
    flex: 0 0 48px;
    height: 48px;
    background: url(../../images/front/ico/ico-cert-step02.png) center center / contain no-repeat;
}

.icon-cert-step03 {
    width: 48px;
    flex: 0 0 48px;
    height: 48px;
    background: url(../../images/front/ico/ico-cert-step03.png) center center / contain no-repeat;
}

.icon-cert-step04 {
    width: 43px;
    flex: 0 0 43px;
    height: 48px;
    background: url(../../images/front/ico/ico-cert-step04.png) center center / contain no-repeat;
}

.icon-child01 {
    width: 50px;
    flex: 0 0 50px;
    height: 32px;
    background: url(../../images/front/ico/ico-child01.png) 0 center / contain no-repeat;
}

.icon-child02 {
    width: 50px;
    flex: 0 0 50px;
    height: 33px;
    background: url(../../images/front/ico/ico-child02.png) 0 center / contain no-repeat;
}

.icon-child03 {
    width: 50px;
    flex: 0 0 50px;
    height: 30px;
    background: url(../../images/front/ico/ico-child03.png) 0 center / contain no-repeat;
}

.icon-child04 {
    width: 50px;
    flex: 0 0 50px;
    height: 31px;
    background: url(../../images/front/ico/ico-child04.png) 0 center / contain no-repeat;
}

.icon-child05 {
    width: 50px;
    flex: 0 0 50px;
    height: 33px;
    background: url(../../images/front/ico/ico-child05.png) 0 center / contain no-repeat;
}

.icon-parking {
    width: 30px;
    flex: 0 0 30px;
    height: 30px;
    background: url(../../images/front/ico/ico-parking.png) 0 center / contain no-repeat;
}

.icon-bus {
    width: 40px;
    flex: 0 0 40px;
    height: 24px;
    background: url(../../images/front/ico/ico-bus.png) center center / contain no-repeat;
}

.icon-subway {
    width: 34px;
    flex: 0 0 34px;
    height: 36px;
    background: url(../../images/front/ico/ico-subway.png) center center / contain no-repeat;
}

.icon-phone {
    width: 24px;
    flex: 0 0 24px;
    height: 24px;
    background: url(../../images/front/ico/ico-phone.png) center center / contain no-repeat;
}

.icon-clock {
    width: 30px;
    flex: 0 0 30px;
    height: 30px;
    background: url(../../images/front/ico/ico-clock.png) center center / contain no-repeat;
}

.icon-calendar {
    width: 33px;
    flex: 0 0 33px;
    height: 27px;
    background: url(../../images/front/ico/ico-calendar.png) center center / contain no-repeat;
}

.icon-personnel {
    width: 32px;
    flex: 0 0 32px;
    height: 20px;
    background: url(../../images/front/ico/ico-personnel.png) center center / contain no-repeat;
}

.icon-apply {
    width: 35px;
    flex: 0 0 35px;
    height: 28px;
    background: url(../../images/front/ico/ico-apply.png) right center / contain no-repeat;
}

.icon-area {
    width: 24px;
    flex: 0 0 24px;
    height: 25px;
    background: url(../../images/front/ico/ico-area.png) center center / contain no-repeat;
}

.icon-my-location {
    width: 17px;
    flex: 0 0 17px;
    height: 17px;
    -webkit-mask: url(../../images/front/ico/ico-my-location.png);
    mask: url(../../images/front/ico/ico-my-location.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
}

.icon-setting {
    width: 13px;
    flex: 0 0 13px;
    height: 14px;
    -webkit-mask: url(../../images/front/ico/ico-setting.png);
    mask: url(../../images/front/ico/ico-setting.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
}

.fc-level1 i {
    display: inline-block;
    width: 18px;
    flex: 0 0 18px;
    height: 21px;
    -webkit-mask: url(../../images/front/main/ico-level1.svg);
    mask: url(../../images/front/main/ico-level1.svg);
    -webkit-mask-size: 18px 18px;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #12a9e2;
    vertical-align: top;
    margin-right: 5px
}

.fc-level2 i {
    display: inline-block;
    width: 18px;
    flex: 0 0 18px;
    height: 21px;
    -webkit-mask: url(../../images/front/main/ico-level2.svg);
    mask: url(../../images/front/main/ico-level2.svg);
    -webkit-mask-size: 18px 18px;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #24a04d;
    vertical-align: top;
    margin-right: 5px
}

.fc-level3 i {
    display: inline-block;
    width: 18px;
    flex: 0 0 18px;
    height: 21px;
    -webkit-mask: url(../../images/front/main/ico-level3.svg);
    mask: url(../../images/front/main/ico-level3.svg);
    -webkit-mask-size: 18px 18px;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #f96922;
    vertical-align: top;
    margin-right: 5px
}

.fc-level4 i {
    display: inline-block;
    width: 18px;
    flex: 0 0 18px;
    height: 21px;
    -webkit-mask: url(../../images/front/main/ico-level4.svg);
    mask: url(../../images/front/main/ico-level4.svg);
    -webkit-mask-size: 18px 18px;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #ff3939;
    vertical-align: top;
    margin-right: 5px
}

.icon-kc {
    width: 16px;
    flex: 0 0 16px;
    height: 22px;
    -webkit-mask-image: url(../../images/front/ico/ico-kc.png);
    mask-image: url(../../images/front/ico/ico-kc.png);
    -webkit-mask-size: 16px 22px;
    mask-size: 16px 22px;
}

.icon-medal {
    display: inline-block;
    width: 30px;
    height: 35px;
    font-size: 11px;
    background: url(../../images/front/ico/ico-medal.png) center center / contain no-repeat;
    padding-top: 4px;
    color: var(--black);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.icon-label {
    display: inline-block;
    width: 107px;
    height: 74px;
    font-size: 18px;
    background: url(../../images/front/ico/ico-label.png) center center / contain no-repeat;
    padding: 28px 0 0 13px;
    color: var(--black);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.icon-book {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 62px;
    font-size: 16px;
    background: url(../../images/front/ico/ico-book.png) center center / contain no-repeat;
    color: var(--green);
    font-weight: 500;
    text-align: center;
    line-height: 20px;
}

.icon-zoom {
    width: 15px;
    flex: 0 0 15px;
    height: 15px;
    -webkit-mask: url(../../images/front/ico/ico-zoom.png);
    mask: url(../../images/front/ico/ico-zoom.png);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.icon-card-tooltip01 {
    width: 14px;
    flex: 0 0 14px;
    height: 16px;
    -webkit-mask: url(../../images/front/ico/ico-card-tooltip01.svg);
    mask: url(../../images/front/ico/ico-card-tooltip01.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black3);
}

.icon-card-tooltip02 {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask: url(../../images/front/ico/ico-card-tooltip02.svg);
    mask: url(../../images/front/ico/ico-card-tooltip02.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black3);
}

.icon-card-tooltip03 {
    width: 14px;
    flex: 0 0 14px;
    height: 16px;
    -webkit-mask: url(../../images/front/ico/ico-card-tooltip03.svg);
    mask: url(../../images/front/ico/ico-card-tooltip03.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black3);
}

.icon-card-tooltip04 {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    -webkit-mask: url(../../images/front/ico/ico-card-tooltip04.svg);
    mask: url(../../images/front/ico/ico-card-tooltip04.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black3);
}

.icon-card-tooltip05 {
    width: 12px;
    flex: 0 0 12px;
    height: 3px;
    -webkit-mask: url(../../images/front/ico/ico-card-tooltip05.svg);
    mask: url(../../images/front/ico/ico-card-tooltip05.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    mask-size: contain;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black3);
}

.icon-view-more {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    background: url(../../images/front/ico/ico-view-more.png) center center / contain no-repeat;
}


/* tag */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 24px;
    min-width: 58px;
    padding: 0 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.tag-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 24px;
    min-width: 68px;
    padding: 0 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.tag.tag-green {
    background-color: #eefdf8;
    color: #088659;
    border: 1px solid #35a07a;
}

.tag.tag-blue {
    background-color: #eff8fd;
    color: #0a6ea7;
    border: 1px solid #1476ae;
}

.tag.tag-lblue {
    background-color: #eff5ff;
    color: #0066ff;
    border: 1px solid #cbd9ee;
}

.tag.tag-dblue {
    background-color: #f6f8ff;
    color: #394c9d;
    border: 1px solid #cad0e9;
}

.tag.tag-brown {
    background-color: #fcf5ef;
    color: #9e5317;
    border: 1px solid #9e5317;
}

.tag.tag-red {
    background-color: #fff7f6;
    color: #e25344;
    border: 1px solid #ec5b4c;
}

.tag.tag-purple {
    background-color: #f8f0fc;
    color: #8c5da4;
    border: 1px solid #cda9e0;
}

.tag.tag-olive {
    background-color: #f5fae4;
    color: #537600;
    border: 1px solid #c2d28f;
}

.tag.tag-violet {
    background-color: #f3f0fc;
    color: #6c5da4;
    border: 1px solid #bdb6d6;
}

.tag.tag-gray {
    background-color: #f7f7f7;
    color: #666666;
    border: 1px solid #d1d1d1;
}

.tag.tag-disabled {
    background-color: var(--graye);
    color: var(--black6);
    border: 1px solid transparent;
}

.box-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    height: 20px;
    padding: 0 5px;
    border-radius: 3px;
    white-space: nowrap;
    color: var(--white);
    margin: 0 5px 0 0;
}

.box-tag.tag-green {
    background-color: var(--green);
    color: var(--white);
}

.box-tag.tag-gray {
    background-color: var(--graye);
    color: var(--black6);
}

/* .box-tag:before {content:'';position:absolute;left:-10px;top:0;width:10px;height:10px;border-left:1px solid var(--grayc);border-bottom:1px solid var(--grayc);} */

/* extension */
.ex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.ex-doc {
    background: url(../../images/front/ico/ex-doc.png) center center / contain no-repeat;
}

.ex-excel {
    background: url(../../images/front/ico/ex-excel.png) center center / contain no-repeat;
}

.ex-hwp {
    background: url(../../images/front/ico/ex-hwp.png) center center / contain no-repeat;
}

.ex-img {
    background: url(../../images/front/ico/ex-img.png) center center / contain no-repeat;
}

.ex-pdf {
    background: url(../../images/front/ico/ex-pdf.png) center center / contain no-repeat;
}

.ex-ppt {
    background: url(../../images/front/ico/ex-ppt.png) center center / contain no-repeat;
}

.ex-zip {
    background: url(../../images/front/ico/ex-zip.png) center center / contain no-repeat;
}

.ex-txt {
    background: url(../../images/front/ico/ex-txt.png) center center / contain no-repeat;
}

.ex-avi {
    background: url(../../images/front/ico/ex-avi.png) center center / contain no-repeat;
}

.ex-mp4 {
    background: url(../../images/front/ico/ex-mp4.png) center center / contain no-repeat;
}

.ex-wmv {
    background: url(../../images/front/ico/ex-wmv.png) center center / contain no-repeat;
}

/* flag */
.flag {
    display: inline-flex;
    width: 70px;
    height: 65px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--white);
    padding: 0px 7px 9px 3px;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.flag.bg-blue {
    background: url(../../images/front/ico/ico-flag-blue.png) center center / contain no-repeat !important;
}

.flag.bg-red {
    background: url(../../images/front/ico/ico-flag-red.png) center center / contain no-repeat !important;
}

.flag.bg-green {
    background: url(../../images/front/ico/ico-flag-green.png) center center / contain no-repeat !important;
}

.flag.bg-black6 {
    background: url(../../images/front/ico/ico-flag-black6.png) center center / contain no-repeat !important;
}

/* select */
select {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: var(--black3);
    padding: 0 23px 0 10px;
    border: 1px solid var(--grayc);
    background: url(../../images/front/form/select.png) center right 10px / 13px 8px no-repeat var(--white);
    border-radius: 5px;
    appearance: none;
}

select:disabled {
    border: 1px solid var(--grayc);
    background-color: var(--graye);
    color: var(--grayc);
}

select option[value=""][disabled] {
    display: none;
}

select.medium {
    height: 32px;
}

select[readonly] {
    pointer-events: none;
    background-color: var(--bg7);
}

select[readonly] option:not([selected]) {
    display: none;
}

/* input type text */
input:not([type="checkbox"],[type="radio"]) {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: var(--black3);
    font-weight: 400;
    padding: 0 10px;
    border: 1px solid var(--grayc);
    background-color: var(--white);
    border-radius: 5px;
}

input:not([type="checkbox"],[type="radio"]):disabled {
    border: 1px solid var(--grayc);
    background-color: var(--graye);
    color: var(--grayc);
}

input:not([type="checkbox"],[type="radio"])[readonly] {
    background-color: var(--bg7);
}

input:not([type="checkbox"],[type="radio"])::placeholder {
    color: #666;
    text-align: left !important;
}

input[type="date"],
input[type="datetime-local"] {
    position: relative;
    padding: 0 0 0 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    width: 20px;
    background: url(../../images/front/ico/ico-datepicker.svg) left center / 16px 16px no-repeat;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
    cursor: pointer;
    background: url(../../images/front/ico/ico-datepicker-blue.svg) left center / 16px 16px no-repeat;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    width: 20px;
    background: url(../../images/front/ico/ico-timepicker.svg) right center / 16px 16px no-repeat;
}

input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator {
    background: url(../../images/front/ico/ico-timepicker-blue.svg) right center / 16px 16px no-repeat;
}


/* datepicker */
input[datepicker="true"] {
    position: relative;
}

input[datepicker="true"] {
    background: url(../../images/front/ico/ico-datepicker.svg) center right 10px / 16px 16px no-repeat;
}

input[datepicker="true"].active {
    background: url(../../images/front/ico/ico-datepicker-blue.svg) center right 10px / 16px 16px no-repeat;
}

textarea {
    display: block;
    width: 100%;
    font-size: 16px;
    color: var(--black3);
    font-weight: 400;
    padding: 10px;
    border: 1px solid var(--grayc);
    background-color: var(--white);
    border-radius: 5px
}

textarea:disabled {
    border: 1px solid var(--grayc);
    background-color: var(--graye);
    color: var(--grayc);
}

textarea[readonly] {
    background-color: var(--bg7);
}

textarea::placeholder {
    color: #666;
}

textarea.areaResize {
    overflow: hidden;
}

/* input file */
.inp-file {
    display: flex;
    align-items: center;
}

.inp-file-text {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 16px;
    line-height: 38px;
    color: var(--black3);
    font-weight: 400;
    padding: 0 10px;
    border: 1px solid var(--grayc);
    background-color: var(--white);
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.inp-file-text:disabled {
    border: 1px solid var(--grayc);
    background-color: var(--graye);
    color: var(--grayc);
}

.inp-file-text.placeholder {
    color: var(--black9);
}

.table-row .form-input.form-input-file {
    display: block;
}

.form-input-file:only-child {
    flex: 1 1 100%;
}

.form-input-file {
    width: 100%;
}

.form-input-file .upload-response {
    margin-top: 15px;
}

.form-input-file ul {
    width: 100%;
}

.form-input-file label {
    display: inline-flex;
}

/* .form-input-file.form-input-thumb label {height:100%;} */
.form-input-file .form-input {
    display: inline-flex;
    flex-wrap: wrap;
}

.form-input-file label + ul li:first-child {
    margin-top: 15px;
}

.form-input-file p {
    font-size: 14px;
    color: var(--black6);
    margin-top: 10px;
}

.form-input-file ul li {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
}

.form-input-file ul li:not(:last-child) {
    margin-bottom: 12px;
}

.form-input-file ul li:before {
    content: '';
    flex: 0 0 24px;
    height: 24px;
    margin-right: 6px;
}

.form-input-file ul li[data_ext="xls"]:before,
.form-input-file ul li[data_ext="xlsx"]:before {
    background: url(../../images/front/ico/ex-excel.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="doc"]:before,
.form-input-file ul li[data_ext="docx"]:before {
    background: url(../../images/front/ico/ex-doc.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="hwp"]:before,
.form-input-file ul li[data_ext="hwpx"]:before {
    background: url(../../images/front/ico/ex-hwp.png) center center / contain no-repeat
}

.form-input-file ul li[data_ext="jpg"]:before,
.form-input-file ul li[data_ext="jpeg"]:before,
.form-input-file ul li[data_ext="png"]:before,
.form-input-file ul li[data_ext="gif"]:before,
.form-input-file ul li[data_ext="tif"]:before,
.form-input-file ul li[data_ext="tiff"]:before {
    background: url(../../images/front/ico/ex-img.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="pdf"]:before {
    background: url(../../images/front/ico/ex-pdf.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="ppt"]:before,
.form-input-file ul li[data_ext="pptx"]:before {
    background: url(../../images/front/ico/ex-ppt.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="zip"]:before {
    background: url(../../images/front/ico/ex-zip.png) center center / contain no-repeat;
}

.form-input-file ul li[data_ext="txt"]:before {
    background: url(../../images/front/ico/ex-txt.png) center center / contain no-repeat;
}
.form-input-file ul li[data_ext="avi"]:before {
    background: url(../../images/front/ico/ex-avi.png) center center / contain no-repeat;
}
.form-input-file ul li[data_ext="mp4"]:before {
    background: url(../../images/front/ico/ex-mp4.png) center center / contain no-repeat;
}
.form-input-file ul li[data_ext="wmv"]:before {
    background: url(../../images/front/ico/ex-wmv.png) center center / contain no-repeat;
}

.form-input-file ul li .name {
    display: -webkit-inline-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: top;
    -webkit-line-clamp: 1;
    letter-spacing: -0.02em;
    word-break: break-all;
}

.form-input-file ul li button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    margin-left: 6px;
}

.form-input-file.form-input-thumb label.form-input {
    display: inline-flex;
    flex-wrap: wrap;
}

.form-input-thumb .logo-image {
    display: flex;
    width: 242px;
    height: 122px; /* padding:10px; */
    border: 1px solid var(--grayc);
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 10px 20px;
}

.form-input-thumb .logo-image .logo-text {
    font-size: 30px;
    color: var(--black6);
    font-weight: 300;
}

.form-input-thumb .logo-image img[src=""] {
    display: none;
}

.form-input-thumb .logo-image img:not([src=""]) ~ .logo-text {
    display: none;
}

.form-input-thumb .logo-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

@media screen and (max-width: 1279px) {
    /* .table-row .form-input:not(.form-input-file) > *:not(:last-child):not(.label) {margin-right:0;} */
    .form-input-file label.form-input {
        display: flex;
    }

    .form-input-button label.form-input {
        display: table;
    }

    .form-input.mo-flex-wrap .form-input-file {
        width: 100%;
    }

    .form-input-thumb .logo-image {
        margin-bottom: 10px;
    }

    .form-input-file ul li {
        font-size: 14px;
    }

    .form-input-file ul li:not(:last-child) {
        margin-bottom: 6px;
    }

}

.form-input-number {
    position: relative;
    display: flex;
}

.form-input-number .btn-number {
    flex: 0;
    padding-left: 1px;
}

.form-input-number .btn-number button {
    display: flex;
    width: 20px;
    height: 20px;
    border: 1px solid var(--grayd);
    background-color: var(--bg7);
    align-items: center;
    justify-content: center;
}

.form-input-number .btn-number .num-up {
    border-radius: 5px 5px 0 0;
    border-bottom: 0;
}

.form-input-number .btn-number .num-down {
    border-radius: 0 0 5px 5px;
}

.form-input-number .btn-number button:after {
    content: '';
    width: 10px;
    height: 8px;
}

.form-input-number .btn-number .num-up:after {
    background: url(../../images/front/arrow/arrow-num-up.png) center center / contain no-repeat;
}

.form-input-number .btn-number .num-down:after {
    background: url(../../images/front/arrow/arrow-num-down.png) center center / contain no-repeat
}

/* input type cheeckbox */
.inp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inp input[type="radio"] {
    position: relative;
    display: inline-flex;
    appearance: none;
    cursor: inherit;
}

.inp input[type="radio"]:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../../images/front/form/input-radio.png) center center / contain no-repeat;
}

.inp input[type="radio"]:checked:before {
    background: url(../../images/front/form/input-radio-checked.png) center center / contain no-repeat;
}

.inp input[type="radio"]:disabled:before {
    background: url(../../images/front/form/input-radio-disabled.png) center center / contain no-repeat;
}

.inp input[type="radio"]:checked:disabled:before {
    background: url(../../images/front/form/input-radio-checked-disabled.png) center center / contain no-repeat;
}

.inp input[type="checkbox"] {
    display: inline-flex;
    appearance: none;
    cursor: inherit;
}

.inp input[type="checkbox"]:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../../images/front/form/input-checkbox.png) center center / contain no-repeat;
}

.inp input[type="checkbox"]:checked:before {
    background: url(../../images/front/form/input-checkbox-checked.png) center center / contain no-repeat;
}

.inp input[type="checkbox"]:disabled:before {
    background: url(../../images/front/form/input-checkbox-disabled.png) center center / contain no-repeat;
}

.inp input[type="checkbox"]:checked:disabled:before {
    background: url(../../images/front/form/input-checkbox-checked-disabled.png) center center / contain no-repeat;
}

.inp b {
    font-size: 16px;
    font-weight: 400;
    color: var(--black3);
    margin-left: 10px;
    line-height: 20px;
    white-space: nowrap;
}

.inp *:disabled ~ b {
    color: var(--grayc);
}

.inp.inp-round {
}

.inp.inp-round input[type="radio"],
.inp.inp-round input[type="checkbox"]:before {
    position: absolute !important;
    color: transparent !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    font-size: 1px !important;
    overflow: hidden !important;
}

.inp.inp-round b {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid var(--grayd);
    border-radius: 50%;
    background-color: var(--white);
    color: var(--black6);
}

.inp.inp-round input:focus ~ b {
    outline: 2px dashed var(--black);
}

.inp.inp-round input:checked ~ b {
    background-color: var(--green);
    border-color: transparent;
    color: var(--white);
}

.inp.inp-star {
    padding: 0 10px;
}

.inp.inp-star input[type="checkbox"]:before {
    width: 22px;
    height: 21px;
    background: url(../../images/front/ico/ico-rating.png) center center / contain no-repeat;
}

.inp.inp-star input[type="checkbox"]:checked:before {
    background: url(../../images/front/ico/ico-rating-on.png) center center / contain no-repeat;
}

.inp.inp-button {
}

.inp.inp-button input[type="radio"],
.inp.inp-button input[type="checkbox"]:before {
    position: absolute !important;
    color: transparent !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    font-size: 1px !important;
    overflow: hidden !important;
}

.inp.inp-button b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    padding: 0 10px;
    white-space: nowrap;
    text-align: center;
    background-color: var(--white);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.inp.inp-button:first-child b {
    margin-left: 0;
}

.inp.inp-button input:checked ~ b {
    background-color: var(--green);
    border-color: transparent;
    color: var(--white);
    font-weight: 500;
}

.inp.inp-button input:focus ~ b {
    outline: 2px dashed var(--black);
}


/* asterisk */
.ast {
    display: inline-flex;
    font-size: inherit;
    font-weight: inherit;
    color: #ff2828;
    margin-right: 3px;
}


/* toggle layerpopup */
.toggleParent {
    position: relative;
    z-index: 2;
}

.toggleParent .toggle-layer {
    display: none;
}

.toggleParent.active .toggle-layer {
    display: block;
}

.toggle-layer {
    position: relative;
    display: flex;
}

.toggle-layer.active {
    z-index: 3;
}

.toggle-layer .toggleTrigger {
    display: flex;
}

.toggle-layer .toggle-layer-inner {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    width: 300px;
    transform: translateX(-50%);
    border: 1px solid #dbdbdb;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fffef1;
    padding: 30px 20px 20px;
    z-index: 2;
}

.toggle-layer .toggle-layer-close {
    position: absolute;
    display: block;
    left: 50%;
    margin-left: -20px;
    top: 0;
    width: 40px;
    height: 20px;
    background: url(../../images/front/btn/btn-toggle-layer-close.png) center center / contain no-repeat;
}

.toggle-layer.active .toggle-layer-inner {
    display: block;
}

.toggle-layer .toggle-layer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grayc);
}

.toggle-layer .toggle-layer-title strong {
    font-size: 16px;
    font-weight: 500;
}

.toggle-layer .toggle-layer-title p {
    font-size: 14px;
}

.toggle-layer .toggle-layer-content {
    font-size: 16px;
    color: var(--black6);
    padding: 15px 0;
    text-align: center;
    border-bottom: 1px solid var(--grayc);
    display: block;
}

.toggle-layer .toggle-layer-content > * {
    font-size: inherit;
    color: inherit;
}

.toggle-layer .toggle-layer-inner > ul {
}

.toggle-layer .toggle-layer-inner > ul > li {
    border-bottom: 1px solid var(--grayd);
}

.toggle-layer .toggle-sub-tit {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--black3);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--grayc);
    margin-top: -10px;
    display: block;
}

/*layerpopup*/
.layer-popup {
    z-index: -2000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    padding: 20px;
}

.layer-popup[data-layer-id="ccNoticePopup"] {
    display: none; /* 기본은 숨김 */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* 팝업 내부 컨테이너 정중앙 정렬 */
.layer-popup[data-layer-id="ccNoticePopup"] .layer-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 10px;
    z-index: 10000;
}

.layer-popup[data-layer-id="ccNoticePopup"] .layer-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.layer-popup.active {
    z-index: 2000;
    animation: fadeIn 0.3s var(--cubic) both;
}

@keyframes fadeIn {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes popUp {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

.layer-dimmed {
    display: none;
    z-index: 1999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
}

.layer-popup.active .layer-dimmed {
    display: block;
}

.layer-popup .layer-wrap {
    position: relative;
    z-index: 2000;
    background: var(--white);
    display: block;
    max-width: 100%;
}

.layer-popup.active .layer-wrap {
    animation: popUp 0.3s var(--cubic) both;
}

.layer-wrap {
    padding: 23px 30px 40px;
    border-radius: 20px;
    border: 1px solid var(--grayd);
}

.layer-wrap .btn-layer-close {
    position: absolute;
    right: -17px;
    top: -11px;
    width: 50px;
    height: 50px;
    background: url(../../images/front/btn/btn-layer-close.png) center center / 18px 18px no-repeat;
}

.layer-wrap .layer-header {
    position: relative;
    border-bottom: 1px solid var(--grayc);
}

.layer-wrap .layer-header .tit {
    display: block;
    font-size: 20px;
    color: var(--green);
    padding-bottom: 10px;
    padding-right: 30px;
}

.layer-wrap .layer-content {
    padding-top: 30px;
    padding-bottom: 1px;
    max-height: 71vh;
    overflow: auto;
}

.layer-wrap .btn-wrap {
    margin-top: 20px;
}

.layer-wrap .layer-cookie {
    display: flex;
    margin-top: 60px;
    justify-content: center;
}

.layer-wrap .layer-cookie .no-display {
    font-size: 13px;
    font-weight: 300;
    color: var(--black9);
    text-decoration: underline;
}

/* layerpopup type */
.layer-popup.layer-alert {
    width: auto;
    height: auto;
}

.layer-popup.layer-alert.active .layer-dimmed {
    display: none;
}

.layer-popup.layer-alert .layer-wrap {
    border: 2px solid var(--black6);
    border-radius: 0;
}

.layer-popup.layer-alert.active .layer-wrap {
    animation: none;
}

.layer-popup.layer-alert .layer-header .tit {
}

.layer-popup.layer-alert .layer-footer {
}

.layer-alert .layer-wrap .layer-cookie {
    justify-content: flex-start;
    padding: 10px 20px;
    background-color: var(--black6);
    margin: 20px -30px 0;
}

/*layerpopup size*/
.layer-popup.layer-xlarge:not(.layer-alert) .layer-wrap {
    width: 960px;
}

.layer-popup.layer-large:not(.layer-alert) .layer-wrap {
    width: 640px;
}

.layer-popup.layer-medium:not(.layer-alert) .layer-wrap {
    width: 440px;
}

.layer-window-alert.layer-alert {
    opacity: 1;
    visibility: visible;
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin-top: calc(-1 * var(--header-height));
}

.layer-window-alert.layer-alert .layer-wrap {
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.layer-window-alert.layer-alert .layer-wrap .layer-content {
    max-height: none;
    overflow: visible;
    padding-top: 12px;
}

.layer-window-alert.layer-alert .layer-wrap .layer-header {
    position: static;
}

.layer-window-alert.layer-alert .layer-wrap .btn-layer-close {
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
}

.layer-window-alert.layer-alert .fixed-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.layer-window-alert.layer-alert .fixed-bottom .layer-cookie {
    justify-content: flex-start;
    padding: 10px 20px;
    background-color: var(--black6);
    margin: 0;
}

@media screen and (max-width: 1279px) {
    .layer-popup .layer-wrap {
        max-width: 100%;
        max-height: 100%;
        padding: 23px 15px 30px;
        overflow: hidden;
    }

    .layer-wrap .layer-content {
    }

    .layer-popup.layer-alert {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .layer-window-alert.layer-alert {
        display: block;
        width: auto;
        height: auto;
    }

    .layer-window-alert.layer-alert .layer-wrap .layer-content {
    }

    .layer-alert .layer-wrap .layer-cookie {
        margin: 20px -15px 0;
    }


}


/* table */
.table-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    margin-top: 45px;
}

.table-caption.table-border-bottom {
    border-bottom: 2px solid var(--black3);
    padding-bottom: 12px;
    margin-bottom: 0;
}

.table-caption p {
    font-size: 16px;
    color: var(--black3);
}

.table-caption p b {
    font-weight: 500;
    color: var(--blue);
}

.table-caption .left {
}

.table-caption .right {
}

.table-caption .right .desc {
    font-size: 14px;
}

.table-caption .right:only-child {
    margin-left: auto;
}

.table-caption .sort-tab {
}

.table-caption .sort-tab ul {
    display: flex;
}

.table-caption .sort-tab ul li {
    position: relative;
    display: flex;
    padding: 0 10px;
}

.table-caption .sort-tab ul li:not(:last-child):after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: var(--grayc);
}

.table-caption .sort-tab ul li a,
.table-caption .sort-tab ul li button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.table-caption .sort-tab ul li .icon {
    margin-right: 5px;
}

.table-caption .sort-tab ul li.active .icon {
    background-color: var(--blue);
}

.table-caption .sort-tab ul li.active a,
.table-caption .sort-tab ul li.active button {
    color: var(--blue);
}

.table-caption .sort-tab ul li.active a:before,
.table-caption .sort-tab ul li.active button:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: calc(100% + -2px);
    width: 100%;
    height: 1px;
    background-color: var(--blue);
}

.table-caption2 {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    margin-top: 45px;
}

@media screen and (max-width: 1279px) {
    .table-caption {
        margin-top: 30px;
    }

    .table-caption:not(.flex-nowrap) {
        display: block;
    }

    .table-caption:not(.flex-nowrap) .left ~ .right {
        margin-top: 5px;
    }

    .table-caption.flex-nowrap {
        flex-wrap: wrap;
    }
}

.table-col {
    background-color: var(--white);
}

.table-col + .table-col {
    margin-top: 20px;
}

.table-col + .table-col table {
    border-top: 1px solid #aaa;
}

.table-col table {
    width: 100%;
    table-layout: fixed;
    border-top: 2px solid var(--black3);
    border-collapse: collapse;
}

.table-col.table-layout-auto table {
    table-layout: auto;
}

.table-col table th {
    height: 50px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black6);
    padding: 8px 5px;
    text-align: center;
    border-bottom: 1px solid var(--graye);
    background-color: var(--bg5);
}

.table-col table td {
    position: relative;
    height: 60px;
    font-size: 16px;
    color: var(--black6);
    padding: 10px 5px;
    border-bottom: 1px solid var(--graye);
    text-align: center;
    word-break: break-all;
}

.table-col table td.al {
    padding-left: 20px;
}

.table-col table td.ar {
    padding-right: 20px;
}

.table-col table th,
.table-col table td {
    border-left: 1px solid var(--graye);
    border-right: 1px solid var(--graye);
}

.table-col table th:first-child,
.table-col table td:first-child {
    border-left: 0;
}

.table-col table th:last-child,
.table-col table td:last-child {
    border-right: 0;
}

.table-col table td .link,
.table-row table td .link {
    position: relative;
    display: inline-block;
    vertical-align: top; /* text-decoration:underline; */
    color: var(--blue);
}

.table-col table td .link:hover,
.table-col table td .link:focus,
.table-row table td .link:hover,
.table-row table td .link:focus {
    text-decoration: underline;
}

.table-col table td.al .new {
    padding-right: 16px;
}

.table-col table td .new:after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    background: url(../../images/front/ico/ico-new.svg) center center / contain no-repeat;
}

.table-col table .nodata {
    padding: 110px 0;
}

.table-col table .nodata p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 300;
    color: var(--black9);
}

.table-col table .nodata p .icon {
    margin-right: 5px;
}

.table-col.table-layout-auto table td.al a { /* white-space:normal; *//* padding-right:0; */
}

.table-col.table-layout-auto table td.al .new:after { /* display:inline-block; *//* position:static; *//* margin:0 0 0 5px; *//* height:24px; *//* vertical-align:top; */
}

.table-col .tr-checked, .table-col .tr-checked td {
    background-color: #fffef1;
}

.table-col .tr-check {
}

.table-col .inp.vm {
    width: 100%;
    height: 100%;
}

.table-col-sm {
    border: 1px solid var(--graye);
    border-bottom: 0;
    border-radius: 5px;
}

.table-col-sm table {
    border-top: 0;
}

.table-col-sm table th,
.table-col-sm table td {
    height: auto;
}

@media screen and (max-width: 1279px) {
    .table-col:not(.table-col-mo) {
        position: relative;
    }

    .table-col-mo {
    }

    .table-col-mo table {
        display: block;
    }

    .table-col-mo colgroup {
        display: none;
    }

    .table-col-mo table thead {
        position: absolute !important;
        color: transparent !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        font-size: 1px !important;
        overflow: hidden !important;
    }

    .table-col-mo table tbody {
        position: relative;
        display: block;
        overflow: hidden;
    }

    .table-col-mo table tbody tr {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        border-bottom: 1px solid var(--grayd);
        margin-left: -10px;
        margin-top: -4px;
    }

    .table-col-mo table tbody tr td {
        position: relative;
        height: 100%;
        font-size: 14px;
        color: var(--black6);
        border-bottom: 0;
        padding: 0 10px;
        margin-top: 4px;
        border-left: 0;
        border-right: 0;
        display: flex;
        align-items: center;
    }

    .table-col-mo table tr td:not(:first-child) {
        border-left: 0;
    }

    .table-col-mo table td.al {
        padding-left: inherit;
    }

    .table-col-mo table td.ar {
        padding-right: inherit;
    }

    .table-col-mo table tbody tr td:before {
        display: block;
        content: '';
        position: absolute;
        left: -1px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 12px;
        background-color: var(--grayd);
    }

    .table-col-mo table tbody tr td.article {
        flex: 1 1 100%;
        font-size: 16px;
    }

    .table-col.table-col-mo table .nodata {
        padding: 40px 0;
        flex: 1 1 100%;
        margin-bottom: 0;
        justify-content: center;
    }

    .table-col.table-layout-auto table td.al .new {
        padding-right: 20px;
    }

    .table-col.table-layout-auto table td.al .new:after {
        position: absolute;
        margin-left: 0;
    }

    .table-col table .nodata {
        padding: 40px 0;
    }

    .table-col-mo .icon-attachment {
        width: 10px;
        flex: 0 0 14px;
        height: 14px;
        -webkit-mask-size: 10px 14px;
        mask-size: 10px 14px;
    }

    .table-col-mo .icon {
        vertical-align: middle;
    }

    .table-col + .table-col {
        margin-top: 10px;
    }

    .table-col + .table-col table {
        border-top: 1px solid var(--black3);
    }

    /* scroll */
    .table-col-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .table-col-scroll table {
        min-width: 920px;
    }
}

.table-row {
}

.table-row table {
    width: 100%;
    table-layout: fixed;
    border-top: 2px solid var(--black3);
}

.table-row table th {
    height: 60px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black6);
    padding: 10px 5px;
    text-align: center;
    border-bottom: 1px solid var(--graye);
    background-color: var(--bg5);
}

.table-row table th .ast {
    margin: 0 0 0 5px;
}

.table-row table td {
    height: 60px;
    font-size: 16px;
    color: var(--black3);
    padding: 10px 20px;
    text-align: left;
    border-bottom: 1px solid var(--graye);
    background-color: var(--white);
    border-left: 1px solid var(--graye);
}

.table-row td + th {
    border-left: 1px solid var(--graye);
}

.table-row table + table {
    margin-top: 20px;
    border-top-width: 1px;
}

.table-row table tfoot th {
    background-color: var(--bg7);
}

@media screen and (max-width: 1279px) {
    .table-row:not(.table-row-mo) table {
        display: block;
    }

    .table-row:not(.table-row-mo) colgroup {
        display: none;
    }

    .table-row:not(.table-row-mo) tbody {
        display: block;
    }

    .table-row:not(.table-row-mo) tr {
        display: flex;
        flex-wrap: wrap;
    }

    .table-row:not(.table-row-mo) tr th {
        flex: 0 0 115px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 0;
    }

    .table-row:not(.table-row-mo) tr td {
        flex: 1 1 calc(100% - 115px);
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .table-row table + table {
        margin-top: 10px;
    }

    .table-row-mo {
    }

    .table-row-mo table {
        display: block;
    }

    .table-row-mo colgroup {
        display: none;
    }

    .table-row-mo tbody,
    .table-row-mo tfoot {
        display: block;
    }

    .table-row-mo tr {
        display: block;
    }

    .table-row-mo tr th {
        display: block;
        height: auto;
        background-color: var(--white);
        text-align: left;
        border-bottom: 0;
        padding: 20px 10px 10px;
        border-left: 0;
    }

    .table-row-mo tr td {
        display: block;
        height: auto;
        background-color: var(--white);
        text-align: left;
        border: 0;
        border-bottom: 1px solid var(--graye);
        padding: 0 10px 20px;
    }

    .table-row-mo tr th[rowspan] {
        padding-bottom: 15px;
        border-bottom: 1px dashed var(--graye);
    }

    .table-row-mo tr th[rowspan] + td,
    .table-row-mo tr td:only-child {
        padding-top: 20px;
        border-bottom: 1px dashed var(--graye);
    }

    .table-row-mo tr:last-child td:only-child {
        border-bottom-style: solid;
    }
}

.table-add-group {
}

.table-add-group .table-row {
    position: relative;
    display: flex;
}

.table-add-group .table-row table {
}

.table-add-group .table-add-button {
    flex: 0 0 70px;
    border-top: 2px solid var(--black3);
    border-left: 1px solid var(--graye);
    border-bottom: 1px solid var(--graye);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.table-add-group .table-add-button .btn-remove-table {
    margin-bottom: 20px;
}

.table-add-group .table-add-button .btn-move-up-table {
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.table-add-group .table-add-button .btn-move-down-table {
    border-radius: 0 0 5px 5px;
}

.table-add-group .table-row ~ .table-row {
    margin-top: 20px;
}

.table-add-group .table-row ~ .table-row table,
.table-add-group .table-row ~ .table-row .table-add-button {
    border-top: 1px solid var(--grayc);
}

.table-add-group .btn-row-add {
}

@media screen and (max-width: 1279px) {
    .table-add-group {
    }

    .table-add-group .table-row {
        padding-right: 0;
        display: block;
    }

    .table-add-group .table-row table {
    }

    .table-add-group .table-add-button {
        position: static;
        height: auto;
        width: auto;
        border-top: 1px solid var(--white);
        border-left: 0;
        border-bottom: 1px solid var(--graye);
        display: flex;
        flex-direction: row;
        margin-top: -1px;
        padding-bottom: 20px;
    }

    .table-add-group .table-add-button button {
        display: flex;
        flex: 1;
        border-radius: 0;
    }

    .table-add-group .table-add-button button:first-child {
        border-radius: 5px 0 0 5px;
        border-right: 0;
    }

    .table-add-group .table-add-button button:last-child {
        border-radius: 0 5px 5px 0;
        border-left: 0;
    }

    .table-add-group .table-add-button .btn-remove-table {
        margin-bottom: 0;
    }

    .table-add-group .table-add-button .btn-move-up-table {
        border-bottom: inherit;
        border-radius: inherit;
    }

    .table-add-group .table-add-button .btn-move-down-table {
        border-radius: inherit;
    }

    .table-add-group .table-row ~ .table-row .table-add-button {
        border-top: 0;
    }
}

.table-combi {
}

.table-combi table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 2px solid var(--black3);
}

.table-combi.table-layout-auto table {
    table-layout: auto;
}

.table-combi table th {
    height: 50px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black3);
    padding: 8px 5px;
    text-align: center;
}

.table-combi table tr td.al {
    padding-left: 20px;
}

.table-combi table tr td.ar {
    padding-right: 20px;
}

.table-combi table thead th {
    background-color: #e3ebef;
}

.table-combi table thead th.bg5 {
    border-color: var(--graye);
}

.table-combi table tbody th {
    background-color: var(--bg5);
}

.table-combi table td {
    height: 50px;
    font-size: 16px;
    color: var(--black6);
    padding: 8px 5px;
    border-bottom: 1px solid var(--graye);
    background-color: var(--white);
    text-align: center;
}

.table-combi table tfoot td {
    background-color: var(--bg7);
    color: var(--black3)
}

.table-combi table tfoot .bg5 {
    background-color: var(--bg7) !important;
}

.table-combi table thead th {
    border-left: 1px solid var(--grayc);
    border-right: 1px solid var(--grayc);
    border-bottom: 1px solid var(--grayc);
}

.table-combi table th {
    border-left: 1px solid var(--graye);
    border-right: 1px solid var(--graye);
    border-bottom: 1px solid var(--graye);
}

.table-combi table td {
    border-left: 1px solid var(--graye);
    border-right: 1px solid var(--graye);
}

.table-combi table th:first-child,
.table-combi table td:first-child {
    border-left: 0;
}

.table-combi table th:last-child,
.table-combi table td:last-child {
    border-right: 0;
}

.table-combi table tbody th + th {
    border-color: var(--graye);
}

.table-combi table th.bg5:first-child {
    border-color: var(--graye);
}

.table-combi .inp.vm {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1279px) {
    .table-combi table tr td.al {
        padding-left: 10px;
    }

    .table-combi table tr td.ar {
        padding-right: 10px;
    }

    /* scroll */
    .table-combi-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .table-combi-scroll table {
        min-width: 920px;
    }
}

.table-col-small {
}

.table-col-small table {
    width: 100%;
    table-layout: fixed;
}

.table-col-small.table-layout-auto table {
    table-layout: auto;
}

.table-col-small table th {
    position: relative;
    background-color: var(--bg7);
    border-top: 1px solid var(--graye);
    border-bottom: 1px solid var(--graye);
    font-size: 14px;
    color: var(--black6);
    font-weight: 400;
    padding: 4px 5px 3px;
}

.table-col-small table th:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: var(--graye);
}

.table-col-small table th:first-child {
    border-left: 1px solid var(--graye);
    border-radius: 5px 0 0 5px;
}

.table-col-small table th:first-child:after {
    display: none;
}

.table-col-small table th:last-child {
    border-right: 1px solid var(--graye);
    border-radius: 0 5px 5px 0;
}

.table-col-small table td {
    font-size: 14px;
    color: var(--black3);
    text-align: center;
    padding: 2px 5px 2px;
    word-break: normal;
}

.table-col-small .tab-nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--black6);
    background-color: var(--bg7);
    border: 1px solid var(--graye);
    border-radius: 5px;
    height: 164px;
    padding: 5px;
    text-align: center;
}

.table-view {
    border-top: 2px solid var(--black3);
}

.table-view .table-view {
    border-top-width: 1px;
}

.table-view .table-view-header h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--black3);
    text-align: center;
    padding: 17px 5px;
}

.table-view .table-view-header h3 > * {
    vertical-align: middle;
}

.table-view .table-view-header h3 > *:not(:last-child) {
    margin-right: 5px;
}

.table-view .table-view-header dl {
    display: flex;
    flex: 1 1 100%;
}

.table-view .table-view-header dl .list {
    display: flex;
    flex: 1 1 100%;
}

.table-view .table-view-header dl .list:first-child > *:first-child {
    border-left: 0;
}

.table-view .table-view-header dl .list:last-child > *:last-child {
    border-right: 0;
}

.table-view .table-view-header dl dt {
    font-size: 16px;
    color: var(--black6);
    background-color: var(--bg5);
    border: 1px solid var(--graye);
    flex: 0 0 100px;
    padding: 12px 5px;
    border-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.table-view .table-view-header dl dt.large {
    flex: 0 0 170px;
}

.table-view .table-view-header dl dd {
    font-size: 16px;
    color: var(--black3);
    border: 1px solid var(--graye);
    flex: 1 1 100%;
    padding: 12px 5px 12px 20px;
    border-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-break: break-word;
}

.table-view .table-view-header dl ~ dl .list > * {
    border-top: 0;
}

.table-view .table-view-body {
    padding: 40px;
    font-size: 16px;
    color: var(--black3);
    border-bottom: 1px solid var(--graye);
    word-break: break-all;
}

.table-view .table-view-body iframe[src*="youtube"] {
    display: flex;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

.table-view .table-view-body a {
    text-decoration: underline;
    color: var(--blue);
}

.table-view .table-view-content img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.table-view .webzine-wrap {
    max-width: 920px;
    padding: 0;
    position: relative;
    left: -40px;
}

@media screen and (max-width: 1279px) {
    .table-view {
    }

    .table-view .table-view-header h3 {
        text-align: left;
        border-bottom: 1px solid var(--graye);
        padding: 17px 10px;
    }

    .table-view .table-view-header h3 .box-tag {
        display: table;
        margin: 0 auto;
    }

    .table-view .table-view-header dl {
        flex-wrap: wrap;
        padding: 0 10px;
        margin-left: -20px;
        margin-top: 0;
    }

    .table-view .table-view-header dl:first-of-type {
        padding-top: 10px;
    }

    .table-view .table-view-header dl:last-of-type {
        padding-bottom: 15px;
    }

    .table-view .table-view-header dl .list {
        display: flex;
        flex: 0 1 auto;
        margin-left: 20px;
        align-items: flex-start;
        margin-top: 5px;
    }

    .table-view .table-view-header dl dt {
        font-size: 14px;
        font-weight: 300;
        background-color: transparent;
        border: 0;
        flex: 0 1 auto;
        padding: 0;
        margin-right: 5px;
    }

    .table-view .table-view-header dl dt.large {
        flex: 0 1 auto;
    }

    .table-view .table-view-header dl dd {
        font-size: 14px;
        background-color: transparent;
        border: 0;
        flex: 0 1 auto;
        padding: 0;
    }

    .table-view .table-view-header dl.table-view-file .list {
        margin-right: 0;
    }

    .table-view .table-view-header dl.table-view-file .list,
    .table-view .table-view-header dl.table-view-file .list dd {
        flex: 1 1 100%;
    }

    .table-view .table-view-header dl.table-view-file .form-input-file ul li {
        font-size: inherit;
        line-height: inherit;
        margin-bottom: 0;
    }

    .table-view .table-view-header dl.table-view-file .form-input-file ul li:before {
        flex: 0 0 20px;
        height: 20px;
    }

    .table-view .table-view-header dl.table-view-file .form-input-file ul li a {
        color: var(--blue);
        text-decoration: underline;
    }

    .table-view .table-view-body {
        padding: 15px 10px;
        border-top: 1px solid var(--graye);
        border-bottom: 1px solid var(--graye);
    }

    .table-view .table-view-body a {
        text-decoration: underline;
        color: var(--blue);
    }

    .table-view .table-view-content img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .table-view .webzine-wrap {
        left: 0;
    }
}

table .url,
.table-view .url,
.table-list .url {
    text-decoration: underline;
    color: var(--blue);
}

table .tr-check .inp,
table .tr-survey .inp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

table .desc {
    font-size: 14px;
    color: var(--black9);
    margin-top: 5px;
}

table th small {
    font-size: 0.875em;
}

table th,
table td {
    word-break: break-word;
}


/* table-list */
.table-list {
    border-top: 2px solid var(--black3);
}

.table-list > ul {
}

.table-list > ul > li {
    display: flex;
}

.table-list > ul > li {
    border-bottom: 1px solid var(--grayd);
}

.table-list .tbody {
    display: table;
    width: 100%;
    table-layout: auto;
    padding: 20px 10px;
}

.table-list .tbody dl {
    display: table-row-group;
}

.table-list .tbody dl .list {
    display: table-row;
}

.table-list .tbody dl dt {
    display: table-cell;
    white-space: nowrap;
    width: 0;
    padding-right: 15px;
    font-size: 14px;
    color: var(--black6);
    vertical-align: middle;
}

.table-list .tbody dl dd {
    display: table-cell;
    font-size: 16px;
    color: var(--black3);
    vertical-align: middle;
    width: 100%;
}

.table-list .tbody dl dd .link {
    position: relative;
    text-decoration: underline; /* color:var(--blue); */
}

.table-list .tbody dl dd .link.new {
    padding-right: 20px;
}

.table-list .tbody dl dd .link.new:after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    background: url(../../images/front/ico/ico-new.svg) center center / contain no-repeat;
}

.table-list .tbody dl .list:not(:last-child) dt,
.table-list .tbody dl .list:not(:last-child) dd {
    padding-bottom: 10px;
}

.table-list .right-side {
    border-left: 1px solid var(--grayd);
    padding: 20px 10px;
    text-align: center;
}

.table-list .right-side dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.table-list .right-side dl .list {
    padding-bottom: 10px;
}

.table-list .right-side dl dt {
    padding-bottom: 10px;
}

.table-list .btn-wrap {
    margin-top: 0;
    padding-bottom: 20px;
}

.table-list .btn-wrap > * > * {
    flex: 1;
}


@media screen and (max-width: 1279px) {
    table th small.vt {
        vertical-align: middle !important;
    }

    table .tr-check .inp {
        position: static;
    }
}

.search-filter + .table-col {
    margin-top: 45px;
}

/* pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
}

.pagination button:not(:last-child) {
    margin-right: 2px;
}

.pagination button.first,
.pagination button.prev,
.pagination button.next,
.pagination button.last {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: var(--white);
}

.pagination button.first:after,
.pagination button.prev:after,
.pagination button.next:after,
.pagination button.last:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--black6);
}

.pagination button.first:after {
    -webkit-mask: url(../../images/front/arrow/arrow-pagination-first.png);
    mask: url(../../images/front/arrow/arrow-pagination-first.png);
    -webkit-mask-size: 10px 10px;
    -webkit-mask-position: center center;
    mask-size: 10px 10px;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pagination button.prev {
    margin-right: 10px;
}

.pagination button.prev:after {
    -webkit-mask: url(../../images/front/arrow/arrow-pagination-prev.png);
    mask: url(../../images/front/arrow/arrow-pagination-prev.png);
    -webkit-mask-size: 6px 10px;
    -webkit-mask-position: center center;
    mask-size: 6px 10px;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pagination button.next {
    margin-left: 8px;
}

.pagination button.next:after {
    -webkit-mask: url(../../images/front/arrow/arrow-pagination-next.png);
    mask: url(../../images/front/arrow/arrow-pagination-next.png);
    -webkit-mask-size: 6px 10px;
    -webkit-mask-position: center center;
    mask-size: 6px 10px;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pagination button.last {
}

.pagination button.last:after {
    -webkit-mask: url(../../images/front/arrow/arrow-pagination-last.png);
    mask: url(../../images/front/arrow/arrow-pagination-last.png);
    -webkit-mask-size: 10px 10px;
    -webkit-mask-position: center center;
    mask-size: 10px 10px;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pagination button.first:disabled,
.pagination button.prev:disabled,
.pagination button.next:disabled,
.pagination button.last:disabled {
    border-color: var(--grayd);
    background-color: var(--bg7);
    display: none;
}

.pagination button.first:disabled:after,
.pagination button.prev:disabled:after,
.pagination button.next:disabled:after,
.pagination button.last:disabled:after {
    opacity: 0.5;
}

.pagination button {
    min-width: 32px;
    height: 32px;
    font-size: 15px;
    color: var(--black6);
    text-align: center;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grayd);
    border-radius: 5px;
}

.pagination button.active {
    font-weight: 500;
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid transparent;
    border-color: transparent;
}

@media screen and (max-width: 1279px) {
    .pagination button:not(.first,.prev,.next,.last,.active) {
        display: none;
    }
}

/* page-navigation */
.page-navigation {
    margin-top: 60px;
}

.page-navigation a {
    display: block;
}

.page-navigation a dl {
    display: flex;
}

.page-navigation a dl dt {
    display: flex;
    flex: 0 0 120px;
    font-size: 16px;
    color: var(--black6);
    background-color: var(--bg5);
    border: 1px solid var(--graye);
    padding: 12px 5px;
    border-left: 0;
    align-items: center;
    justify-content: center;
}

.page-navigation a dl dt:after {
    display: block;
    content: '';
    width: 12px;
    height: 7px;
    background: url(../../images/front/arrow/arrow-accordion.png) center center / contain no-repeat;
    margin-left: 10px;
}

.page-navigation a:first-child dl dt:after {
    transform: rotate(180deg);
}

.page-navigation a dl dd {
    font-size: 16px;
    color: var(--black3);
    background-color: var(--white);
    border: 1px solid var(--graye);
    flex: 0 1 100%;
    padding: 12px 5px 12px 20px;
    border-left: 0;
    border-right: 0;
    max-width: calc(100% - 120px);
}

.page-navigation a ~ a dl > * {
    border-top: 0;
}

@media screen and (max-width: 1279px) {
    .page-navigation {
        margin-top: 40px;
    }

    .page-navigation a dl dt {
        position: relative;
        flex: 0 0 80px;
        background-color: transparent;
        border: 1px solid var(--graye);
        border-right: 0;
        border-left: 0;
        padding: 12px 5px;
        align-items: center;
        justify-content: center;
    }

    .page-navigation a dl dt:after {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -8px;
        content: '';
        width: 1px;
        height: 16px;
        background: var(--graye);
    }

    .page-navigation a:first-child dl dt:after {
        transform: rotate(180deg);
    }

    .page-navigation a dl dd {
        max-width: calc(100% - 80px);
    }

    .page-navigation a ~ a dl > * {
        border-top: 0;
    }

}

/* tab-content */
.tab-content .tabpanel {
    display: none;
}

.tab-content .tabpanel.active {
    display: block;
}

.tab-round {
}

.tab-round .tab-list {
    display: flex;
}

.tab-round .tab-list li {
    flex: 1;
    position: relative;
}

.tab-round .tab-list li button {
    display: flex;
    width: 100%;
    height: 50px;
    font-size: 18px;
    font-weight: 500;
    background-color: var(--sgreen);
    color: var(--white);
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s var(--cubic);
}

.tab-round .tab-list li:first-child button {
    border-radius: 20px 5px 0 0;
}

.tab-round .tab-list li:last-child button {
    border-radius: 5px 20px 0 0;
}

.tab-round .tab-list li:not(.active):not(:last-child) button {
    border-right: 1px solid #20936b;
}

.tab-round .tab-list li.active button {
    background-color: var(--white);
    font-weight: 700;
    color: var(--black);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
}

.tab-round .tab-list li a {
    position: absolute;
    right: 15px;
    top: 15px;
    display: flex;
    width: 24px;
    height: 24px;
    border: 1px solid var(--graye);
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s var(--cubic);
}

.tab-round .tab-list li.active a {
    opacity: 1;
    z-index: auto;
}

.tab-sub {
    position: relative;
    margin-top: 45px;
}

.tab-sub > .tab-mobile-trigger {
    display: none;
}

.tab-sub > .tab-list {
    display: flex;
    margin: 0 5px 45px;
}

.tab-sub > .tab-list li {
    flex: 1;
    position: relative;
}

.tab-sub > .tab-list li a,
.tab-sub > .tab-list li button {
    display: flex;
    width: calc(100% + 10px);
    margin: 0 -5px;
    height: 50px;
    font-size: 18px;
    color: var(--black6);
    font-weight: 400;
    background-color: #fbfbfb;
    border: 1px solid var(--graye);
    border-bottom-color: var(--blue);
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s var(--cubic);
}

.tab-sub > .tab-list li:first-child a,
.tab-sub > .tab-list li:first-child button {
    border-radius: 5px 0 0 0;
}

.tab-sub > .tab-list li:last-child a,
.tab-sub > .tab-list li:last-child button {
    border-radius: 0 5px 0 0;
}

.tab-sub > .tab-list li.active a,
.tab-sub > .tab-list li.active button {
    position: relative;
    z-index: 2;
    background-color: var(--white);
    font-weight: 700;
    color: var(--blue);
    border-color: var(--blue);
    border-bottom-color: transparent;
    border-radius: 5px 5px 0 0;
}

@media screen and (min-width: 1280px) {
    .tab-sub-column {
        display: flex;
    }

    .tab-sub-column > .tab-list {
        display: block;
        margin: 0;
        flex: 0 0 150px;
    }

    .tab-sub-column > .tab-list li:not(:last-child) {
        margin-bottom: 14px;
    }

    .tab-sub-column > .tab-list li a,
    .tab-sub-column > .tab-list li button {
        display: block;
        width: 100%;
        margin: 0;
        height: auto;
        font-size: 14px;
        color: var(--black3);
        font-weight: 400;
        background-color: transparent;
        border: 0;
        border-radius: 0;
    }

    .tab-sub-column > .tab-list li.active a,
    .tab-sub-column > .tab-list li.active button {
        position: relative;
        background-color: inherit;
        font-weight: 700;
        color: var(--blue);
        border-radius: 0;
    }

    .tab-sub-column > .tab-list li.active a:after,
    .tab-sub-column > .tab-list li.active button:after {
        display: block;
        content: '';
        position: absolute;
        right: -21px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        background: url(../../images/front/arrow/arrow-tab-sub-column.png) center center / contain no-repeat;
    }

    .tab-sub-column .tabpanel-wrap {
        flex: 1 1 100%;
        padding: 0 10px 0 20px;
    }
}


@media screen and (max-width: 1279px) {
    .tab-sub > .tab-mobile-trigger {
        position: relative;
        display: flex;
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        color: var(--blue);
        align-items: center;
        justify-content: center;
        padding: 12px 34px;
        border: 1px solid var(--blue);
        border-radius: 5px;
        margin-bottom: 30px;
    }

    .tab-sub > .tab-mobile-trigger:after {
        display: block;
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 8px;
        background: url(../../images/front/arrow/arrow-tab-trigger.png) center center / contain no-repeat;
    }

    .tab-sub > .tab-list {
        display: none;
        position: absolute;
        left: 0;
        top: 60px;
        width: 100%;
        margin: 0;
        border: 1px solid var(--graye);
        border-radius: 5px;
        background-color: var(--white);
        z-index: 2;
    }

    .tab-sub > .tab-list li:not(:last-child) {
        border-bottom: 1px solid var(--graye);
    }

    .tab-sub > .tab-list li a,
    .tab-sub > .tab-list li button {
        width: 100%;
        margin: 0;
        font-size: 16px;
        color: var(--black3);
        background-color: var(--white);
        border: 0;
        align-items: center;
        justify-content: center;
    }

    .tab-sub > .tab-list li:first-child a,
    .tab-sub > .tab-list li:first-child button {
        border-radius: 0
    }

    .tab-sub > .tab-list li:last-child a,
    .tab-sub > .tab-list li:last-child button {
        border-radius: 0;
    }

    .tab-sub > .tab-list li.active a,
    .tab-sub > .tab-list li.active button {
        color: var(--blue);
        background-color: transparent;
    }

    .tab-sub.active > .tab-list {
        display: block;
    }

}

.tab-main {
}

.tab-main > .tab-list {
    display: flex;
}

.tab-main > .tab-list li {
    flex: 1;
    position: relative;
    min-height: 50px;
}

.tab-main > .tab-list li button {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 400;
    background-color: #fbfbfb;
    border: 1px solid var(--graye);
    color: var(--black3);
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s var(--cubic);
    background: url(../../images/front/main/bg-tab-dotted01.png) 4px 4px repeat;
}

.tab-main > .tab-list li.active button {
    background-color: var(--white);
    font-weight: 700;
    color: var(--brown);
    border-color: var(--brown);
    background: var(--white);
}

.tab-main > .tab-list.tab-list-small li {
    min-height: 30px;
}

.tab-main > .tab-list.tab-list-small li button {
    font-size: 16px;
    padding: 2px 0;
}

.tab-main > .tab-list.tab-list-small li.active button {
    font-weight: 500;
}

.tab-main > .tab-list li:first-child button {
    border-radius: 10px 0 0 10px;
}

.tab-main > .tab-list li:last-child button {
    border-radius: 0 10px 10px 0;
}

.tab-main > .tab-list.tab-list-small li:first-child button {
    border-radius: 5px 0 0 5px;
}

.tab-main > .tab-list.tab-list-small li:last-child button {
    border-radius: 0 5px 5px 0;
}

.tab-main > .tab-list li:not(.active):not(:last-child) button {
    border-right-color: transparent;
}

@media screen and (max-width: 1023px) {
    .tab-main > .tab-list {
        position: relative;
        flex-wrap: wrap;
    }

    .tab-main > .tab-list:after {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(100% + 1px);
        border: 1px solid var(--graye);
        background-color: #fbfbfb;
        z-index: -1;
        border-radius: 10px;
    }

    .tab-main > .tab-list li {
        flex: 0 0 50%;
        position: relative;
        min-height: 50px;
    }

    .tab-main > .tab-list li button {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 5px 0;
        font-size: 16px;
        font-weight: 400;
        background-color: #fbfbfb;
        color: var(--black3);
        text-align: center;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s var(--cubic);
        border: 0;
    }

    .tab-main > .tab-list li button:after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        width: calc(100% + 0px);
        height: calc(100% + 1px);
        border: 1px solid var(--graye);
        z-index: 0;
        border-radius: inherit;
    }

    .tab-main > .tab-list li:nth-child(odd) button:after {
        left: 0;
    }

    .tab-main > .tab-list li:nth-child(even) button:after {
        right: 0;
    }

    .tab-main > .tab-list li.active button {
        background-color: var(--white);
        font-weight: 700;
        color: var(--brown);
    }

    .tab-main > .tab-list li.active button:after {
        border-color: var(--brown);
        z-index: 1;
    }

    .tab-main-n2 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 10px;
    }

    .tab-main-n2 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 10px 0;
    }

    .tab-main-n3 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n3 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n3 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n4 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n4 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n4 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n4 > .tab-list li:nth-child(4) button {
        border-radius: 0 0 10px 0;
    }

    .tab-main-n5 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n5 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n5 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n5 > .tab-list li:nth-child(4) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n5 > .tab-list li:nth-child(5) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n6 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n6 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n6 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n6 > .tab-list li:nth-child(4) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n6 > .tab-list li:nth-child(5) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n6 > .tab-list li:nth-child(6) button {
        border-radius: 0 0 10px 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(4) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(5) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(6) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n7 > .tab-list li:nth-child(7) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n8 > .tab-list li:nth-child(1) button {
        border-radius: 10px 0 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(2) button {
        border-radius: 0 10px 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(3) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(4) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(5) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(6) button {
        border-radius: 0 0 0 0;
    }

    .tab-main-n8 > .tab-list li:nth-child(7) button {
        border-radius: 0 0 0 10px;
    }

    .tab-main-n8 > .tab-list li:nth-child(8) button {
        border-radius: 0 0 10px 0;
    }


}

/* toggle */
.toggleParent > .toggleTarget {
    display: none;
}

.toggleParent.active > .toggleTarget {
    display: block;
    z-index: 2;
}

/* toggle */
.dropDown {
    position: relative;
}

.dropDown .trigger {
    position: relative;
}

.dropDown.active {
    z-index: 2;
}

/* list */
.box-desc-list {
    padding: 25px 45px;
    color: var(--black6);
    border-radius: 10px;
}

.box-desc-list .box-desc-tit {
    display: flex;
    font-size: 16px;
    color: var(--black3);
    align-items: center;
    margin-bottom: 10px;
    font-weight: 500;
}

.box-desc-list .box-desc-tit .icon {
    margin-right: 5px;
}

.box-desc-list > ul {
    font-size: 14px;
}

.box-desc-list > ul > li {
    position: relative;
    padding-left: 8px;
}

.box-desc-list > ul > li:not(:last-child) {
    margin-bottom: 8px;
}

.box-desc-list > ul > li:before {
    content: '\00B7';
    position: absolute;
    left: 0;
    top: -1px;
    opacity: 0.8;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
    text-align: left;
}

@media screen and (max-width: 1279px) {
    .box-desc-list {
        padding: 15px 20px;
    }
}

.box-notice-list {
}

.box-notice-list dl {
}

.box-notice-list dl dt {
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white);
    padding: 8px;
    border-radius: 5px 5px 0 0;
}

.box-notice-list dl dt .icon-notice {
    background-color: var(--white);
    margin-right: 6px;
}

.box-notice-list dl dd {
    border: 1px solid var(--graye);
    border-top: 0;
    padding: 20px;
}

.box-notice-list dl dd:last-child {
    border-radius: 0 0 5px 5px;
}

.box-notice-list dl dd ~ dd {
}

.box-notice-list dl dd ul {
}

.box-notice-list dl dd ul li {
    position: relative;
    font-size: 16px;
    color: var(--black3);
    padding-left: 14px;
}

.box-notice-list dl dd ul li:not(:last-child) {
    margin-bottom: 3px;
}

.box-notice-list dl dd ul li:before {
    content: '';
    width: 7px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 12px;
    background-color: var(--blue);
}

.dot-list {
}

.dot-list > li {
    position: relative;
    padding-left: 10px;
}

.dot-list > li:before {
    content: '\00B7';
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
    text-align: left;
    color: var(--black9);
}

.dot-list.dot-list-sm > li:before {
    font-size: 1em;
    color: inherit;
    line-height: inherit;
    font-weight: 500;
}

.dot-list ul {
    padding-left: 10px;
}

.dot-list .hyp-list {
    margin-left: -10px;
}

.hyp-list > li {
    position: relative;
    padding-left: 10px;
}

.hyp-list > li:before {
    content: '-';
    font-size: inherit;
    color: inherit;
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    text-align: left;
}

ul.num-list {
    counter-reset: number 0;
}

ul.num-list > li {
    position: relative;
    padding-left: 20px;
}

ul.num-list > li:before {
    counter-increment: number;
    content: counter(number) ".";
    font-size: inherit;
    color: inherit;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: center;
}

ul.num-list2 {
    counter-reset: number2 0;
    margin-top: -5px;
}

ul.num-list2 > li {
    position: relative;
    padding-left: 24px;
    margin-top: 5px;
}

ul.num-list2 > li:before {
    counter-increment: number2;
    content: counter(number2, decimal-leading-zero);
    font-size: inherit;
    color: var(--green);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: center;
}

@counter-style circled-numbers {
    system: fixed;
    symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469" "\246A" "\246B" "\246C" "\246D" "\246E" "\246F" "\2470" "\2471" "\2472" "\2473" "\2474" "\2475" "\2476" "\2477" "\2478" "\2479" "\247A" "\247B" "\247C" "\247D" "\247E" "\247F";
}

ul.num-list.circle {
    counter-reset: myCounter;
}

ul.num-list.circle > li:before {
    content: counter(myCounter, circled-numbers) " ";
    counter-increment: myCounter;
}

ul.num-list.circle.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* photo */
.d-flex .tit {
    white-space: nowrap;
    padding-right: 5px;
}

/* rating-star */
.rating-star-wrap {
}

.rating-star-wrap .rating-star-inner {
    display: flex;
    justify-content: center;
}

.rating-star-wrap .rating-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--green);
    margin-top: 10px;
}

.rating-star {
    display: flex;
    flex-direction: row-reverse;
}

.rating-star input[type="radio"] ~ label {
    display: block;
    width: 27px;
    height: 25px;
    background: url(../../images/front/ico/ico-rating-off.png) center center / contain no-repeat;
}

.rating-star input[type="radio"]:checked ~ label {
    background: url(../../images/front/ico/ico-rating-on.png) center center / contain no-repeat;
}

.rating-star label:not(:last-child) {
    margin-left: 15px;
}

/* tbl */
.tbl {
    display: table;
    width: 100%;
    table-layout: auto;
}

.tbl dl {
    display: table-row-group;
}

.tbl dl .list {
    display: table-row;
}

.tbl dl dt {
    display: table-cell;
    white-space: nowrap;
    width: 0;
}

.tbl dl dd {
    display: table-cell;
}

/* pigeon */
.pigeon .toggleTarget {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}

@media screen and (max-width: 1279px) {
    .pigeon {
        display: table;
    }
}

/* 개인정보처리방침 */
.privacy-policy-contents {
    color: #5b5b5b;
}

table.per_info {
    border: 0;
    border-collapse: collapse;
    background: none;
}

table.per_info td {
    border: 1px #ccc solid;
    text-align: center;
    font-size: 14px;
    height: 20px;
    padding: 3px;
}

table.per_info2 {
    border: 0;
    border-collapse: collapse;
    background: none;
}

table.per_info2 td {
    border: 0;
    height: 20px;
    padding: 5px 3px;
    text-align: left;
}

table.per_info3 td {
    vertical-align: top;
    padding: 20px 0;
}

table.per_info2 td a {
    display: flex;
    align-items: center;
}

.privacy-policy-contents .desc {
    font-size: 16px;
    margin-bottom: 30px;
    padding-top: 20px;
}

.privacy-policy-contents .sub-title {
    display: flex;
    align-items: center;
}

.privacy-policy-contents .sub-item-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.privacy-policy-contents .badge {
    display: inline-block;
    padding: 0 10px;
    border-radius: 5px;
    height: 24px;
    line-height: 25px;
    background-color: #237DB1;
    color: #fff;
    font-size: 12px;
}

.privacy-policy-contents .badge.badge-grey {
    background-color: #b5b2b2;
}

.privacy-policy-contents .privacy-policy-txt {
    padding: 20px 0;
    font-size: 15px;
    line-height: 26px;
}

.privacy-policy-contents .file-link-box {
    flex-wrap: wrap;
    display: flex;
    padding: 10px 0 20px;
}

.privacy-policy-contents .file-link {
    border: 1px solid #d1d1d1;
    padding: 3px 8px;
    white-space: nowrap;
    font-size: 13px;
}

.privacy-policy-contents .file-link + .file-link {
    margin-left: 10px;
}

/* 추가 -- 2023.10.24 */

.icon-star.disabled {
    width: 18px;
    flex: 0 0 18px;
    height: 17px;
    background: url(../../images/front/ico/ico-rating.png) center center / contain no-repeat;
}

.review-register-row {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 65px;
}

.review-register-row .title {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    margin-right: 76px;
}

.review-register-row .acc-trigger {
    margin-right: 31px;
}

.review-register-row .score {
    font-size: 16px;
    color: #666;
}

.review-register-row .score .value {
    font-size: 18px;
    font-weight: 500;
}

.review-register-row .score .total {

}

.review-register-row .btn-area {
    margin-left: auto;
}

@media (max-width: 768px) {
    .review-register-row {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .review-register-row .title {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .review-register-row .acc-trigger {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .review-register-row .score {
        margin-bottom: 10px;
    }

    .review-register-row .btn-area {
        margin-left: 0;
    }
}

/* 추가 -- 2024.05.23 */
.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

/* 파일 업로드 팝업 */
.popup-loading {
    text-align: center;
    padding: 15px;
    color: #363636;
}

.popup-loading .txt-1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}

.popup-loading .txt-2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 20px;
}

.popup-loading .txt-3 {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 30px;
}

.popup-loading .progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
}

.popup-loading .progress-bar .bar {
    position: absolute;
    background-color: #007130;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.popup-loading .percentage {
    text-align: center;
    color: #454545;
}