@charset "utf-8";
.icon{
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: var(--transition);
}
.icon.sm{
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}
.icon.lg{
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon-chevron-left-white{
    background-image: url(../image/icon/icon-chevron-left-white.svg);
}
.icon-chevron-right-white{
    background-image: url(../image/icon/icon-chevron-right-white.svg);
}
.icon-arrow-right-white{
    background-image: url(../image/icon/icon-arrow-right-white.svg);
}
.icon-play-circle-white{
    background-image: url(../image/icon/icon-play-circle-white.svg);
}
.icon-reset-grey{
    background-image: url(../image/icon/icon-reset-grey.svg);
}
.icon-delete-grey{
    background-image: url(../image/icon/icon-delete-grey.svg);
}
.icon-direction{
    background-image: url(../image/icon/icon-direction-white.svg);
}
.icon-hint-warning{
    background-image: url(../image/icon/icon-hint-warning.svg);
}
.icon-minus-white{
    background-image: url(../image/icon/icon-minus-white.svg);
}
.icon-plus-white{
    background-image: url(../image/icon/icon-plus-white.svg);
}
.icon-close-circle-danger{
    background-image: url(../image/icon/icon-close-circle-danger.svg);
}
.icon-card-grey{
    background-image: url(../image/icon/icon-card-grey.svg);
}
.icon-bank-grey{
    background-image: url(../image/icon/icon-bank-grey.svg);
}
.icon-file-secondary{
    background-image: url(../image/icon/icon-file-secondary.svg);
}
.icon-close-circle-fill-grey{
    background-image: url(../image/icon/icon-close-circle-fill-grey.svg);
}
.icon-upload-white{
    background-image: url(../image/icon/icon-upload-white.svg);
}
.icon-search-white{
    background-image: url(../image/icon/icon-search-white.svg);
}
.icon-danger-danger{
    background-image: url(../image/icon/icon-danger-danger.svg);
}
.icon-blank{
    width: 130px;
    height: 130px;
    background-image: url(../image/icon/icon-blank.svg);
}
.icon-done{
    width: 130px;
    height: 130px;
    background-image: url(../image/icon/icon-done.svg);
}
.icon-done2{
    background-image: url(../image/icon/icon-done2.svg);
}
.icon-done3{
    background-image: url(../image/icon/icon-done3.svg);
}
.icon-done4{
    background-image: url(../image/icon/icon-done4.svg);
}
.icon-done5{
    background-image: url(../image/icon/icon-done5.svg);
}
.icon-done6{
    background-image: url(../image/icon/icon-done6.svg);
}
.icon-done-apply{
    width: 130px;
    height: 130px;
    background-image: url(../image/icon/icon-done-apply.svg);
}
.icon-loading{
    width: 100px;
    height: 100px;
    background-image: url(../image/icon/icon-loading.svg);
}
.icon-company{
    width: 80px;
    height: 80px;
    background-image: url(../image/icon/icon-company.svg);
}
@media screen and (max-width:1000px){}
@media screen and (max-width:767px){
    .icon-blank,
    .icon-done,
    .icon-done-apply,
    .icon-loading{
        width: 80px;
        height: 80px;
    }
    .icon-company{
        width: 60px;
        height: 60px;
    }
}
@media screen and (max-width:480px){}
@media screen and (max-width:420px){}

/* 포인트 컬러로 들어가는 아이콘은 mask로 처리 */
:root{
    --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='5' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='19' r='1'/%3E%3Crect x='8' y='4' width='14' height='2' rx='1'/%3E%3Crect x='8' y='11' width='14' height='2' rx='1'/%3E%3Crect x='8' y='18' width='14' height='2' rx='1'/%3E%3C/svg%3E");
    --icon-card-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4V9H9V4H4ZM11 9C11 10.1046 10.1046 11 9 11H4C2.89543 11 2 10.1046 2 9V4C2 2.89543 2.89543 2 4 2H9C10.1046 2 11 2.89543 11 4V9Z'/%3E%3Cpath d='M15 4V9H20V4H15ZM22 9C22 10.1046 21.1046 11 20 11H15C13.8954 11 13 10.1046 13 9V4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V9Z'/%3E%3Cpath d='M15 15V20H20V15H15ZM22 20C22 21.1046 21.1046 22 20 22H15C13.8954 22 13 21.1046 13 20V15C13 13.8954 13.8954 13 15 13H20C21.1046 13 22 13.8954 22 15V20Z'/%3E%3Cpath d='M4 15V20H9V15H4ZM11 20C11 21.1046 10.1046 22 9 22H4C2.89543 22 2 21.1046 2 20V15C2 13.8954 2.89543 13 4 13H9C10.1046 13 11 13.8954 11 15V20Z'/%3E%3C/svg%3E");
    --icon-check-active: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20.001' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1563,393h-12a4,4,0,0,1-4-4V377a4,4,0,0,1,4-4h12a4,4,0,0,1,4,4v12A4,4,0,0,1-1563,393Zm-10-10.8a.794.794,0,0,0-.576.245.8.8,0,0,0,.021,1.131l3.632,3.5a.792.792,0,0,0,.554.224c.027,0,.057,0,.092,0a.8.8,0,0,0,.58-.36l4.868-7.5a.793.793,0,0,0,.112-.6.794.794,0,0,0-.347-.5.8.8,0,0,0-.436-.13.8.8,0,0,0-.671.364l-4.341,6.687-2.933-2.827A.8.8,0,0,0-1573,382.2Z' transform='translate(1579 -373)' /%3E%3C/svg%3E");
    --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.2863 8.29926C16.6733 7.90526 17.3073 7.89958 17.7014 8.28656C18.0954 8.67355 18.101 9.30758 17.7141 9.7016L10.8391 16.7016C10.651 16.893 10.3935 17.0004 10.1252 17.0004C9.85687 17.0004 9.59935 16.893 9.41133 16.7016L6.28633 13.519C5.89975 13.125 5.90524 12.4918 6.29902 12.1049C6.69305 11.7179 7.32707 11.7236 7.71406 12.1176L10.1242 14.5717L16.2863 8.29926Z'/%3E%3Cpath d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22V24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24V22C17.5228 22 22 17.5228 22 12Z'/%3E%3C/svg%3E");
    --icon-loading-inner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 95C50 97.7614 47.7558 100.026 45.0082 99.7502C36.8828 98.935 29.0535 96.1385 22.2215 91.5735C13.999 86.0794 7.5904 78.2705 3.80602 69.1342C0.0216405 59.9979 -0.968525 49.9445 0.960737 40.2455C2.56376 32.1866 6.1225 24.673 11.2915 18.351C13.0394 16.2132 16.2276 16.2276 18.1802 18.1802C20.1328 20.1328 20.1039 23.282 18.41 25.4628C14.6114 30.3533 11.9855 36.0784 10.7686 42.1964C9.22518 49.9556 10.0173 57.9983 13.0448 65.3073C16.0723 72.6164 21.1992 78.8635 27.7772 83.2588C32.9638 86.7243 38.8688 88.9159 45.0129 89.6879C47.7528 90.0322 50 92.2386 50 95Z'/%3E%3C/svg%3E");
    --icon-modal-dot: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M10 16a6 6 0 1 1 0-12a6 6 0 0 1 0 12Zm0-10a4 4 0 1 0 0 8a4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}
.icon-card-list{
    background-color: var(--grey-darken4);
    -webkit-mask: var(--icon-card-list) no-repeat center / contain;
    mask: var(--icon-card-list) no-repeat center / contain;
}
.icon-list{
    background-color: var(--grey-darken4);
    -webkit-mask: var(--icon-list) no-repeat center / contain;
    mask: var(--icon-list) no-repeat center / contain;
}
.icon-check-circle-primary{
    background-color: var(--primary-base);
    -webkit-mask: var(--icon-check-circle) no-repeat center / contain;
    mask: var(--icon-check-circle) no-repeat center / contain;
}
.icon-loading-inner{
    width: 100%;
    height: 100%;
    background-color: var(--primary-lighten1);
    -webkit-mask: var(--icon-loading-inner) no-repeat center / contain;
    mask: var(--icon-loading-inner) no-repeat center / contain;
}