@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url("https://fonts.googleapis.com/earlyaccess/nanumgothic.css");

:root {
    --grd-direction-rt: to right top;
    --grd-direction-r: to right;
    --grd-direction-rb: to right bottom;
    --grd-direction-b: to bottom;
    --grd-direction-lb: to left bottom;
    --grd-direction-l: to left;
    --grd-direction-lt: to left top;
    --grd-direction-t: to top;
    --yellow: #FCCF31;
    --orange: #ffbb9d;
    --red: #d50000;
    --grd-primary: #8748ff, #7c44fe, #7040fe, #633cfd, #5439fd;
    --grd-secondary: #fea19a, #ff919a, #ff809f, #ff70aa, #fe61b8;
    --grd-tertiary: #17e2a1 3%, #3c86ff 120%;
    --grd-info: #2196f3, #5598f8, #769bfb, #919dfe, #a99fff;
    --grd-success: #9dd85f, #86d563, #6ed168, #51cd6e, #26c975;
    --grd-warning: #FCCF31 10%, #F55555 100%;
    --grd-error: #d50000, #de1c18, #e72d29, #ef3c3a, #f64949;
    --dark-brt: #f2f5ff;
    --dark-br: #9ca6cb;
    --dark-hl: #7883ad;
    --dark-l: #2a324d;
    --dark-op: #242b4480;
    --darker: #242b44;
    --grd-dark: var(--mud-palette-dark-lighten), var(--mud-palette-dark-darken);
    --bar-bg: #8748ff0d;
}

/*폰트색상*/
.fc-grd-01 {
    background: #ffdb5d;
    background: linear-gradient(var(--grd-direction-r), #ffdb5d 20%, #ff809f);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px transparent;
    color: transparent;
}
.fc-white {
    color: var(--mud-palette-white);
}
    a.fc-white:hover {
        color: var(--orange);
    }
.fc-dark-brl {
    color: var(--dark-br);
}
.fc-dark-hl {
    color: var(--dark-hl);
}
.fc-darker {
    color: var(--darker);
}
.fc-light-g {
    color: var(--mud-palette-white);
    opacity: 0.6;
}
.fc-yellow {
    color: var(--yellow);
}
.fc-orange {
    color: var(--orange);
}
.fc-mint {
    color: var(--mud-palette-tertiary-lighten);
}
.fc-red {
    color: var(--red);
}
tr.fc-red td, tr.fc-red td p, tr.fc-red td p a {
    color: var(--red) !important
}

.dark-darken {
    background-color: var(--mud-palette-dark-darken);
    color: var(--mud-palette-white);
}
.bg-text-box {
    background-color: #f6faff
}
/*그라디언트*/
[class*="grd-bg"] {
    color: var(--mud-palette-primary-text) !important;
}

.bg-dark-highlight {
    background-color: var(--dark-hl);
    color: var(--mud-palette-white);
}

.bg-dark-brt, .table-notice {
    background-color: var(--dark-brt);
}
        
 /*배경다크라이트*/
.bg-dark-lighten {
    background-color: var(--mud-palette-dark-lighten);
    color: var(--mud-palette-white);
}
.bg-dark-op {
    background-color: var(--dark-op);
    color: var(--mud-palette-white);
}
.bg-bar {
    background-color: var(--bar-bg)!important;
}
.bg-white {
    background-color: var(--mud-palette-surface) !important;
}
/*배경다크다큰*/
.bg-dark-darken {
    background-color: var(--mud-palette-dark-darken);
    color: var(--mud-palette-white)!important;
}
    .grd-bg-dark-lighten {
        background-image: linear-gradient(var(--grd-direction-b), #ffffff21 -30%, #00000055);
        border: 1px solid #ffffff0f;
    }
.grd-bg-dark-rt {
    background-image: linear-gradient(var(--grd-direction-rt), var(--grd-dark));
}

.grd-bg-dark-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-dark));
}

.grd-bg-dark-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-dark));
}

.grd-bg-dark-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-dark));
}

.grd-bg-dark-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-dark));
}

.grd-bg-dark-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-dark));
}

