/* Your Custom CSS Goes here */

/* bg custom */
.bg-cm-pink { background-color: #df5482 !important; }
.bg-cm-blue { background-color: #2998a7 !important; }
.bg-cm-gold { background-color: #b8860b !important; }
.bg-cm-silver { background-color: #c0c0c0 !important; }
.bg-cm-bronze { background-color: #cd7f32 !important; }

/* color custom */
.text-cm-pink { color: #df5482 !important; }
.text-cm-blue { color: #2998a7 !important; }
.text-cm-gold { color: #b8860b !important; }
.text-cm-silver { color: #c0c0c0 !important; }
.text-cm-bronze { color: #cd7f32 !important; }


/* font-size custom */
.text-cm-1 { font-size: 24px !important; }
.text-cm-2 { font-size: 18px !important; }
.text-cm-3 { font-size: 16px !important; }
.text-cm-4 { font-size: 14px !important; }
.text-cm-5 { font-size: 12px !important; }
.text-cm-6 { font-size: 10px !important; }

/* bg custom animation */
.bg-cm-ani-1 {
  background: linear-gradient(45deg, #ff6b70, #ff8ea3, #ff8ea3, #ff6b70);
  background-size: 400% 400%;
  animation: gradientAnimation 5s ease infinite;
}

.bg-cm-ani-2 {
  background: radial-gradient(circle, #b8860b, #c7a900, #c2a813, #b8860b);
  background-size: 400% 400%;
  animation: gradientAnimation 5s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 번쩍번쩍 효과 */
.bg-cm-flash {
  animation: flashEffect 1s infinite;
}

.bg-cm-flash-slow {
  animation: flashEffect 2s infinite;
}

.bg-cm-flash-fast {
  animation: flashEffect 0.5s infinite;
}

@keyframes flashEffect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ef custom */




/* 넘치는 글씨 ... */
.text-ellipsis {
    display: inline-block;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}