@charset "utf-8";

@font-face {
  font-family: 'ClipArtKorea';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-2@1.0/Clipartkorea-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'ClipArtKorea';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-2@1.0/Clipartkorea-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'ClipArtKorea';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-2@1.0/Clipartkorea-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'ClipArtKorea';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-2@1.0/Clipartkorea-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}




/*메인텍스트*/
#wrap_bgndVideo { 
    background: url(./img/bg.jpg) no-repeat center/cover;
}
#wrap_bgndVideo .visual_title {
    position: absolute; display: inline-block; z-index: 2;
    font-size: 2.2rem; color: #fff; text-align: center; left: 50%; top: 48%; transform: translate(-50%, -50%);
}
#wrap_bgndVideo .visual_title .tt {
    position: relative; font-family: 'ClipArtKorea', sans-serif; font-weight: 400;  letter-spacing: -1px;
    transition: opacity 3s ease-out, transform 3s ease-out;
    opacity: 1;
}
#wrap_bgndVideo .visual_title .tt strong { font-weight: 400; color: #FFFF80; }

#wrap_bgndVideo .visual_title .t1 { transform: scale(0.3) translateY(30px); }
#wrap_bgndVideo .visual_title .t2 { transform: scale(0.3) translateY(-30px); }
#wrap_bgndVideo.active .visual_title .t1 { transition-delay: 0.3s; opacity: 1; transform: scale(1); }
#wrap_bgndVideo.active .visual_title .t2 { transition-delay: 0.3s; opacity: 1; transform: scale(1); }

#wrap_bgndVideo .visual_title .star {
    position: absolute; display: inline-block; top: -10px; left: 75px; transform: translate(-50%, -50%);
    font-size: 0.75rem; color: #FFBFDE;
    animation:star_rotate 5s linear infinite;
}
@keyframes star_rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}