.grd-bg-dark-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-dark));
}

.grd-bg-dark-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-dark));
}



.grd-bg-primary-rt {
    background-image: linear-gradient(var(--grd-direction-rt), var(--grd-primary));
}

.grd-bg-primary-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-primary));
}

.grd-bg-primary-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-primary));
}

.grd-bg-primary-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-primary));
}

.grd-bg-primary-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-primary));
}

.grd-bg-primary-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-primary));
}

.grd-bg-primary-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-primary));
}

.grd-bg-primary-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-primary));
}


.grd-bg-secondary-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-secondary));
}

.grd-bg-secondary-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-secondary));
}

.grd-bg-secondary-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-secondary));
}

.grd-bg-secondary-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-secondary));
}

.grd-bg-secondary-lb {
    background-image: linear-gradient(var(--grd-direction-lbr), var(--grd-secondary));
}

.grd-bg-secondary-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-secondary));
}

.grd-bg-secondary-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-secondary));
}

.grd-bg-secondary-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-secondary));
}


.grd-bg-tertiary-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-tertiary));
}

.grd-bg-tertiary-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-tertiary));
}

.grd-bg-tertiary-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-tertiary));
}

.grd-bg-tertiary-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-tertiary));
}

.grd-bg-tertiary-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-tertiary));
}

.grd-bg-tertiary-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-tertiary));
}

.grd-bg-tertiary-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-tertiary));
}

.grd-bg-tertiary-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-tertiary));
}


.grd-bg-info-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-info));
}

.grd-bg-info-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-info));
}

.grd-bg-info-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-info));
}

.grd-bg-info-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-info));
}

.grd-bg-info-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-info));
}

.grd-bg-info-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-info));
}

.grd-bg-info-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-info));
}

.grd-bg-info-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-info));
}

.grd-bg-success-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-success));
}

.grd-bg-success-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-success));
}

.grd-bg-success-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-success));
}

.grd-bg-success-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-success));
}

.grd-bg-success-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-success));
}

.grd-bg-success-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-success));
}

.grd-bg-success-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-success));
}

.grd-bg-success-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-success));
}

.grd-bg-warning-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-warning));
}

.grd-bg-warning-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-warning));
}

.grd-bg-warning-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-warning));
}

.grd-bg-warning-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-warning));
}

.grd-bg-warning-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-warning));
}

.grd-bg-warning-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-warning));
}

.grd-bg-warning-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-warning));
}

.grd-bg-warning-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-warning));
}

.grd-bg-error-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-error));
}

.grd-bg-error-r {
    background-image: linear-gradient(var(--grd-direction-r), var(--grd-error));
}

.grd-bg-error-rb {
    background-image: linear-gradient(var(--grd-direction-rb), var(--grd-error));
}

.grd-bg-error-b {
    background-image: linear-gradient(var(--grd-direction-b), var(--grd-error));
}

.grd-bg-error-lb {
    background-image: linear-gradient(var(--grd-direction-lb), var(--grd-error));
}

.grd-bg-error-l {
    background-image: linear-gradient(var(--grd-direction-l), var(--grd-error));
}

.grd-bg-error-lt {
    background-image: linear-gradient(var(--grd-direction-lt), var(--grd-error));
}

.grd-bg-error-t {
    background-image: linear-gradient(var(--grd-direction-t), var(--grd-error));
}
/*효과●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
/*애니메이션*/
.grd-bg-animation {
    background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    overflow: hidden;
    background-size: 400% 400%;
    animation: Gradient 10s ease infinite;
    color: var(--mud-palette-white);
}

@keyframes Gradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}


@keyframes color {
    0%, 100% {
        background: #594ae2; /*33CCCC*/
    }

    10% {
        background: #19afd0;
    }

    20% {
        background: #1ab2a3;
    }

    30% {
        background: #96ce56;
    }

    40% {
        background: #cddc39;
    }

    50% {
        background: #ffc107;
    }

    60% {
        background: #ff9800;
    }

    70% {
        background: #ff5722;
    }

    80% {
        background: #e91e63;
    }

    90% {
        background: #de6df2;
    }
}