/**
리스렌트 로딩할 때 빙글빙글 돌아가는 animation css
*/
.SectionPlaceholder {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f3f4f8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 105vh;
    position: fixed;
    -webkit-transition: z-index .3s ease-in-out;
    transition: z-index .3s ease-in-out;
    width: 100vw;
    z-index: 100;
    top: 0;
    left: 0;
}


.sc-p--xs {
    padding: .8rem!important;
}

.sc-Loader, .sc-Loader--xxl {
    height: 9.6rem;
    width: 9.6rem;
}
.sc-Loader {
    padding: .8rem;
    z-index: 5;
}

svg:not(:root) {
    overflow: hidden;
}

.sc-Loader-svg {
    -webkit-animation: rotator 1.25s linear infinite;
    animation: rotator 1.25s linear infinite;
}

.sc-Loader--xxl .sc-Loader-path {
    stroke-width: 3;
}
.sc-Loader-path {
    stroke: rgba(104,108,115,.15);
    fill: none;
}

.sc-Loader-loadingIndicator {
    -webkit-animation: dash 2.5s ease-in-out infinite,spinner-colors-blue 2.5s ease-in-out infinite;
    animation: dash 2.5s ease-in-out infinite,spinner-colors-blue 2.5s ease-in-out infinite;
    stroke-dasharray: 1,300;
    stroke-dashoffset: 0;
    fill: none;
    stroke-linecap: round;
}

@-webkit-keyframes rotator {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotator {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes spinner-colors-blue {
    0%,
    to {
        stroke: #D2465A
    }
    33% {
        stroke: #D2465A
    }
    66% {
        stroke: #D2465A
    }
}

@keyframes spinner-colors-blue {
    0%,
    to {
        stroke: #D2465A
    }
    33% {
        stroke: #D2465A
    }
    66% {
        stroke: #D2465A
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }
    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }
    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}