@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;
}


#indexVisualSwiper {
    position:relative; width:100%; height:100%;
    background-size: cover;
    background-attachment: fixed;
    background-position:center center;
    overflow: hidden;
}


#fullVisual { width: 100%; height: 100vh; }
#fullVisual .swiper-slide { position:relative; width:100%; height:100%; }
#fullVisual .bgimg {
    position:absolute; width:100%; height:100%; z-index:1; filter: brightness(100%);
    background: url('') no-repeat center / cover; 
}
#fullVisual .fv1 .bgimg { background-image: url(./img/visual1.jpg); }
#fullVisual .fv2 .bgimg { background-image: url(./img/visual2.jpg); filter: brightness(100%); }

#fullVisual .anim {
    position: absolute; display: inline-block; z-index: 2;
}
#fullVisual .anim img { max-width:100%;  }
#fullVisual .anim1 { left: 50%; top: 25%; transform: translate(-50%, -50%); }
#fullVisual .anim2 { left: 50%; top: 35%; transform: translate(-50%, -50%); }


#fullVisual .anim .tt {
    position: relative; width: 100%; display: block; letter-spacing: -2px; border: 0px solid blue; color: #000;
    font-family: 'ClipArtKorea', sans-serif; text-align: center; font-size: 2.8rem; font-weight: 300;
    /*text-shadow: 2px 2px 3px rgba(0,0,0,0.2);*/
}
#fullVisual .anim .tt strong { font-weight: 800; color:#000 }

#fullVisual .anim * { transition: all 0.3s ease; }


#fullVisual .anim .t1 { top:0; left:0; }
#fullVisual .anim .t2 { top:26%; left:0% }


#fullVisual .anim .tt.t1 { opacity: 0; transform: scale(1.0);}
#fullVisual .anim .tt.t2 { opacity: 0; bottom: 0}

#fullVisual .swiper-slide.swiper-slide-active .bgimg { animation: bgimg 5s 0.5s ease-out both }
#fullVisual .swiper-slide.swiper-slide-active .inna { animation: inna 1.5s 0.5s ease-out both }
#fullVisual .swiper-slide.swiper-slide-active .anim .tt.t1 { animation: t1_1 1.5s ease-out both 1.0s}
#fullVisual .swiper-slide.swiper-slide-active .anim .tt.t2 { animation: t1_2 1.5s ease-out both 1.5s}


/*#fullVisual .anim img { max-width:100% }*/


@keyframes bgimg {
    from { scale:1.2 }
    to { scale:1 }
}
@keyframes t1_1 {
    /*from { left:100px; scale:1 }*/
    from { transform: scale(0.5); }
    to {  opacity: 1;}
}
@keyframes t1_2 {
    from { bottom:-50px }
    to { opacity: 1; padding:0  }
}
@keyframes t1_3 {
    /*from { left:100px }*/
    from { transform: scale( 0.5); }
    to { opacity: 1;  }
}
@keyframes t1_4 {
    from { transform: translateY(30px); }
    to { opacity: 1 }
}
@keyframes t1_5 {
    from { transform: translateY(30px); }
    to { opacity: 1 }
}

@keyframes inna {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1 }
}


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


/*오리발*/
.fvOribal {
    position:absolute; left:10px; bottom:10px; color:#fff; text-shadow: 2px 2px 4px #000; z-index: 5; opacity: 0.8; letter-spacing: -1px;
}






@media (max-height: 900px ) {
}

@media (max-height: 800px ) {
}

@media (max-width: 1600px ) {
}

@media (max-width: 1400px ) {
}

@media (max-height: 600px ) {
}