.icon,
.icon svg{
    width: 24px;
    height: 24px;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.icon.lg,
.icon.lg svg{
    width: 28px;
    height: 28px;
}
.icon.sm,
.icon.sm svg{
    width: 20px;
    height: 20px;
}
.icon.xs,
.icon.xs svg{
    width: 16px;
    height: 16px;
}
.icon.xxs,
.icon.xxs svg{
    width: 12px;
    height: 12px;
}

.iconResetPoint{
    background-image: url(../image/icon-reset-point.svg);
}
.iconPlus{
    background-image: url(../image/icon-plus.svg);
}
.iconPlusPoint{
    background-image: url(../image/icon-plus-point.svg);
}
.iconPlusGrey{
    background-image: url(../image/icon-plus-grey.svg);
}
.iconMinusPoint{
    background-image: url(../image/icon-minus-point.svg);
}
.iconSearchPoint{
    background-image: url(../image/icon-search-point.svg);
}
.iconChevronWhite{
    background-image: url(../image/icon-chevron-white.svg);
}
.iconChevronLeftWhite{
    background-image: url(../image/icon-chevron-white.svg);
    transform: rotate(180deg);
}
.iconChevronGrey{
    background-image: url(../image/icon-chevron-grey.svg);
}
.iconChevronLeftGrey{
    background-image: url(../image/icon-chevron-grey.svg);
    transform: rotate(180deg);
}
.iconChevronLightgrey{
    background-image: url(../image/icon-chevron-lightgrey.svg);
}
.iconChevronPoint{
    background-image: url(../image/icon-chevron-point.svg);
}
.iconChevronTopPoint{
    background-image: url(../image/icon-chevron-point2.svg);
    transform: rotate(-90deg);
}
.iconChevronBottomPoint{
    background-image: url(../image/icon-chevron-point2.svg);
    transform: rotate(90deg);
}
.iconPauseWhite{
    background-image: url(../image/icon-pause-white.svg);
}
.iconPlayWhite{
    background-image: url(../image/icon-play-white.svg);
}
.iconKakao{
    background-image: url(../image/icon-kakao.svg);
}
.iconNaverWhite{
    background-image: url(../image/icon-naver-white.svg);
}
.iconStarWhite{
    background-image: url(../image/icon-star-white.svg);
}
.iconDashboardWhite{
    background-image: url(../image/icon-dashboard-white.svg);
}
.iconSpeech{
    background-image: url(../image/icon-speech.svg);
}
.iconNoticePoint{
    background-image: url(../image/icon-notice-point.svg);
}
.iconSupport{
    background-image: url(../image/icon-support.svg);
}
.iconHelp{
    background-image: url(../image/icon-help.svg);
}
.iconClock{
    background-image: url(../image/icon-clock.svg);
}
.iconHeartPoint{
    background-image: url(../image/icon-heart-point.svg);
}
.iconBagPoint{
    background-image: url(../image/icon-bag-point.svg);
}
.iconLogoutGrey{
    background-image: url(../image/icon-logout-grey.svg);
}
.iconInfoInfo{
    background-image: url(../image/icon-info-info.svg);
}
.iconInfoDanger{
    background-image: url(../image/icon-info-danger.svg);
}
.iconHomePoint{
    background-image: url(../image/icon-home-point.svg);
}
.iconPreview{
    background-image: url(../image/icon-preview.svg);
}
.iconShopAddPoint{
    background-image: url(../image/icon-shop-add-point.svg);
}
.iconRankPoint{
    background-image: url(../image/icon-rank-point.svg);
}
.iconCloseDanger{
    background-image: url(../image/icon-close-danger.svg);
}
.iconFileGrey{
    background-image: url(../image/icon-file-grey.svg);
}
.iconFileSearchWhite{
    background-image: url(../image/icon-file-search-white.svg);
}
.iconIPoint{
    background-image: url(../image/icon-i-point.svg);
}
.iconsettingGrey{
    background-image: url(../image/icon-setting-grey.svg);
}
.iconMenuGrey{
    background-image: url(../image/icon-menu-grey.svg);
}
.iconDownloadGrey{
    background-image: url(../image/icon-download-grey.svg);
}
.iconStarCircleYellow{
    background-image: url(../image/icon-star-circle-yellow.svg);
}
.iconShareGrey{
    background-image: url(../image/icon-share-grey.svg);
}
.iconPrintGrey{
    background-image: url(../image/icon-print-grey.svg);
}
.iconLockGrey{
    background-image: url(../image/icon-lock-grey.svg);
    min-width: 20px;
}

/* 최유림대리 작업내용 - 서브페이지 작업 후 정리 예정*/
.iconEtc {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.iconError {
    background-image: url(../image/etc/icon-error.svg);
    max-width: 724px;
    aspect-ratio: 724 / 447;
}

.iconReady {
    background-image: url(../image/etc/icon-ready.svg);
    max-width: 607px;
    aspect-ratio: 607/493;
}

.iconGoBack {
    background-image: url(../image/etc/icon-etc-goback.svg);
    min-width: 18px;
    width: 18px;
    height: 18px;
}

@media (min-width: 1201px){
    .btn:has(.iconGoBack):hover .iconGoBack{
         filter: invert(1) brightness(2);
    }
}

.iconGohome {
    background-image: url(../image/etc/icon-etc-gohome.svg);
    width: 18px;
    height: 18px;
    min-width: 18px;
}

.iconSeverChange {
    max-width: 198px;
    aspect-ratio: 198 / 176;
    background-image: url(../image/etc/icon-sever-change.svg);
}

.iconMap {
    background-image: url(../image/icon-map.svg);
    width: 18px;
    height: 18px;
    min-width: 18px;
}

.iconArrowR {
    background-image: url(../image/icon-arrow-right.svg);
}

.iconArrowR.sm {
    width: 12px;
    height: 12px;
}