/* * ------------------------------ * Revealing Animation * ------------------------------ */
   .fadeIn {
       visibility: visible;
/*       background: transparent;*/
       animation: fadeIn .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }

   .scaleUp {
       /* 콘텐츠를 초기에 보여주지 않음 */
       opacity: 0;
       animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }

   .fadeOut {
       animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }

   .scaleDown {
       animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }

   /* Dimmed showing */
   @keyframes fadeIn {
       0% {
           background: transparent;
       }

       100% {
           background: rgba(0, 0, 0, .7);
       }
   }


   /* Dimmed hiding */
   @keyframes fadeOut {
       0% {
           background: rgba(0, 0, 0, .7);

       }

       100% {
           background: transparent;
           visibility: hidden;
       }
   }

   /* Show modal content from bottom to top */
   @keyframes scaleUp {
       0% {
           /* 모달 콘텐츠를 하단에 위치시킴 */
           transform: scale(.8) translateY(500px);
           opacity: 0;

       }

       100% {
           /* 모달 콘텐츠를 본래 위치로 돌려놓음 */
           transform: scale(1) translateY(0);
           opacity: 1;
       }
   }


   /* modal content from top to bottom */
   @keyframes scaleDown {
       0% {
           transform: scale(1) translateY(0);
           opacity: 1;
       }

       100% {
           transform: scale(.8) translateY(500px);
           opacity: 0;
       }
   }

   /* Shrink content */
   @keyframes scaleBack {
       0% {
           transform: scale(1);
       }

       100% {
           transform: scale(.8);
       }
   }

   /* Hide modal container*/
   @keyframes quickScaleDown {
       0% {
           transform: scale(1);
       }

       99.9% {
           transform: scale(1);
       }

       100% {
           transform: scale(0);
       }
   }




   @keyframes scaleBack {
       0% {
           transform: scale(1);
       }

       100% {
           transform: scale(.85);
       }
   }

   @keyframes scaleForward {
       0% {
           transform: scale(0.85);
       }

       100% {
           transform: scale(1);
       }
   }